Responsive Design Figma Guide (2023)

A guide that provides naming conventions and references to content that will aid you in the understanding and creation of responsive designs in Figma.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 08/16/2023 at 16:37
Last Updated on 08/17/2023 at 11:13
<p>A flower that represents Figma with the text "Responsive Design Guide" beneath it.</p>

A guide that provides naming conventions and references to content that will aid you in the understanding and creation of responsive designs in Figma.

Subscribe

The following guide provides links to documentation that enables you to understand and learn how to create responsive designs in Figma.

Terminology

What is Responsive Design ?

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

Responsive design refers to the creation of digital interfaces, such as mobile apps and websites, that adapt their layout as the interface changes breakpoint or orientation with the purpose of ensuring usability.

What is Responsive Design?

What are Layouts?

<p>An image showing how a layout adapts depending on screen size.</p>

A layout is an arrangement of visual elements, such as text, images, shapes or buttons, on printed media, a website page or an app screen.

What is a Layout ?

What is Auto Layout ?

<p>An example of a layout that creates UI elements by dictating how far away they are from the edges of the screen.</p>

Auto layout is a design technology that uses a constrained-based approach to dynamically adapt UI elements as the size and position of a view, screen or frame changes.

What is Auto Layout?

What are Breakpoints?

<p>An image showing how different devices are spread across a series of breakpoints.</p>

A range of points that determine when a website or app should change layout.

What is a Breakpoint?

What is a Design System ?

<p>A screenshot of Apple's Human Interface Guidelines website, August 17th 2023.</p>

A design system is a collection of reusable components and elements, such as materials, typography, logos or colors, that serve as the backbone behind the creation and promotion of a physical or digital product.

What is a Design System?

The most well-known digital design system methodology is known as Atomic Design.

What is Atomic Design?

What are Variables ?

"Variables in Figma design store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows."

Figma Variables Guide (2023)

Learn how to create Responsive Designs in Figma

Learn the Basics

Follow our tutorials below to learn the basics behind creating responsive designs.

How to create a Responsive Screen that adapts its Navigation BarHow to create a Design that uses Margin Auto after a Max WidthHow to create Screens that use Responsive Layouts in FigmaHow to create Designs that use Responsive Typography in FigmaHow to create a Responsive Grid in Figma

Looking to learn more about things you can do with Figma ?

Search our blog to find educational content on learning how to use Figma.

Search our BlogCheck out our Figma Resources Article

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