.pen to Figma — Pencil.dev Importer

About this plugin

Drop a .pen file. Get a fully editable Figma file — real components, auto layout, variables with theme modes, and 1,900+ icons. Not screenshots. Not flat images. Your actual design, layer by layer, exactly how Pencil built it. Free, no limits.━━━━━━━━━━━━━━━━━━━━━━━━━━━━The most complete way to bring your Pencil.dev designs into Figma.Import any .pen file and get a fully editable Figma file with real components, auto layout, design variables, and 1,900+ icons — not screenshots, not flattened images. Every layer, every style, every interaction state, exactly as you designed it in Pencil.Stop rebuilding your AI-generated designs by hand.━━━━━━━━━━━━━━━━━━━━━━━━━━━━HOW IT WORKS1. Open the plugin2. Drop your .pen file (or a ZIP with images)3. Pick which frames to import4. Click "Import" — doneThat's it. Your Pencil design is now a fully editable Figma file.━━━━━━━━━━━━━━━━━━━━━━━━━━━━WHAT GETS IMPORTEDComponents & InstancesReusable components from Pencil become real Figma Components. Instances preserve all descendant overrides — text, colors, icons, visibility. Your design system transfers intact.Auto LayoutHorizontal, vertical, wrap, gap, padding, alignment — all mapped precisely. Your responsive layouts work in Figma exactly as they did in Pencil.Design Variables & ThemesColor, number, and string variables become native Figma Variables with theme modes (light/dark). Switch themes in Figma's built-in variable system.1,900+ IconsFull Lucide icon library rendered as scalable vector components. Icons swap correctly on component instances via Figma's native component swap.ImagesExternal images and embedded data URIs are fetched and applied as real Figma image fills. ZIP import extracts local images automatically. Or use the folder picker to select your images directory.TypographyFont family, weight, size, line height, letter spacing, alignment, underline, strikethrough — all preserved. Intelligent 5-level font fallback ensures text always renders, even if the exact font isn't installed.Fills, Strokes & EffectsSolid colors, linear/radial/angular/diamond gradients, image fills, stroke styles with dash patterns, drop shadows, inner shadows, layer blur, background blur — full visual fidelity.Shapes & VectorsRectangles, ellipses, polygons, lines, and SVG vector paths with fill rules. Corner radius (uniform or per-corner). Blend modes across 16 types.━━━━━━━━━━━━━━━━━━━━━━━━━━━━WHY THIS ONE?Other pen-to-Figma importers exist. Here's what makes this different:→ Frame picker — Choose exactly which frames to import, not everything at once→ ZIP + folder support — Local images from Pencil exports import seamlessly→ Real Figma Variables — Not just resolved colors, but actual Variables with theme modes→ Icon component library — 1,900+ icons as real Components with swap support→ Smart font fallback — 5-level cascade so text never breaks, even with missing fonts━━━━━━━━━━━━━━━━━━━━━━━━━━━━SUPPORTED PENCIL NODE TYPESframe · group · rectangle · ellipse · line · polygon · path · text · icon_font · ref (component instance) · note · image━━━━━━━━━━━━━━━━━━━━━━━━━━━━PERFECT FOR• Designers using Pencil.dev for rapid AI-powered UI generation who need to continue in Figma• Teams moving from Pencil prototypes to production-ready Figma files• Anyone who wants their pencil.dev AI designs in Figma without manual rebuild━━━━━━━━━━━━━━━━━━━━━━━━━━━━Free and open. Import your first Pencil.dev design in under 30 seconds.