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: best for most users.
- Precise Mode: use when the details are important and you've applied Auto layout to the whole design.
To import your design with the Builder Figma plugin in Easy Mode:
- In Figma, open the Builder plugin.
- On the Export tab, click the three dots (...) and then 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.
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.
- Explicitly define all images.
- In Figma, open the Builder plugin.
- On the Export tab, click the three dots (...) and then 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.
