Pencil PEN Importer
Pencil.dev to Figma
Plugin Preview
About this plugin
Pencil to Figma (Pencil PEN Importer)
Author: Jason Yu @WSAI&WCKJ
Effortlessly import your Pencil.dev designs into Figma with high fidelity. This plugin automates the conversion of .pen export files into structured Figma layers, preserving complex layouts and design systems.
✨ Key Features
Multi-Page Support: Automatically imports top-level designs into separate Figma pages for better organization.
Precision Auto Layout: Accurate mapping of Pencil's Horizontal/Vertical layouts, including Gap, Padding, and Alignment.
Smart Sizing: Intelligent conversion of fill_container and hug_contents to Figma's native sizing modes.
Advanced Icon Support: Specialized rendering for Lucide icons, Material Symbols, and Material Icons.
Design Tokens & Variables: Resolves color, number, and string variables to maintain your design system.
Rich Styles: High-fidelity conversion of Fills (Solid/Gradient/Image), Strokes, Corner Radius, Opacity, and Shadows.
Component Sync: Handles component references (ref) with support for descendant overrides.
🚀 How to Use
Launch the "Pencil PEN Importer" in Figma.
Upload: Drag & drop or select your .pen file.
Import: Click "Import" and watch your multi-page design come to life in Figma!
Plugin Details
| Version | 4 |
|---|---|
| Created | February 2, 2026 |
| Last Updated | February 4, 2026 |
| Category | Import & export plugins |
| Creator | WCKJ |
| Stats | 0 installs, 1 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Import & export plugins category.
html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Convert any website into fully editable Figma designs
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Figma to HTML
Convert Figma design to HTML