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.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 08/16/2023 at 12:33
Last Updated on 08/17/2023 at 10:26
<p>A flower that represents Figma with the text "Responsive Layout" beneath it.</p>

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

SubscribeCheck out our Responsive Design Figma Guide

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

Check out our Figma Variables GuideWhat is a Design System?

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

<p>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.</p>

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

How to create a Responsive Screen with a Variable Driven Design System

Step Two: Create the Responsive layouts

<p>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.</p>

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.

How to create designs that use Responsive Typography in Figma

Step Three: Set the Variable Visibility

<p>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.</p>

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

How to create a Layout Manager in FigmaHow to create a Boolean Variable in FigmaHow to use a Boolean Variable in Figma

Step Four: Preview

<p>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.</p>

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.

How to create a Section in FigmaHow to set the Variable Modes of a a Section in Figma

Frequently Asked Questions (FAQ)

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

<p>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.</p>

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

How to create a Design that uses Margin Auto after a Max Width

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.

Check out our Responsive Design Figma GuideSearch our Blog

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.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe