Figma Variables and Responsive Design
Variables are Figma's most powerful token system. They store values — colors, numbers, strings, and booleans — that you bind to design properties. Modes let one variable hold different values for different contexts, such as light mode vs. dark mode or mobile vs. desktop. Responsive design means your layouts adapt gracefully to different screen sizes using constraints, grids, and Auto Layout.
What Are Figma Variables?
A variable is a named container for a value. Instead of setting a button background to #3A86FF directly, you set it to a variable called color/brand/primary. The variable holds the actual color. Change the variable, and every element using it updates instantly.
Variable vs. Direct Value Diagram
WITHOUT VARIABLES WITH VARIABLES
Button fill: #3A86FF Button fill: color/brand/primary
Icon fill: #3A86FF Icon fill: color/brand/primary
Link color: #3A86FF Link color: color/brand/primary
|
Change brand color? | Change variable value once
Edit every element manually v
(100+ elements) All 100+ elements update automatically
Variable Types
Figma supports four types of variables:
| Type | Stores | Used For |
|---|---|---|
| Color | A color value (hex, rgba) | Fills, strokes, text color |
| Number | A numeric value | Spacing, font size, corner radius, opacity |
| String | A text value | Layer content, component text labels |
| Boolean | True or False | Show/hide layers, toggle component properties |
Creating a Variable Collection
- Open the Variables panel: click the Figma menu → Variables, or click the grid icon in the right panel when nothing is selected.
- Click Create new collection.
- Name the collection (e.g., Colors or Spacing).
- Click + Variable to add a new variable.
- Give it a name (e.g.,
brand/primary) and set its value (#3A86FF).
Modes — Light and Dark Theme Example
Modes are the defining feature of Figma Variables. One variable can have a different value in each mode. This makes theming — like light and dark mode — a one-click switch.
Setting Up Light and Dark Modes
- Create a variable collection called Colors.
- Click + Mode to add a second mode. Name them Light and Dark.
- Add variables and set a value for each mode.
Mode Value Table — Color Variables
VARIABLE NAME LIGHT MODE DARK MODE bg/surface #FFFFFF #1A1A2E bg/surface-raised #F9FAFB #252545 text/primary #111827 #F9FAFB text/secondary #6B7280 #9CA3AF brand/primary #3A86FF #5B9BFF border/default #E5E7EB #374151
Switching Modes on a Frame
- Select a frame.
- In the right Design Panel, look for the Variables section.
- Click the collection name next to the frame and switch from Light to Dark.
Every element inside that frame switches to dark mode values simultaneously. No manual recoloring needed.
Light vs. Dark Mode Comparison Diagram
LIGHT MODE FRAME DARK MODE FRAME +------------------+ +------------------+ | [White bg] | | [Dark bg #1A1A2E]| | [Dark text] | | [Light text] | | [Blue button] | | [Lighter blue] | | [Light border] | | [Dark border] | +------------------+ +------------------+ Variable: bg/surface Same variable, Value: #FFFFFF Value: #1A1A2E
Number Variables for Spacing
Number variables store spacing and sizing values. Bind them to padding, gap, corner radius, font size, and width/height in your components.
Spacing Variable Collection
COLLECTION: Spacing VARIABLE VALUE USAGE spacing/1 4px Micro gaps (icon to label) spacing/2 8px Tight padding spacing/3 12px Small padding spacing/4 16px Default card padding spacing/6 24px Section gap spacing/8 32px Large section gap spacing/12 48px Page-level spacing
Bind a spacing variable to a component's padding: select the component, click the padding field, and press the variable icon (looks like a box with a dot). Choose the variable from the list.
What Is Responsive Design?
Responsive design means your layouts look correct and function properly on all screen sizes — a 375px mobile screen, a 768px tablet, and a 1440px desktop monitor. In Figma, you achieve responsiveness through three tools: Constraints, Layout Grids, and Auto Layout.
Constraints
Constraints define how an element repositions or resizes when its parent frame changes size. Every element inside a frame has horizontal and vertical constraint settings.
Constraint Options
HORIZONTAL OPTIONS VERTICAL OPTIONS Left → sticks to left edge Top → sticks to top Right → sticks to right edge Bottom → sticks to bottom Left & Right → stretches width Top & Bottom → stretches height Center → stays centered Center → stays centered Scale → scales proportionally Scale → scales proportionally
Constraint Example — Top Navigation Bar
Navigation bar inside a 390px frame: H-Constraint: Left & Right (stretches to fill width) V-Constraint: Top (stays pinned to the top edge) Resize frame to 768px: Nav bar stretches to 768px width automatically ✓ Nav bar stays at the top of the frame ✓
Designing for Multiple Breakpoints
A breakpoint is a screen width at which the layout changes. Design separate frames for each breakpoint, then use components and Auto Layout to keep the content consistent.
Standard Breakpoints
BREAKPOINT WIDTH DEVICE Mobile 360–390px Smartphones Tablet 768–820px iPads, large tablets Desktop 1280–1440px Laptops and monitors Wide Desktop 1920px+ Large external monitors
Breakpoint Frame Setup in Figma
Page: Home Screen +-------------------+ +-------------------+ +-------------------+ | Mobile (390px) | | Tablet (768px) | | Desktop (1440px) | | Single column | | Two columns | | Three columns | | Stacked sections | | Side-by-side | | Wide grid layout | +-------------------+ +-------------------+ +-------------------+
Auto Layout for Responsive Frames
Auto Layout combined with "Fill Container" sizing creates elements that adapt to different frame widths automatically.
Responsive Card Grid Example
MOBILE (1 column): DESKTOP (3 columns): +-------------------+ +-------+-------+-------+ | [Card — Fill 100%]| |[Card] |[Card] |[Card] | +-------------------+ | Fill | Fill | Fill | | [Card — Fill 100%]| +-------+-------+-------+ +-------------------+ Parent frame uses Auto Layout with Wrap direction. Each card uses Fill Container for width. On mobile (narrow frame): cards wrap into single column. On desktop (wide frame): cards fit three per row.
Responsive Component Design
Components can use modes to switch between mobile and desktop layouts. Create a component with two variants: Size=Mobile (stacked vertically) and Size=Desktop (side by side). Switch the variant for each breakpoint.
Responsive Hero Card Variants
Variant: Mobile Variant: Desktop +----------------------+ +------------------------------------+ | [Hero Image] | | [Hero Image] | [Title ] | | [Title ]| | | [Description text ] | | [Description text ]| | | [CTA Button ] | | [CTA Button ]| +------------------------------------+ +----------------------+
Min and Max Width Constraints
Figma supports minimum and maximum size constraints on Auto Layout frames. This mirrors CSS min-width and max-width properties.
Select an Auto Layout frame set to Fill Container. In the Design Panel, click the three-dot menu next to W (width) to set a min-width or max-width. A content column set to max-width 1200px stays centered on wide screens and expands freely on narrower ones.
Variable Modes for Breakpoints
Advanced designers create a spacing variable collection with modes for Mobile and Desktop. Mobile uses tighter spacing values; Desktop uses larger ones.
Spacing Modes Example
VARIABLE MOBILE DESKTOP page/margin 16px 80px section/gap 32px 64px card/padding 12px 24px
Swap the mode on a frame from Mobile to Desktop and all spacing updates instantly — no manual adjustment of individual components needed.
Testing Responsive Designs
After building frames for multiple breakpoints, link them together in a prototype using the After Delay or Navigate To interactions. Share the prototype link with stakeholders and developers so they can view the design at each screen size before development begins.