Using Figma variables for breakpoints | by Allie Paschal | Dec, 2023


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.

The local variables popup in Figma with an action menu showing the option to create a new collection in the variables.
Create a new collection in the local variables popup

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.

Image showing the variables popup and how the button to add a mode to the variables collection is at the top-right of the popup.
Add breakpoint size ranges as the collection’s modes

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’.

Image showing the variables popup in Figma and how you can add a variable to the collection with clicking the Create variable button and selecting a variable type from the menu options.
Add a number variable per breakpoint spec

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


Source link

2023. All Rights Reserved.