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

    Choose pages to build

    Group by breakpoint turns several designs into one responsive page. Each design is a page keeps them separate.
  2. 2

    Test and improve your build

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

    Add your custom fonts

    Only appears when custom fonts were detected. Accepts woff, woff2, ttf, and otf up to 5MB.
Choose Group by breakpoint when you sent one page at several widths. Choose Each design is a page when you sent a home page, an about page, and a contact page.

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.