Skip to documentation
upbuilder.

Prepare your Figma file

Responsive references

When to design extra frames, and how they become one responsive page.

When to add a reference

One desktop design is enough. UpBuilder infers the responsive behaviour.

Add a mobile frame when the layout actually changes, not just to be thorough.

Worth it
Navigation collapses, columns change count, or content reorders
Worth it
Something is hidden, cropped differently, or changes aspect ratio
Worth it
Type scale or spacing shifts noticeably
Skip it
The layout just gets narrower

Grouping happens in the app

You do not group frames in the plugin. Send them all, then group them during setup.

  1. 1

    Select every frame in the plugin

    Desktop and mobile versions of the same page.
  2. 2

    Send them together

    They arrive as separate designs.
  3. 3

    Assign a viewport to each

    They become one responsive page.
Designs that do not pair with anything become their own page. If two were paired wrongly, use Split on the design to move it onto a page of its own.

Sizes by destination

Design near these widths and your frames map cleanly.

Breakpoints produced
Webflow
Desktop 992px and above, Tablet up to 991px, Landscape up to 767px, Mobile up to 479px
Elementor
Desktop above 1024px, Tablet up to 1024px, Mobile up to 767px
React
Desktop 1440px reference, Tablet 768px reference, Mobile 390px reference
HTML and CSS
Desktop 1440px reference, Tablet 768px reference, Mobile 390px reference
Astro
Desktop 1440px reference, Tablet 768px reference, Mobile 390px reference