How to Use Variables for Responsive Design in Figma

In Figma, use variables to store values like sizes, colors, or spacing that can change based on screen size. Combine variables with auto layout and constraints to build responsive designs that adjust automatically when the frame size changes.

Syntax

Figma variables are created and managed in the Variables panel. You define a variable with a name and assign it a value. For responsive design, variables often store sizes or spacing values that change with screen size.

Use variables in properties by typing {variableName}. Combine with auto layout and constraints to make components adapt.

text

Variable Name: spacingSmall
Value: 8px

Usage in property: {spacingSmall}

Example

This example shows how to create a variable for padding that changes with screen size and apply it to a frame's padding for responsiveness.

text

1. Create a variable named 'padding' with values:
   - Mobile: 12px
   - Tablet: 24px
   - Desktop: 40px

2. Select a frame and set its padding property to use the variable: {padding}

3. Resize the frame or switch device presets to see padding adjust automatically.

Output

When resizing the frame from mobile to desktop width, the padding inside the frame changes from 12px to 40px smoothly.

Common Pitfalls

• Not linking variables to responsive breakpoints, so values stay static.
• Using fixed pixel values instead of variables, which breaks responsiveness.
• Forgetting to apply constraints or auto layout, causing elements not to resize properly.

Always combine variables with layout features for true responsiveness.

text

Wrong:
Padding: 20px (fixed)

Right:
Padding: {paddingVariable} (changes with screen size)

Quick Reference

Concept	Description	Example
Variable	Stores a value that can change	spacingSmall = 8px
Usage	Use variable in properties with curly braces	{spacingSmall}
Responsive Values	Assign different values per breakpoint	Mobile: 12px, Desktop: 40px
Auto Layout	Makes frames adapt to content and variables	Frame padding = {padding}
Constraints	Fix elements relative to frame edges	Left and right constraints

Key Takeaways

Use variables to store size and spacing values that change with screen size.

Apply variables in properties using curly braces like {variableName}.

Combine variables with auto layout and constraints for true responsive behavior.

Avoid fixed values; always link variables to breakpoints for adaptability.

Test responsiveness by resizing frames or switching device presets in Figma.