Prepare your Figma file
Structure and naming
How to organize layers so UpBuilder reads your intent instead of guessing.
Compare
Name things by purpose and use Auto Layout for real rows and columns.
That one habit decides most of what comes out editable.
- Home
- Navbar
- Logo
- Nav links
- Button
- Hero
- Heading
- Product image
- Feature grid
- Feature card 01
- Feature card 02
- Footer
- Home
- Frame 492
- Group 31
- Rectangle 88
- Frame 495
- Group 42
- Group 43
- Frame 501
- Group 44
- Rectangle 91
- Rectangle 92
- Frame 507
Naming
- Sections
- Name by purpose. Hero, Feature grid, Footer.
- Repeated items
- Same name plus a number. Feature card 01, 02, 03.
- Controls
- Name by role. Submit button, not Rectangle 12.
- Artwork
- Name it for what it depicts, so it reads as a graphic.
Layout
None of this is required
UpBuilder builds files that have no Auto Layout at all. These choices are not a checklist you have to pass, they just give it better evidence to work from, so more of the result comes out editable.
- Rows, columns
- Auto Layout.
- Spacing
- Parent padding and gaps. Never spacer layers.
- Resizing
- Fill and Hug where they describe real behaviour.
- Overlays
- Absolute position.
- Grids
- Only when items line up in both rows and columns.
Do this
- 1Name your sections
- 2Auto Layout your rows and columns
- 3Delete spacer layers