Pencil Importer

Pencil ImporterPencil 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, absolute positioning, 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🎯 Most accurate style restoration on the market. 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, `fit_content(N)` / `fill_container(N)` min-size handling, and absolute positioning ("Ignore auto layout") with correct coordinate mapping.

🎨 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 — 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 with overflow detection), `alignItems`, hug/fill, `fit_content(N)` / `fill_container(N)`, clip, automatic HUG↔FILL conflict fixing, and **absolute positioning** (`layoutPositioning = "ABSOLUTE"` / "Ignore auto layout").

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.

Icon — 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 → folder-mapped real bytes.

Workflow highlights- **Drag-and-drop** `.pen` onto the window- **Stats accordion** previews everything before import- **Partial Import (Pro)** with dependency locking so you can't break references- **Four-channel progress tracking** + stage-aware overall progress bar- **Cancellable, batched imports** — never freezes Figma- **Light/dark aware**, 10 languages (EN · 简中 · 繁中 · 日 · 韓 · FR · DE · ES-ES · ES-LA · PT-BR), spring animations throughout, resizable windowFree vs Pro**Free** — everything above, **10 full imports** to evaluate, mesh gradient at 2×.**Pro unlocks**- Partial / selective import with dependency locking- Mesh gradient resolution up to **5×** (print-grade)- Advanced import settings- Unlimited importsOne-time unlock via Figma's native checkout.**Designed a gorgeous screen in Pencil?** Bring it into Figma the way it was meant to look — variables, auto-layout, gradients, mesh, components and all.>> *Made by [@iyinchao](https://github.com/iyinchao) · Issues & feedback on GitHub*