CSS media query modes

CSS media query modes allow you to define variable values for different viewport sizes or device characteristics, enabling responsive design.

How it works

Variables Xporter supports using standard media query syntax in variable mode names:

Variable mode naming rule: {media-feature}:{value}

For example: min-width:768px, max-width:1024px

Supported media features

min-width
max-width
min-height
max-height
orientation
aspect-ratio
min-aspect-ratio
max-aspect-ratio
prefers-color-scheme
prefers-reduced-motion
display-mode

Usage examples

1. Responsive spacing

Set container widths for different breakpoints in Figma:


 ┌────────────────────────┬──────────────────────┬─────────────────────┐
 │                        │                      │                     │
 │ Device Modes           │        default       │    min-width:1024   │
 │                        │                      │                     │
 ├────────────────────────┼──────────────────────┼─────────────────────┤
 │                        │                      │                     │
 │ spacing/lg             │ spacing/10           │ spacing/16          │
 │                        │                      │                     │
 │ ...                    │ ...                  │ ...                 │
 │                        │                      │                     │
 └────────────────────────┴──────────────────────┴─────────────────────┘

2. Responsive font sizes

Set appropriate font sizes for different screen sizes:


 ┌────────────────────────┬──────────────────────┬─────────────────────┐
 │                        │                      │                     │
 │ Device Modes           │        default       │    min-width:1024   │
 │                        │                      │                     │
 ├────────────────────────┼──────────────────────┼─────────────────────┤
 │                        │                      │                     │
 │ font/hero/size         │ font/2xl/size        │ font/3xl/size       │
 │                        │                      │                     │
 │ ...                    │ ...                  │ ...                 │
 │                        │                      │                     │
 └────────────────────────┴──────────────────────┴─────────────────────┘

Learn how to create and manage multi-mode variables in Figma:

Multi-mode variable management