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.
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.
Publish
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.
- For Publish, click the Export to Code 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.
Fusion
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 select Easy.
- For Fusion, click the Quick Copy button.
- In Builder Projects, paste with
Cmd + vorCtrl + vdepending on your operating system.
The video below shows opening the Builder Figma plugin in Figma and where to find the Easy button. The next step depends on if you're using Publish or Fusion. For Publish, use the Export Design button. For Fusion, use the Quick Copy button.
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.
- In Builder, paste with
Cmd + vorCtrl + vdepending on your operating system.
The video below shows opening the Builder Figma plugin in Builder and switching to 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.