When importing your Figma designs into Builder, following these best practices helps ensure higher-quality code output and avoids common issues.
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 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 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.
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.
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.