Pencil Importer
Import .pen designs into Figma — pixel-perfect, production-ready.
Plugin Preview
About this plugin
Pencil Importer brings your Pencil (.pen) files into Figma with the highest level of fidelity available today — not just shapes and text, but your variables, themes, auto layout, gradients, mesh gradients, shadows, icons, and components. Drop a file in, hit Import, and land in Figma fully editable. No screenshots, no rebuilding, no manual fixup.Why it stands out🎯 Accurate style restoration. Fills, strokes, gradients, effects, rotation, z-order — reproduced down to edge cases Figma itself doesn't natively support.🧩 Complete Auto Layout support — including space-between / space-around / space-evenly, hug/fill conflict resolution, and fit_content(N) / fill_container(N) min-size handling.🎨 Real Figma Variables, not baked colors. Multi-collection, multi-mode themes; fills, strokes, corners, opacity and effect colors bound by reference.🌈 Mesh gradients rasterized with a WebGL Coons-Patch renderer — a first for Pencil → Figma.🔤 Icon libraries built in: Lucide, Material Symbols (all weights & variants), Feather, Phosphor.🖼️ Local image mapping (Pro) — point the plugin at a folder, it auto-matches every relative path.What it importsNodes — Frame · Rectangle · Ellipse · Vector/Path · Text · Group · Icons (as vectors) · Components + Instances (with slot & per-descendant overrides).Auto Layout — direction, gap, 4-side padding, justifyContent (incl. space-around / evenly / single-child space-between via smart spacers), alignItems, hug/fill, fit_content(N) / fill_container(N), clip, and automatic HUG↔FILL conflict fixing.Fills & strokes — solid, variable references, linear/radial/angular gradients, mesh gradients, images (HTTPS + local), multi-fill / multi-stroke arrays with per-layer visibility; stroke thickness, align, cap and join preserved.Effects — drop shadow (outer/inner), layer blur, background blur, with variable-bound colors.Corner radius — uniform or per-corner, each corner independently variable-bindable.Transform — rotation, flipX / flipY via relativeTransform (no pixel offset).Variables & themes — auto type inference (FLOAT / COLOR / STRING / BOOLEAN), multi-collection / multi-mode from themes, recursive alias resolution.Icons — Lucide · Feather · Material Symbols (Sharp/Rounded/Outlined, weights 100–700) · Phosphor (Thin → Duotone). CDN with fallback & session cache.Images — HTTPS (fetched, dedup'd), empty → placeholder, local paths → (Pro) folder-mapped real bytes.Workflow highlightsDrag-and-drop .pen onto the windowStats accordion previews everything before importPartial Import (Pro) with dependency locking so you can't break referencesFour-channel progress tracking + stage-aware overall progress barCancellable, batched imports — never freezes FigmaLight/dark aware, 10 languages (EN · 简中 · 繁中 · 日 · 韓 · FR · DE · ES-ES · ES-LA · PT-BR), spring animations throughout, resizable windowFree vs ProFree — 15 full imports to evaluate, mesh gradient at 2×. Pro unlocksLocal image mappingPartial / selective import with dependency lockingMesh gradient resolution up to 5× (print-grade)Advanced import settingsUnlimited importsMade by @iyinchao · Issues & feedback on GitHub
Plugin Details
| Version | 2 |
|---|---|
| Created | March 20, 2026 |
| Last Updated | April 17, 2026 |
| Category | Import & export plugins |
| Creator | Charles Yin |
| Stats | 1 installs, 1 likes |
| Pricing | Paid |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Network Access:
Required for loading external resources in pencil file, e.g., icon and images
- Editor Types:figma
- Allowed Domains:
- *
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