Importing Figma Designs
⚠️ Warning! This import is not magic. For best results, you will need to prepare your design file beforehand, and do some cleanup afterward. Read on to learn how:
Builder supports automatic importing of designs created in Figma using Figma's auto layout feature. This video provides an overview of all the steps needed to use your Figma designs in Builder.
Installing Builder’s Figma to HTML plugin in your Figma account
Install the Figma to HTML plugin into your Figma account from the Builder Figma page.
Preparing your design
Start by making a copy of your design. You'll be making changes to the file (rasterizing and detaching instances), and you may find it helpful to maintain your original design.
To make the copy, in the top navigation menu click the dropdown next to your file name and select Duplicate.
All layers to be imported must be using Figma's auto layout feature. To convert any layer to use auto layout, choose the layer and hit the
+ next to auto layout.
Note that some layers don't lend themselves to auto layout for a variety of reasons, including their complexity. Complex layer designs or vectors should be converted to images using Rasterize selection. Remember to rasterize any vectors, grouping any small components if possible.
👉 Tip: Flattening layers is often not enough to prep the graphic for import because they may include vectors or groups that don’t import well. You may still need to rasterize afterwards.
👉 Tip: Avoid using unnecessary frames/groups around graphics.
To use Rasterize selection:
- Select the area of your design you want to rasterize
- Click the file menu
- Select Quick action
In the Quick action search bar, which you can also open using
CMD + /, search for "rasterize" and choose Rasterize selection.
The following video shows the rasterizing process.
👉 Tip: An alternative is to use Figma's rasterize selection command on your vector. If the output of that is too low-resolution, try the Flatten Selection to Bitmap plugin.
Auto layout required
All layers you want to import must be using auto layout or be rasterized images. This includes all layers inside of the one you want to import, so be sure that everything you intend to pull in are properly prepared.
Check that all child frames use auto layout and add frames if necessary. More information is found in Create dynamic designs with auto layout.
Auto layout organizes the frame contents into either a row or column layout. Auto-layout frames in Figma are analogous to applying a Child Layout of Stack or Row in the Builder Visual Editor
If the parent frame you are trying to import does not already use auto layout then you may have to add additional frames inside to group content into rows and columns.
Exporting your design for Builder
To import a design into Builder, first verify in Figma that all parts of your design are using auto layout.
Be sure you have:
- Grouped all the elements into groupings you want to keep together, such as the elements in each column.
- Added auto layout to every single element individually and to every grouping individually, recursively, including the entire grouping you want to export. Any errors you encounter will likely be because you've forgotten to add auto layout to one or more elements somewhere.
Then open the plugin in Figma using the keyboard shortcut
CMD + /. This opens the Figma search. Search for "HTML" and select the Figma to HTML, CSS, React plugin.
Choose Download Figma as JSON. Note the location where the file is saved.
👉Tip: instead of downloading as JSON you can instead choose GENERATE CODE. This will launch a Builder fiddle with your content, which you can copy and paste into another Builder document, or save as a template.
Importing your design into Builder
- In Builder in the Import tab click Figma.
- Choose upload JSON and select the JSON file you just downloaded.
- Place the Figma icon containing your new layout onto your Builder page.
- Adjust your layout in Builder as needed.
👉 Tip: There is a limit on how much content you can import at once. If you are having trouble importing an entire page, try importing smaller portions of the page. For example, you can individually import sections, buttons, or even a line of text if necessary.
👉Tip: if you get a message saying your design can't be imported, check again that your design is using auto layout.
👉Tip: If you rasterized any images or sections, you may want to add the original to Builder for full flexibility. The same is true for your original Figma. You may want to continue designing using the non-rasterized version of any content.
Making final adjustments
It's possible that not every detail of your design will be perfectly imported, but this process using the plugin will give you a big head start.
Once imported into Builder, make any final adjustments needed in Builder itself. For example, adjust sizes, paddings, widths, and styles.
If you need help after trying the techniques discussed here, contact us.