Register Now: Use Visual Dev + AI to Ship 10x Faster on July 24

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

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.

Converting your design to use auto layout is the #1 best way you can ensure it imports well. To make this conversion easy, try Figma's new suggest auto layout feature.

Use auto layout to organize elements into responsive hierarchies. Auto layout aids in encouraging the correct behavior of the AI model, particularly in complex designs.

The easiest way to convert a design to use auto layout is Figma's new suggest auto layout featurel

When in doubt, converting your design to use auto layout is the single most impactful thing you can generally do to ensure a smooth import.

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".

When using the Builder Figma plugin, leverage the component mapping feature in the Figma plugin to establish a direct link between your Figma design components and their corresponding code components. By meticulously mapping your Figma components to the codebase, you optimize the development process, reduce discrepancies, and maintain design integrity.

By default, the plugin attempts to figure out which Figma designs correspond to which code components, but checking the mappings and making edits as needed help make the import more accurate.

The image below shows where in the Builder Figma plugin to map components. On the left are the Figma components and on the right, the detected code components. Note that you must be running Devtools to map components.

For more detail, visit Mapping Figma Components with Visual Copilot.

The Builder Figma plugin with the Design System tab open and the area where you map components.

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.

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".

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".
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

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Visual Copilot

Visual Headless CMS

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Ebook

SaaS Marketing Site Ebook

Composable Commerce Ebook

Headless CMS Guide

Headless Commerce Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get StartedLog In
© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences