How to create Screens that use Responsive Layouts in Figma

A flower that represents Figma with the text "Responsive Layout" beneath it.

A step by step guide on designing responsive screens that change layout as the width of a frame changes in Figma.

Please note that design systems such as the one laid out in this article are only available on education, professional or organization Figma accounts.

Step One: Create a Responsive Screen with a Variable Driven Design System

A screenshot of Figma that highlights how you can stretch the work page component between the minimum and maximum width of the breakpoint by dragging the edges around the component.

Follow the tutorial below to create a design system and a responsive screen.

Step Two: Create the Responsive layouts

A screenshot of Figma highlighting that a frame that has two identical layouts with varying typographic styling. The layouts are applying text variables to ensure consistency across the text.

Create as many layouts as required to fulfill the visuals of your digital product.

Apply the relevant typographic style to each layout (i.e. mobile styles -> mobile layouts, desktop styles -> Desktop layouts).

In the case of above, we have two layouts:

Mobile Layout: A Navigation Bar and a Mobile Main.
Desktop Layout: A Navigation Bar and a Desktop Main.

Please note that the term "main" refers to the html landmark which is suggested by W3C.

Step Three: Set the Variable Visibility

A screenshot of Figma showing how we have selected a layout that is currently hidden. We have also highlighted the isMobile boolean variable in the variables window. The variable is set to hidden on breakpoints 2 and 3 and the design file is currently set to breakpoint 2 - demonstrating that we have correctly set the visibility for the mobile layout.

Set the visibility of each layout to match a boolean variable from the layout manager (i.e. isMobile, isTablet, isDesktop).

Step Four: Preview

A screenshot of Figma that shows 4 sections for each of the 4 breakpoints of our design system. Each section is configured to the variables of a different breakpoint and Figma shows how the layout changes and the type adapts across the breakpoints.

Create sections for each breakpoint of your design and add the component to each section.

Set the breakpoint of each section to the relevant breakpoint you'd like to preview.

Frequently Asked Questions (FAQ)

How can I apply white space on the sides (i.e. margin auto) after a certain width ?

A screenshot of Figma that shows 4 sections for the four breakpoint in our design system. Each section shows a different design that matches the intended layout. At the bottom, in the largest version of the design we see that after a certain point the screen applies white space around the edges, fulfilling the intention of this tutorial.

To learn how to use margin-auto, follow the tutorial below.

Looking to learn more about Figma and Responsive Design ?

We recommend you check out our Responsive Design Figma Guide or search our blog to find educational content on learning how to use Figma.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

How to create Screens that use Responsive Layouts in Figma

A step by step guide on designing responsive screens that change layout as the width of a frame changes in Figma.

Step One: Create a Responsive Screen with a Variable Driven Design System

Step Two: Create the Responsive layouts

Step Three: Set the Variable Visibility

Step Four: Preview

Frequently Asked Questions (FAQ)

How can I apply white space on the sides (i.e. margin auto) after a certain width ?

Looking to learn more about Figma and Responsive Design ?

Any Questions?

Book a Free Consultation.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details