Import and Export

Pencil supports a variety of import and export workflows so you can bring assets in from other tools and ship designs out as production-ready code or image files.

Importing

Images

• Drag and drop — the most reliable way to bring images into Pencil. Simply drag a file from your file system onto the canvas.
• The File menu import option may have issues on macOS; prefer drag and drop when possible.
• Supported formats: PNG, JPEG, and SVG.

From Figma

• Copy frames in Figma and paste them directly into Pencil.
• Raster images embedded in Figma frames do not transfer during copy-paste. Export them as SVG first or re-import the images separately.

Icons

• Pencil ships with a built-in Material Icons library you can use on any frame.
• You can also paste custom SVG paths directly onto the canvas for one-off icons.
• For code generation, specify the icon library you want in your AI prompts — for example Lucide or Heroicons.

Exporting

Design to Code

• Use the built-in AI agent to turn any frame into production code.
• Press Cmd/Ctrl+K and ask the agent to generate code for the selected frame.

Images

• Export any frame as PNG or SVG.
• Right-click a frame and choose Export to open the export dialog.

Last updated: February 22, 2026