Builder's Figma plugin offers two modes for importing your designs: Easy Mode and Precise Mode.
Each mode serves different purposes and has different requirements. This guide compares the two modes so you can choose the right one for your needs.
When deciding which mode to use, use these guidelines:
- Easy Mode: use when you just want to try it out and accuracy in the end result isn't a high priority.
- Precise Mode: use when the details are important and you've applied Auto layout to the whole design.
The table below lists the most common use cases to help you decide:
| Use case | Easy Mode | Precise Mode |
|---|---|---|
You're trying it out | ✅ | |
You're doing a quick test | ✅ | |
Design isn't fully using Auto layout | ✅ | |
Import doesn't have to be perfect | ✅ | |
It's OK for images to be placeholders | ✅ | |
You want it pixel-perfect | ✅ | |
Auto layout is applied throughout the design | ✅ | |
Design is production-ready | ✅ | |
You want to map components | ✅ | |
You plan to sync your code | ✅ | |
You're in the attention-to-detail phase | ✅ |
To import your design with the Builder Figma plugin in Easy Mode:
- In Figma, open the Builder plugin.
- On the Export tab, click the Easy button.
- Click the Export to Code button.
- The design opens in Builder.
The video below shows importing with Easy Mode.
Easy Mode prioritizes speed over precision, so layout and design are approximate. This means you can:
- Import any design immediately without setup.
- Iterate rapidly to test ideas.
- Validate design direction early in your process.
Remember that in Easy Mode images are placeholders.
Precise Mode delivers pixel-perfect imports and is intended for production-ready designs. This mode is essential when you need exact replication of your Figma designs in code.
The single most important requirement for Precise Mode is to use Auto Layout throughout your entire design.
Without this setup, results may be unpredictable. For detailed information on applying Auto layout, read Auto layout for importing from Figma.
To import your design with the Builder Figma plugin in Precise Mode:
- Make sure you've applied Auto layout to your entire Figma design.
- In Figma, open the Builder plugin.
- On the Export tab, click the Precise button.
- Click the Export to Code button.
- The design opens in Builder.
The video below shows importing with Precise Mode.
While Auto Layout is the primary requirement, also consider:
- Mapping your components to corresponding code components to help the plugin with consistent interpretation and accurate code output
- Explicitly defining images to help the AI correctly identify and handle image elements
Certain parts of this workflow use AI, for more information, visit How Builder Uses AI.
