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.
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.’
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.
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.
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’.
Click on the dropdown arrow on the right of the Min width input field and select ‘Apply variable’ at the bottom of the menu.
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.
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.
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.
❗️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.
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.
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.
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.
Swap between modes at the parent frame layer to trial the breakpoints automatically adjusting to the mode being called.
❗️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.
