Using Figma variables for breakpoints

The hunt to find more use cases for local variables.

At this point in 2023, almost all UX UI designers who use Figma should know about one of Figma’s biggest features of this year, local variables.

Something I have continued to struggle with since its initial launch this past summer is how to actually apply them in my day to day work.

The demos presented at 2023’s Config as well as office hours with ‘Figmates’ throughout the later half of this year were more straightforward and uncomplicated. Reverting between light mode and dark mode? That’s easy. Adding a live count to a stepper component? Yes, I got it.

These demos made me THINK I had a grasp of how to use the variables, but once I opened Figma to apply them, I couldn’t think of many use cases for my needs and reverted back to the way I know best. AKA, I just continued using the standard Figma styles or manually inputting numbers into frame specs.

Screenshot from a Config 2023 demo of using variables in advanced prototyping in Figma to have an automatic count in a stepper component. — Advanced prototyping with less complexity with variables, Config 2023

Within my current job, I support building and maintaining my company’s Design System for SaaS products, so the application of variables for color modes was a giveaway from the initial Figma demos. My Design System does not include multiple brands, but if we did, the use of brand-theming would also be a great use case for variables to support.

After applying the new color variables to the Design System’s UI components and deprecating the original ‘Dark theme’ file that stored the dark theme versions of the UI components , I thought, “Well, what now?”.

Since those initial Figma demos and office hours only scratched the surface of how the variables could be applied, it’s been up to the Figma users to figure out how we can work it into our processes.

After exploring the new minimum and maximum constraints that can be placed on frames, it hit me that I could use a number variable for those values. Same with margins, paddings, and gutters.

Image of a white, blank frame in Figma showing that minimum and maximum width constraints have been added to the frame. — Min and max width constraints on a Figma frame

I had found a new use case for me and my Design System. Breakpoints!

Below are the steps I followed to create the number variables for the breakpoints, and apply them to foundational grids and appropriate UI components in the Design System.

Step 0: Have breakpoints established and aligned on with stakeholders.

How breakpoints are established is dependent on your Design System scenario:

If you work on a Design System, breakpoints are probably already defined (maybe…fingers crossed) and ready to be inserted into the variables collection.
If you adopt a privately-owned or company-owned Design System, I would reach out to your Design System liaison to work with them on getting a breakpoint variables collection added to the library you use.
If you adopt an open-sourced Design System, they should provide guidance on breakpoints within the documentation, and can be inserted into your file’s local variables. For example, here in a link to Google Material’s documentation on breakpoints.

Screenshot from Google Material’s design system documentation showing a data table with guidance on breakpoints. — Google Material’s documentation on breakpoints

Step 1: Create a new local variables collection to store breakpoint specs.

Open the file that stores the variables that will wire to your designs. This could be a Design System file, such as a ‘Foundation’ file, or it could be localized to a single file you’re using.

To open local variables, click the ‘Local variables’ icon button.’

Interface of Figma showing a section of the blank Figma canvas and a section of the right-most panel that houses properties such as the Local variables. — Where to find the variables; just in case you don’t know ;)

To create a new collection, click on the meatball menu on the top-left of the variables popup, then click ‘Create collection’ from the options.

Step 2: Name the collection modes to correlate with the breakpoint sizes.

To add a mode to the collection, click the ‘+’ icon button near the top-right of the variables popup. Note that the left-most mode is the ‘default’ mode.

For my Design System, we offer five sizes for web responsive grids, which include four sizes for fluid resizing and one size at a fixed size. The size modes are as follows:

Small: 768–1279px (Fluid)
Medium: 1280–1767px (Fluid)
Large: 1768–2159px (Fluid)
XLarge: 2160px+ (Fluid)
Fixed: 1328px+

The breakpoint sizes you include should adhere to your Design System or product guidelines.

Step 3: Add number variables & corresponding values.

To create a variable for the Breakpoint collection, click the ‘Create variable’ button at the bottom-left and select ‘Number’.

Add and name variables according to your needs, but as recommendation, I added the following variables for the collection:

Min-width
Max-width
Margins
Padding
Gutters

For each mode or breakpoint size-range, insert the corresponding value per variable.

Image showing the breakpoint variables collection with a data table housing the breakpoint size ranges and specs for minimum and maximum widths, margins, padding, and gutters. — The finished Breakpoint variables collection

Step 4: Add breakpoint variables to grids

This step is more Design System specific or if you want to add the variables to a frame size representing a certain viewport.

I. Add variables for the min and max widths of the frame.

Image showing a grid style for a Medium breakpoint in Figma — Defined grids for a Design System

Click on the frame housing the grid, go to the Design panel to find the input field for the frame width, and click ‘Add min width’.

Image from Figma showing how to apply a min and max constraint to a frame by selecting the width dropdown. — Add min and max widths to the frame

Click on the dropdown arrow on the right of the Min width input field and select ‘Apply variable’ at the bottom of the menu.

Image from Figma showing how to apply a variable to min and max constraint to a frame by the Apply variable button. — Apply a variable for the min and max widths of the frame

Find and click on the Min-width variable to apply it.

❗️Note: The default variable values, which are from the left-most mode within the collection, will appear within this initial list. As of now, you have to tell Figma you are using a variable in order to apply a mode associated with that variable. So in this case, I have to apply the Small breakpoint variable by default, then define the mode to be the Medium breakpoint.

Image from Figma showing how to apply a variable to a min and max constraint to a frame by selecting from the apply variable dropdown. — Select the appropriate variable to apply

Repeat the above process for the maximum width on the grid’s frame.

II. Add a variable for the margin of the frame.

Go to the auto layout section of the Design panel, and select the variable diamond icon on the right side of the input for the horizontal padding. Then, select the Margin variable.

Image from Figma showing how to apply the margin variable to the horizontal padding in the auto layout constraints. — Select the margin variable for the horizontal padding in auto layout

III. Define the mode of the frame.

Select the parent frame and go the ‘Layer’ section in the Design panel. Click on the variables stacked-diamond icon on the right of the section title.

Select the Breakpoint collection and pick which mode the frame should be in. In this case, the frame needed to adopt the Medium breakpoint.

Image from Figma showing how to select the mode the frame should be in by selecting the variables icon from the Layer section and clicking from the collection for Breakpoints. — Define the mode of the frame

❗️Note: Again, you cannot select the mode you want the frame to have BEFORE applying at least one variable to the frame. Figma will not recognize you want to use that variable collection unless it’s being called to the frame. It’s backwards and not intuitive, so hopefully Figma will fix this in a future update.

Gif showing that the min width, max width, and margins automatically update and correspond to the mode being defined by the variables. — Certain values are automatically updated when defining the mode of the frame

Step 5: Apply variables to appropriate UI components

This step is similar to Step 4, but is showing a different application of variables for breakpoints.

❗️Note: Breakpoint variables should only be applied to UI components that are full-bleed on the application, such as a system banner or the global header.

I. Add variables for the min and max widths of the component.

For greater guidance on how to complete this, see Step 4, section I above.

Image showing a system banner UI component in Figma that has a min and max width constraint using the breakpoint variables. — Set the min and max widths to the breakpoint variables

You can tell if a value is calling a variable by looking at the visual treatment given to variables. Variables are displayed using a tag-like bounding box.

II. Add variables for the margin, padding, and gap (gutter) of the component.

For greater guidance on how to complete this, see Step 4, section II above.

Image showing a system banner UI component in Figma that includes margins, padding, and gap values using the breakpoint variables. — Select the appropriate variables per padding and gaps within the auto layout

III. Test the UI component in a grid or a viewport example.

Make sure the UI component’s mode is set to ‘Auto’, then insert the component to the grid or frame to be tested in.

❗️Note: If a mode is defined within child layers of a parent frame, defining the mode at the parent level will not override the mode defined at the child level. So only define the mode at the top-layer and leave the remaining layers on auto.

Image showing a system banner UI component in Figma that has the mode set to Auto and not being defined. — Ensure the child layer modes are left on ‘Auto’

Swap between modes at the parent frame layer to trial the breakpoints automatically adjusting to the mode being called.

Gif showing a system banner inside a grid while adjusting the mode to automatically adjust the width constraints, margins, and padding. — Define the mode for all layers in the frame in one click

❗️Note: A quick way to see if a child layers has a mode defined is if there a variable tag on the right of the layer in the layers panel. This should be avoided to ensure there are no conflicts between the parent and child layers.

Image showing how Figma has a tag representing a variable in the Layers panel to easily tell what has a variable applied. — Figma shows a tag to represent a variable in the Layers panel

Conclusion

As I’m trying to hunt for more applications of using variables, they are proving to be extremely powerful and help reduce the need to create so many screens that must be mocked up for dev hand-offs or general designer critique sessions.

I hope this helped you discover a new use case for applying variables into your design process.

Happy variable creating!

For some more…

If you have yet to begin using color variables, especially in a Design System setting, and need help getting started, please check out the below article going step-by-step in how to migrate your colors to use variables.

Article link: Migrating from color styles to local variables in Figma.

Using Figma variables for breakpoints was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.