How to Migrate from Figma to Penpot: Step-by-Step Guide
Moving from Figma to Penpot doesn't have to be painful. This guide covers the .fig file importer, what transfers cleanly, what needs manual fixes, and how to rebuild your design system in Penpot.
Before You Start: The Migration Checklist
Not everything transfers 1:1 from Figma to Penpot. Here's what you should know before starting:
What Transfers Cleanly ✅
- Frames, shapes, and groups
- Text layers (font, size, weight, color)
- Fill colors and gradients
- Stroke properties
- Boolean operations (union, subtract, intersect)
- Basic auto-layout (flex direction, gap, padding)
- Images and embedded assets
What Needs Manual Fixing ⚠️
- Complex auto-layout (nested, absolute positioning inside)
- Component variants (transfers as separate components)
- Prototyping interactions (need to be recreated)
- Figma-specific plugins output
What Doesn't Transfer ❌
- Figma plugins and widget data
- Comments and version history
- FigJam files
Audit Your Figma Files (5 minutes)
Before migrating, decide what's worth bringing over. Not every file needs to be migrated:
- Active projects: Migrate these first — they're the ones you use daily
- Design system/component library: Migrate this carefully — it's the foundation
- Archived projects: Keep these in Figma's free viewer or export as PDFs for reference
- Old drafts: Skip these — start fresh in Penpot
Don't migrate everything at once. Start with one small project, learn the quirks, then tackle your design system. This prevents frustration.
Export from Figma (2 minutes)
You have two export options:
Option A: .fig file (Recommended)
- Open your Figma file
- Go to File → Save local copy
- This downloads a .fig file that Penpot can import
Option B: SVG Export (for simpler files)
- Select frames or pages in Figma
- Go to Export → SVG
- Import the SVGs into Penpot (File → Import)
Option A preserves more structure (layers, groups, names). Option B is flatter but guaranteed to look identical. Use Option A for editable files, Option B for visual references.
Import into Penpot (3 minutes)
- Log into penpot.app
- Create a new project (or open an existing one)
- Click "Import Figma File" (on the project dashboard)
- Select your .fig file
- Wait for the import — progress bar shows conversion status
- Open the imported file and review
The importer will create a new Penpot file with the same page structure, layer names, and visual layout as your Figma file.
Fix Import Issues (10-15 minutes)
After import, go through this checklist:
- Check text layers: Fonts should match. If a font is missing, Penpot shows a warning — upload the font or substitute it
- Check auto-layout: Simple flex layouts transfer well. Complex nested layouts may need manual adjustment
- Rebuild components: Figma components import as groups. Right-click → "Create Component" to make them reusable again
- Re-link assets: Images usually transfer, but if any are missing, re-upload them
- Fix spacing: Some padding/margin values may need fine-tuning
Feature Compatibility Matrix
| Figma Feature | Penpot Support | Notes |
|---|---|---|
| Frames & Shapes | ✅ Full | Perfect 1:1 transfer |
| Text Styles | ✅ Full | Font files must be available |
| Color Styles | ✅ Full | Imported as color palette |
| Auto-Layout | ⚠️ Partial | Basic flex works; advanced needs manual fix |
| Components | ⚠️ Partial | Imported as groups — recreate as components |
| Variants | ⚠️ Manual | Each variant becomes a separate component |
| Prototyping | ❌ Manual | Must recreate interactions in Penpot |
| Plugins | ❌ N/A | Figma plugins don't exist in Penpot |
| Version History | ❌ N/A | Not transferred; Penpot has its own versioning |
Rebuild Your Design System (10+ minutes)
If you had a design system in Figma, here's how to set it up in Penpot:
- Color Palette: Create a shared library with your brand colors (right-click any color → "Save to Library")
- Typography: Set up text styles for heading, body, caption, etc. (select text → Design tab → "+" next to Typography)
- Components: Rebuild your key components — buttons, inputs, cards, navigation. Use the component system for reusability
- Spacing System: Document your spacing scale (4, 8, 12, 16, 24, 32, 48, 64) for consistency
Create a "Foundation" file in Penpot that holds your entire design system. Then add it as a "Shared Library" — all your other project files can access these components.
Validate Your Migration
Open your Figma file (read-only on free plan) and your Penpot file side by side. Check:
- Visual accuracy — do layouts look the same?
- Text rendering — fonts, sizes, line heights match?
- Responsive behavior — does auto-layout work correctly?
- Component library — can you place and edit components?
- Export quality — PNG/SVG exports match expectations?
Tips for a Smooth Migration
- Migrate incrementally — one file at a time, not your entire Figma workspace
- Keep Figma as read-only reference — Figma's free plan lets you view files indefinitely
- Rebuild components fresh — it's often faster to rebuild than to fix imported components
- Learn Penpot's native SVG approach — it's different from Figma's vector network, but powerful
- Join the Penpot community — active forums and Discord for migration help
The Bottom Line
Migrating from Figma to Penpot is a weekend project, not a month-long ordeal. The .fig importer handles 80% of the work, and the remaining 20% is manually rebuilding components and prototyping flows.
The payoff? $144/yr saved per editor, full data ownership, and freedom from vendor lock-in. For most design teams, that's worth a Saturday afternoon of migration work.
New to Penpot?
Start with our beginner guide to learn the interface, shortcuts, and workflows.
Penpot Beginner Guide →