Made in Builder.io

Join us for the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Though Builder's Figma Plugin is designed so you don't have to prepare most design files, every design is unique, and some could use a little extra attention.

If your design could benefit from a little help when importing, try some of the techniques in this document.

Tip: Builder's Figma Plugin is currently in beta, meaning it's in active development and improvement. Your experience and feedback are integral to our iterative process — share your feedback.

Group layers that constitute background elements together. Creating a dedicated group for background elements simplifies the structure and enhances the output when exporting as an image.

The image below shows an example of multiple background layers that can be grouped.

Image of a group of background images all selected in Figma. An annotation says, "Group background layers.".

When overlapping elements, align boxes only with related components. If layers don't need to overlap, position their selection boxes so that they don't overlap or touch.

Additionally, minimize intersections between elements, as intersections can lead to undesirable results. If challenges persist regarding overlapping or intersecting elements, consider grouping them together, similar to a background.

The next image shows two text boxes that are overlapping when they could instead be closer to their contents without changing the layout.

Image of a two layers overlapping in Figma. An annotation says, "Avoid unnecessary overlap".

For complex designs featuring numerous visual elements, it's important to help the AI model recognize them as a single image. Use the export feature to define an export for an element explicitly. This guides the AI in identifying it as an image with certainty.

Select the element and expand the Export section by clicking the plus button next to Export as in the following video.

Use Auto layout to organize elements and create frames. Auto layout aids in encouraging the correct behavior of the AI model, particularly in complex designs. It provides grouping as frames, offering additional insights that assist the AI model in handling complex constraints effectively.

The image below shows where to find Figma Auto layout.

Image of flowchart in Figma. An annotation says, "Define images so AI knows they aren't layouts".

Transparency effects, such as translucency or opacity, can pose challenges in the interpretation of the design. It's advisable to avoid using translucent effects, as they may not be well-supported and can result in unexpected outcomes.

The image below shows a layer with 100% opacity and a layer with transparency applied in a gradient. Transparency in any form can be tricky for AI to understand, so, if possible, we recommend sticking to fully opaque colors.

Image of two versions of a layer in Figma. The recommended one has an opacity set to 100%. The not recommended one has an opacity of anything less than 100%. 

An annotation says, "Keep colors fully opaque".

Keep text bounding boxes snug to the text within them, rather than much larger than the text. Excessive space in the bounding box can lead to issues in the output, including extra whitespace and line breaks within text layers.

The image below shows two text boxes; one has the boundaries snugly fit to the content, which is the preferred technique. The other, image shows a text box that is way too big, which can be challenging for AI.

Image of two text boxes in Figma. One has the bounding box close to the text and the other has extra space in the box. The first, is labeled "just right" with a checkmark and the second is labeled "too much space" with an x-mark. An annotation says, "Keep text bounding boxes tight around text".

Design elements to closely match real-world dimensions for accurate and practical results. Use a scale that aligns with the intended output size.

Extreme scaling may necessitate adjustments that impact the overall design. If your design has a large scale, consider addressing it within the Figma plugin or communicating with developers for optimal results.

The next image shows a page design (left) that is designed close to the final size of the finished product as well as a page that is much larger than the final product will end up. Be sure to provide the plugin with the size you'd like your design to be when it's finished.

Image of two text designs in Figma. One has a frame size that is similar to what would display in the browser (width: 1800). The other has a huge frame size (width: 7000+). An annotation says, "Design close to the size of the final product".

Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

Newsletter

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy