Desktop and mobile values

Many sizes on a website should be smaller on a phone than on a large screen: headings, spacing, padding. ACSS handles this with fluid sizes that grow with the screen. In Figma, the ACSS plugin for Figma gives you each of these sizes twice: a desktop version starting with D and a mobile version starting with M.

Two variables, one code syntax

For a size that changes with the screen, the plugin creates a pair of variables:

Desktop variable	Mobile variable	Code syntax
Desktop/D Space M	Mobile/M Space M	var(--space-m)
Headings/D H1	Headings/M H1	var(--h1)
D Content Width	M Content Width	var(--content-width)

The desktop variable holds the size for large screens, and the mobile variable the size for small screens. Most pairs share the same code syntax, because on the website they’re one CSS variable whose value moves between the two sizes. A developer sees var(--space-m) in Dev Mode whether you used D Space M or M Space M.

Text styles come in pairs too: Headings/D H1 and Headings/M H1, Text/D Text M and Text/M Text M, and the same for button and form text.

Why not Figma modes?

Figma can store several values in one variable using modes, and switch a whole frame between them. The plugin doesn’t do this: each collection has a single mode, and desktop and mobile are separate variables.

Separate variables keep both sizes in view at once. You can put a desktop and a mobile frame side by side on the same page, and see exactly which size each layer uses from its variable name.

Where you set desktop and mobile values

Screen	Desktop and mobile settings
Layout	Content Width for Desktop and Mobile.
Typography	Base Font Size and Type Scale Ratio under Desktop and Mobile, for headings and for text, plus size overrides for each level.
Spacing	Base Spacing and Section spacing, each under Desktop and Mobile.

Buttons & Links and Forms have one set of settings, but they still create desktop and mobile versions. They build them from your desktop and mobile text sizes and spacing.

Everything else has a single value for all screen sizes: colors, borders, shadows, background and text colors, and the link font weight.

Using them in your designs

The rule is simple: desktop frames use D variables and styles, and mobile frames use M ones.

• In a desktop frame, set gaps to Desktop/D Space M, headings to the Headings/D H1 text style, and so on.
• In the matching mobile frame, swap in Mobile/M Space M and Headings/M H1.
• The Layout screen also creates D Website Width and M Website Width: the content width plus the section gutter on both sides. They’re a handy width for your desktop and mobile frames.

Tip

Design the desktop version first, then duplicate the frame for mobile and swap D for M. Because the names match, the swap is quick: D Space L becomes M Space L, D H2 becomes M H2.

There are no tablet variables. On the website, a tablet-sized screen gets sizes between the mobile and desktop values, as explained below.

In WordPress

When you export to WordPress, each pair becomes one fluid size in ACSS, with a smallest and a largest value. The mobile value is the size on small screens, and the desktop value is the size on large screens. ACSS makes the size grow smoothly between the two as the screen gets wider.

The Content Width values from the Layout screen set that range. With the defaults, sizes are at their mobile value on screens 390 px wide or smaller, and at their desktop value on screens 1280 px wide or larger. In between, they scale. For example, with the default spacing, var(--space-m) is 24 px on a phone, 30 px on a large screen, and about 27 px halfway between.

You design the two ends in Figma, and ACSS fills in every size in between. Learn more in the ACSS docs on fluid headings and content width.