While exporting a Figma file to Builder.io using the plugin, the layout alignment gets disarranged.
Question: Is there a better way to export so that alignment stays correct? Any recommended settings or alternative export methods?
Hi @Ami , Thanks for sharing the details about your export. I understand you’ve already checked constraints and padding, so let’s focus on changes that typically give the fastest improvements in Builder’s Figma plugin.
Switch to Precise Export Mode - In the Builder Figma plugin, change Export Mode from Easy Mode and Precise Mode. It better interprets Auto-Layout and nested frames, especially with responsive designs.
Mode comparison
Export in smaller chunks - For complex pages, select and export sections or frames individually rather than the entire design at once. This isolates problem areas.
Use Auto-Layout on all top-level containers — this ensures Builder reads spacing consistently.
Apply padding & spacing via Auto-Layout gaps, not manual pixel offsets.
Check horizontal/vertical resizing so elements scale as intended.
Remove or flatten hidden/overlapping elements that might confuse the importer.
Pre Export List -
Before running the plugin, make sure to check:
Text should be fully inside its parent frame.
Constraints should match the intended alignment (center, left, etc.).
Naming for similar elements should be consistent — this helps Builder group styles correctly.
If the issue persists, please send:
A screenshot of the same section in Figma vs. Builder.io
Which frames/components are misaligned
Whether the misalignment happens across all layouts or specific ones