Builder's Figma plugin offers two modes for importing your designs when using Classic Export: 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.
Easy Mode prioritizes speed over precision, so layout and design are approximate. You can:
- Import any design immediately without setup.
- Iterate rapidly to test ideas.
- Validate design direction early in your process.
To import your design with the Builder Figma plugin in Easy Mode:
- In Figma, open the Builder plugin.
- Select the design you want to import into Builder.
- On the Export tab, click the three dots (...) and select Easy.
- Click the Classic Export button.
- When the plugin finishes processing the design, click Copy to Builder.
- In the Builder Visual Editor, paste with
Cmd + vorCtrl + vdepending on your operating system.
Easy Mode is best used with very simple and straightforward designs. The video below demonstrates how to set Easy Mode within the Builder Figma plugin.
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 Classic Export button.
- In Builder, paste with
Cmd + vorCtrl + vdepending on your operating system.
Precise Mode can handle much more complex designs. The video below demonstrates how to set Precise Mode within the Builder Figma plugin.
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.