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
Select every frame in the plugin
Desktop and mobile versions of the same page.
2
Send them together
They arrive as separate designs.
3
Choose Group by breakpoint
In project setup, on the Choose pages step.
4
Assign a viewport to each
They become one responsive page.

Choosing Each design is a page instead makes every frame its own page. Use that when you sent a home page, an about page, and a contact page rather than one page at three widths.

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