How to create a Responsive Grid in Figma

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

A step by step guide on designing responsive grids that change the number of grid items that are displayed as the width of a frame changes.

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 the Grid Item Component

A screenshot of Figma showing that we have created two copies of the component. Each has different sizes and the aspect ratio has been maintained. We have highlighted that in order for the component to do this you must either drag the lateral handles or resize the component and set the vertical resizing to hug.

Create a component, and any necessary variants, for the item that will used in the grid.

If you are looking to use images or videos that maintain an aspect ratio, consult the tutorial below.

We also recommend that you consult our responsive typography tutorial to learn how we adapted the components to use text that changes as the screen scales.

Step Two: Create the Grid Component

A screenshot of Figma showing how we have created a Grid component with three variants called Mobile, Tablet and Desktop. Mobile is a grid with 1 grid item per row; Tablet has 2 grid items per row and Desktop has 3 grid items per row.<br />

Create a component, and any necessary variants, for the grid.

In the case of delasign.com, we created a grid for mobile, tablet and landscape that varies the amount of grid items that are available in each row (i.e. mobile, 1 item per row; tablet, 2 items per row; desktop 3 items per row).

Step Three: Create the Responsive Layouts

A screenshot of Figma that shows how we have created 3 versions of the work page: mobile, tablet and desktop. Each version has a navigation bar and a layout. The screenshot also shows the variable window open and highlights how the Boolean variables isMobile, isTablet and isDesktop vary across breakpoints. Finally, the screenshot highlights how the boolean variables are used to hide and show layouts and navigation bars depending on the breakpoint that is active.

Follow the tutorial below to learn how to create responsive layouts.

In each layout, make sure that the grid's horizontal resizing is set to Fill and the vertical resizing is set to Hug.

Step Four: Apply the Content

A screenshot of Figma that shows that we have applied string variables and images to all the grid items within the mobile grid. We have highlighted that if you press the square under fill you open up a window that allows you to change the image by clicking "Choose Image."

Apply all relevant copy and assets to your grid.

We recommend using variables for all text values to allow you to localize designs in the future.

Step Five: Preview

A screenshot of Figma showing 4 sections that are each set to a breakpoint within our design system. Each section contains a work component that has demonstrates the visual for the work page for that breakpoint.

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)

Why does my grid not resize correctly?

A screenshot of Figma showing how the grid doesn't resize correctly because the grid item has a minimum width that is too big.

Make sure that:

Each grid item does not have a minimum width that is breaking the design. We suggest removing it unless you need it.

The grid that is used within each layout has a horizontal resizing set to fill.

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 a Responsive Grid in Figma

A step by step guide on designing responsive grids that change the number of grid items that are displayed as the width of a frame changes.

Step One: Create the Grid Item Component

Step Two: Create the Grid Component

Step Three: Create the Responsive Layouts

Step Four: Apply the Content

Step Five: Preview

Frequently Asked Questions (FAQ)

Why does my grid not resize correctly?

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