Importing from Figma
Turn your Figma designs into a live, editable app. Learn how to prepare your design file, share the right link, and get the best results from the Figma import feature.
Import your Figma design into bldrAgent
If you've already done your design work in Figma, you don't have to start from scratch in bldrAgent. The Import from Figma feature reads a shared Figma frame or section and recreates it as a live, editable project — with pages, layout, and visual style carried across automatically.
This guide covers everything you need to know: how the import works, how to prepare your Figma file for the best outcome, and what to do once the import is complete.
What gets imported
The Figma importer focuses on the visual structure of a selected frame or section. When you import, bldrAgent reads:
- Layout and hierarchy — how elements are nested, grouped, and arranged on the canvas
- Typography — font families, sizes, weights, and alignment (Google Fonts are carried across directly)
- Colours and fills — background colours, text colours, and solid fills on shapes
- Spacing and sizing — padding, gaps, and element dimensions from Auto Layout frames
- Images — any images embedded in the design are captured as a reference screenshot
Supported file types: Figma Design files only. FigJam boards, Slides, and Prototype-only views are not supported.
Before you start: preparing your Figma file
A well-structured Figma file produces a much cleaner import. Taking a few minutes to prepare your file is worth it.
Use Figma Design files
Check that you're working in a standard Figma Design file. Open the file in Figma and confirm the file type in the top bar — it should say "Design", not "FigJam" or "Slides".
Select a single frame or section
The importer works on a single frame or section at a time. Importing an entire Figma page or document is not supported and will produce poor results.
For best results:
- Group your design into one top-level frame (e.g. your home page)
- Select that frame before copying the share link
- If you have multiple pages to import, import them separately
Apply Auto Layout where it matters
Auto Layout tells bldrAgent how elements should resize and relate to each other. Apply it to:
- Navigation bars — so the spacing between items is preserved
- Cards — group the image, title, and description into a single Auto Layout frame
- Repeating rows — any list or grid of similar items
- Buttons — so padding is captured correctly
Without Auto Layout on key components, elements may appear as static absolute-positioned blocks rather than flexible, responsive layouts.
Group related elements
Elements that belong together — like a card's image, heading, and body copy — should be wrapped in a Frame or Group. This tells bldrAgent that they are a single component, not unrelated individual elements.
Avoid deep unnecessary nesting. If you have a frame inside a frame inside a frame with no layout purpose, flatten the structure.
Clean up vectors and icons
Complex icons and vector shapes import more reliably when simplified:
- Flatten multi-path icons — if an icon is built from multiple separate shapes, select them all and flatten them into a single vector (Ctrl/Cmd + E in Figma)
- Outline strokes — for lines and strokes that are part of a shape's design, use Object → Outline Stroke before flattening
- Remove hidden layers — layers toggled invisible in the Layers panel don't add to the visible design but can confuse the import. Delete them before sharing
Simplify fills
If an element has multiple fills stacked on top of each other, only the last fill is imported. Keep fills simple: one fill per element where possible. Remove decorative fill layers you no longer need.
Font considerations
Only Google Fonts are imported with full fidelity. If your design uses a licensed or custom font, it will be substituted with the default typeface during import. You can update the typography inside bldrAgent after the import using the AI chat:
"Change the headings font to Inter and the body font to DM Sans throughout the app."
Sharing the Figma link
The importer needs a public view link to read your design. Here's how to generate one:
- Open your Figma Design file
- Select the specific frame or section you want to import — click it in the canvas or in the Layers panel
- Click Share in the top-right corner of Figma
- Under Who has access, change the setting to Anyone with the link – Can view
- Click Copy link
The link will look something like:
https://www.figma.com/design/AbcDeFgHiJkL/My-Project?node-id=10-32
The node-id parameter in the URL tells bldrAgent exactly which frame to read. If you select a frame before copying the link, Figma includes this automatically.
After importing, you can change your Figma file permissions back to private if you prefer. The import is a one-time read — bldrAgent does not maintain an ongoing connection to your Figma file.
Running the import
- Go to New Project from your dashboard
- Select Import from Figma as the project type
- Paste your Figma share link into the Figma share link field
- Give the project a name and category
- Click Import Figma design
bldrAgent will read the design, capture a screenshot of the frame, and create a new project with your design as the visual reference. You'll be taken directly to the project editor when it's ready.
Using your own Figma Personal Access Token
If you are importing from a private Figma file that isn't publicly viewable, you can provide your own Figma Personal Access Token:
- Expand the Use my own Figma Personal Access Token section on the import form
- Generate a token in Figma under Settings → Security → Personal access tokens
- Paste the token into the field
Your token is used once for the import request and is never stored by bldrAgent.
What the AI does with your imported design
Once the import completes, the AI opens with your design as the starting context. It has:
- A screenshot of the imported Figma frame as visual reference
- The project name and description you provided
- A blank canvas ready to be built out
From here, instruct the AI to build the app from your design:
Review the imported design carefully. Recreate it as a
fully working website. Use the layout, colours, typography,
and structure from the design as the source of truth. Then
identify what additional pages are needed to make this a
complete website and create them in the same visual style.
You can be as specific as you like:
"The hero section has a headline, subheading, and two CTA buttons — one primary, one outlined. Recreate this exactly, making the primary button link to /get-started."
"The navigation shows five items: Home, About, Services, Portfolio, Contact. Make each one link to its corresponding page."
Extending the design into a full app
The imported frame is typically your home page or a key screen. Use it as the foundation and ask the AI to build the rest:
| What to ask the AI | Example prompt |
|---|---|
| Identify missing pages | "Based on this home page, what other pages does this website need? List them." |
| Create matching pages | "Create an About page, Pricing page, and Contact page using the same design language as the home page." |
| Connect navigation | "Go back to the home page and connect every navigation link and call-to-action button to the correct internal page." |
| Apply consistent branding | "The design uses a deep navy blue (#1A2744) as the primary colour. Apply this throughout all pages consistently." |
Things that don't transfer
Not everything in a Figma file translates directly. Be aware of:
| Element | What happens |
|---|---|
| Custom / licensed fonts | Replaced with a default font — update via AI chat after import |
| Prototype animations | Not imported — add interactions in bldrAgent after import |
| Variables and token systems | Variable values are not read — use explicit values in your design instead |
| Image filters and blend modes | May not be preserved exactly — adjust in bldrAgent after import |
| Complex gradient fills | Simplified to the dominant colour — refine using AI chat |
| Multiple overlapping fills | Only the last fill is read per element |
Troubleshooting
"Cannot access this Figma file" Make sure the link permission is set to Anyone with the link – Can view. If you've set a password on the share link, remove it before importing.
The imported design looks different from my Figma file Check that key components use Auto Layout and that nested elements are properly grouped. Then re-import from a cleaner, well-structured frame.
Custom fonts are showing the wrong typeface Only Google Fonts are supported. Update your typography after import using the AI chat: "Change the heading font to [Google Font name] throughout the app."
I want to re-import after updating my Figma file Create a new project and import again. Each import is a fresh project — bldrAgent does not sync with live Figma changes automatically.
Related
- Building your first app — the full new project walkthrough
- Uploading an existing website — import a static site instead of a Figma design
- Using the AI chat — how to work with the AI to refine your imported design
- App templates — start from a fully-built app if you don't have a Figma file