Skip to documentation
upbuilder.

Build

Project setup

The wizard between sending a design and starting the build.

The setup steps

Confirm your pages, set match quality, and upload fonts if you are asked.

Steps only appear when they apply, then press Confirm and start build.

  1. 1

    Review

    See your Figma layers next to the structure UpBuilder will build. Nothing here blocks the build.
  2. 2

    Choose pages to build

    Matching designs are paired into one responsive page. Split any that were paired wrongly.
  3. 3

    Test and improve your build

    Set how closely the finished build should match your Figma designs.
  4. 4

    Add your custom fonts

    Only appears when custom fonts were detected. Accepts woff, woff2, ttf, and otf up to 5MB.
Designs whose names match, such as Home and Home mobile, are paired into one responsive page. Anything else becomes its own page. Use Split on a design to separate a pair that was matched wrongly.

Review

The first step shows your Figma layers on the left and the structure UpBuilder will build on the right.

Read it as a before and after. Where the two sides differ, a label says what changed.

Nothing on this step blocks the build. You can continue and fix things in Figma later.

What the labels mean
Renamed
The layer name did not describe the content, so a clearer one was inferred.
Grouped
Loose layers were wrapped into one section.
Ungrouped
An unnecessary wrapper was removed.
Moved
The layer was placed somewhere else in the structure.
Added
Structure was created that has no matching Figma layer.
Not built
The layer will not appear in the result.

Check the not built rows first

Those are layers that will be missing from the finished page. Everything else is a difference in naming or grouping, which is cosmetic by comparison.
Only changes
On by default, so you see the differences rather than every layer.
Per design
Switch designs with the selector to review each one.
Fixing
Changes are made in Figma, then send the designs again.

Figma match quality

How much effort goes into matching the build to your design. Higher levels take longer.

Levels
None
Skips visual checking entirely. Fastest.
Medium
Standard match.
High
More comparison and repair passes.
Best
The most passes. Slowest.
How the comparison works
Capture
UpBuilder screenshots the built page at each breakpoint.
Compare
It measures the screenshot against your Figma reference pixel by pixel.
Repair
Where it finds a difference it edits the source and measures again.
Protect
If a change makes the score worse it is undone automatically.
Comparison images are posted into the chat as the build runs, your Figma design on the left and the build on the right.