Collections, variables and styles

The ACSS plugin for Figma doesn’t add anything special to your file. It creates ordinary Figma variables and styles, the same kind you could make by hand. This page explains the Figma ideas you’ll meet when you use them.

Collections

A collection is a folder of variables. The plugin creates eight, one for each part of your design system, and they all appear in Figma’s Variables panel. Inside a collection, variables are sorted into groups with a slash in their name: Desktop/D Space M is the variable D Space M in the Desktop group.

Collection	What’s inside	Set up on
Color Palette	Ten color families with eight shades each, your transparencies, and White, Black and Transparent.	Color Palette
Spacing	The spacing scale, section spacing, section gutters and contextual gaps.	Spacing
Layout	Content widths, website widths and the width steps from 10 to 90.	Layout
Typography	Font sizes, line heights, font weights, letter spacing, font families, and heading and text colors.	Typography
Borders	Corner radius sizes, border width and border colors.	Borders
Backgrounds & Text	Background and text colors for light and dark sections.	Backgrounds & Text
Buttons & Links	Button padding, minimum width, border width and radius, and the link font weight.	Buttons & Links
Forms	Spacing, borders and colors for form labels, inputs and help text.	Forms

The plugin also creates styles:

Styles	What’s inside	Set up on
Text styles	Headings/D H1 … H6, Text/D Text XXL … XS, button text and form text, each with a desktop (D) and mobile (M) version.	Typography, Buttons & Links, Forms
Effect styles	Shadows/Shadow S, Shadows/Shadow M and Shadows/Shadow L.	Shadows

For every name, see All variables and styles.

Variables

A variable stores one value under a name. Apply it to a layer, and the layer uses that value. Change the variable, and every layer that uses it changes too.

The plugin creates three types of variables:

• Color variables: the palette, background and text colors, border colors and form colors.
• Number variables: font sizes, spacing, widths, corner radius, border width, font weights, line heights, letter spacing and opacity.
• String (text) variables: the font families for headings and body text.

Each collection has a single mode. The plugin doesn’t use modes for light and dark, or for desktop and mobile. Desktop and mobile values are separate variables, as explained in Desktop and mobile values.

Aliases

An alias is a variable whose value is another variable. Many of the plugin’s variables are aliases, so they stay in step with the variable they point to.

For example, Backgrounds/BG Dark in the Backgrounds & Text collection points to a color in the Color Palette, such as Neutral Dark. Change Neutral in the plugin and click Save, and the background color follows. Other aliases work the same way:

• Heading and text colors in Typography, and the border colors in Borders, point to palette colors.
• The contextual gaps in Spacing point to one of your Space variables.
• The button radius in Buttons & Links points to a radius in Borders.
• Form label and input padding, corner radius and colors in Forms point to Spacing, Borders and the Color Palette.

In the Variables panel, an alias shows the name of the variable it points to instead of a value.

Scopes

A scope tells Figma where a variable can be used. The plugin sets scopes so each field only offers variables that fit. That’s why a spacing variable shows up when you set a gap or padding, but not when you pick a font size.

Variables	Where you can use them
Palette colors and transparencies	Anywhere a color can go
White, Black and Transparent	Fills, strokes and text color
Background colors	Frame and shape fills, and shadow colors
Text and heading colors	Text color and strokes
Border colors	Strokes
Spacing and section spacing	Auto layout gap and padding; Space variables also work for paragraph spacing
Layout widths	Width and height
Radius	Corner radius
Border width	Stroke width
Font sizes, line heights, letter spacing, font weights, font families	The matching text property

Many number variables can also be bound to the content of a text layer, which is handy for showing values in a spec sheet. The variables that only record a setting, like Desktop Base Spacing Value, can be used only there. They don’t appear in other fields.

Code syntax and Dev Mode

Code syntax is the name a developer sees for a variable in Dev Mode. The plugin gives most variables the ACSS CSS variable they stand for. Desktop/D Space M has the code syntax var(--space-m), and Main Colors/Primary/Main has var(--primary).

When a developer inspects your design in Dev Mode, they see var(--space-m) instead of 30px, and can use it as it is in an ACSS site.

Some variables have no code syntax, for example the settings behind a scale, button padding and the form variables. For those, Dev Mode shows the value.

Text styles and effect styles

Styles bundle several properties. Text styles set the font family, weight, size, line height, letter spacing and text case. They don’t set a color, so apply a color variable to the text as well. Effect styles hold a drop shadow.

Styles hold a copy of their values. They aren’t linked to the variables, so:

• When you change a setting in the plugin and click Save, the styles update.
• When you edit a variable in Figma, the styles don’t change. Make the change in the plugin and click Save.

Shadows work the same way: each shadow holds a copy of its palette color. After you change your palette in the plugin, Save updates the shadows too.

Descriptions

Color Palette variables get a description with the color’s OKLCH value, for example oklch(0.55 0.22 260). You see it when you open the variable’s settings in the Variables panel. If you write your own description on a palette variable, the plugin keeps it.