Smart export best practices
When importing your Figma designs into Builder, following these best practices helps ensure higher-quality code output and avoids common issues.
Use auto layout
Ensure your layers use auto layout before importing. This improves the overall quality of the generated code by giving Builder the structural information it needs to produce accurate, responsive output.
Remove export settings
Remove any export settings from your layers before importing. If export settings are present on a layer, Builder imports that layer as an image instead of generating actual elements and code.
Use annotations to describe behavior
Use Annotations in Figma Dev Mode to describe how layers should behave. This is especially useful for conveying animations, gestures, and interactions that aren't visible from the design alone.
This feature is only accessible for paid Figma users.
Remove backup layer color fills
If a layer uses a background image fill, remove any additional color fills on that layer. Having both a color fill and an image fill on the same layer triggers a Figma bug that produces invalid CSS.
Use properly cropped background images
Crop your background images to match the dimensions of the layer they'll be applied to. For example, if your layer is 1200 × 900, make sure the background image matches that aspect ratio. This improves the overall quality of the image import.
