Import & Export

Importing

Images:

• Drag and drop - Works reliably on all platforms
• File menu - May have issues on macOS, use drag-drop instead
• Supported file formats: PNG, JPEG, SVG

From Figma:

• Copy Frames directly from Figma
• Paste in Pencil
• Note: Images don’t copy from Figma, use SVG or re-import

Icons:

• Built-in: Material Icons library
• Custom: SVG paths supported
• For code generation: Specify icon library in prompts (Lucide, Heroicons)

Exporting

Design to Code:

• Use AI agent to export designs to React/code
• Press Cmd/Ctrl + K and ask to generate code

Images:

• Export frames as PNG/SVG
• Right-click frame → Export