Prepare your Figma file
Design checklist
Run through this with your Figma file open before you send.
The checklist
All of this is optional. UpBuilder builds what it sees either way. These choices decide how much comes out editable.
Structure
- One frame per real page section
- Auto Layout for real rows and columns
- Padding and gaps instead of spacer layers
- Nesting under 15 levels deep
Naming
- Sections named by purpose, not Frame 492
- Repeated items named consistently
- Controls named by role
Content
- Real text layers, not outlined text
- Icons as vectors, not icon font glyphs
- Tabs and accordions show an open state
Limits
- Nothing important hidden or at 0% opacity
- A mobile frame where the layout changes
- Frames under 20,000px, 15 designs or fewer
What gets read
Everything visible inside the frame you select, down to the individual property.
- Layout
- Auto Layout, padding, gaps, alignment, wrapping, Fill and Hug, absolute position
- Text
- Content, font, size, line height, letter spacing, colour, and styled runs
- Colour
- Fills, gradients, borders, and corner radius
- Effects
- Drop and inner shadows, blur, and opacity
- Tokens
- Figma variables, local styles, and Tokens Studio data
- Constraints
- Layout constraints are inferred from the design instead
- Prototyping
- Interactions and reactions
- Components
- Component and variant properties
- Other
- Masks as a property, export settings, and layout grids