Can I use variables to create responsive styles in Figma ?

How to create Designs that use Responsive Typography in Figma

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

A step by step guide on creating designs with multiple layouts that change layout and the styling that is applied to text 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 Typographic Styles

A screenshot that shows how the styles for delasign.com change as the breakpoint changes.

Create typographic styles to match the look and feel for each breakpoint of your design system.

Step Two: Create the Screen driven by 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.

Follow the tutorial below to learn how to create responsive screens that use multiple layouts.

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

Step Three: Test

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)