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