Import & Export
Import
Complete Figma Files
- Toolbar — Click the chevron below the Rectangle icon in the toolbar and select
Import Figma - File menu (Desktop app only) — Go to
File>Import Image/SVG/Figma...and select a Figma file.
Individual Figma Layers
- Copy and paste — Select and copy individual elements in Figma and paste them onto the Pencil canvas.
Copying and pasting image elements is not supported. Either import the complete Figma file or add images manually.
Images
- Drag and drop — Drag an image from your computer onto the Pencil canvas.
- Copy and paste — Copy an image to your clipboard and paste it onto the Pencil canvas.
- Toolbar — Click the chevron below the Rectangle icon in the toolbar and select
Import Image or SVG... - File menu (Desktop app only) — Go to
File>Import Image/SVG/Figma...and select an image.
Supported image formats: PNG, JPEG, and SVG.
Icons
- Pencil includes the following built-in icon libraries: Material Symbols (Outlined, Rounded, Sharp), Lucide Icons, Feather, and Phosphor.
- You can also import your own SVG icons the same way as individual images.
Export
Design to Code
- Press
Cmd/Ctrl + Kto open the AI chat and ask it to generate code from your design.
Individual Elements
You can export one or more elements from Pencil as PNG, JPEG, WEBP, or PDF.
- Select the elements you want to export.
- At the bottom of the properties panel, choose the desired size and format.
- Click Export layer, pick a location, and click Save.
Last updated on