Skip to content
Frames For Figma

ACSS plugin

Quick start

Set up a brand color, fonts and spacing with the ACSS plugin for Figma, save them as variables, and use them in a design in about ten minutes.

In about ten minutes, you’ll set up a small design system with the ACSS plugin for Figma, use it to style a simple card, and see the code a developer gets from it. You’ll work in a new, empty Figma file, so nothing you do here can break an existing design.

Before you start, make sure the plugin is activated.

1. Open the plugin

Section titled “1. Open the plugin”

  1. In Figma, create a new design file.

  2. Run the ACSS plugin for Figma. Click the Tools tab in the navigation bar on the left, search for the plugin, click it and click Run. See Installation for other ways to open it.

  3. The plugin’s home menu opens. It lists the screens you’ll use below.

2. Set your content width

Section titled “2. Set your content width”

The content width is how wide your page content can get, for example the width of the text and cards inside a section.

  1. Click Layout.

  2. Under Content Width, check the Desktop and Mobile values. The defaults are 1280 px and 390 px. If your designs use another width, type it in.

  3. Click the back arrow at the top left to go back to the home menu.

3. Pick your brand color

Section titled “3. Pick your brand color”

In the plugin, Primary is your main brand color. The other color families take their lightness and vividness from Primary, so the whole palette looks balanced. Read more in Primary sets the tone.

  1. Click Color Palette, then click Primary under Main Colors to open it.

  2. Set your color. Drag the handle in the color picker, move the Hue slider, or paste your brand color into the Hex field, for example #3b5bdb.

  3. Open Secondary and drag its Hue slider to choose a second color. Notice that it only has a hue slider: its lightness and vividness come from Primary.

  4. Go back to the home menu.

4. Choose your fonts

Section titled “4. Choose your fonts”

Headings and body text each have their own font.

  1. Click Typography, then Headings.

  2. On the All tab, find General styling and open Font Family. Type to search, then pick a font.

  3. Go back, click Text, and pick a Font Family for body text the same way.

The list shows every font Figma can use on your computer. If a font is missing, see Troubleshooting.

5. Save

Section titled “5. Save”

Click Save at the top right of the screen, or press Cmd+S on a Mac or Ctrl+S on Windows while the plugin window is active.

The plugin creates all its variables and styles. When it’s done, Figma shows the message “✅ Variables and settings saved” at the bottom of the screen. The first Save in a file can take a few seconds.

Save always writes the settings from every screen, not just the one you’re on. You didn’t touch Spacing, Borders or the other screens, so they were saved with their defaults. See Saving and auto-save.

6. Look at your variables

Section titled “6. Look at your variables”

Open Figma’s Variables panel. In the current Figma layout, it’s a tab in the navigation bar on the far left of the file.

You’ll see eight collections: Color Palette, Spacing, Layout, Typography, Borders, Backgrounds & Text, Buttons & Links and Forms. Click Spacing: the variables are in a Desktop group, starting with D, and a Mobile group, starting with M. Read why in Desktop and mobile values.

7. Use them in a design

Section titled “7. Use them in a design”

Now build a small card with your new variables and styles.

  1. Press F and draw a frame, about 400 px wide. Press Shift+A to give it auto layout.

  2. In the right sidebar, hover over the gap field in the auto layout section and click the variable icon. Pick Desktop/D Space M from the Spacing collection. Do the same for the padding and pick Desktop/D Space L.

  3. Hover over the frame’s fill and click the variable icon. Pick Main Colors/Primary/Ultra-Light from the Color Palette collection.

  4. Add a text layer inside the frame. In the typography section of the right sidebar, open the style picker and choose Headings/D H2.

  5. Change the text’s fill to the Headings/Heading Color variable from the Typography collection. Text styles set the font and size but not the color, so you add the color with a variable.

  6. Add a second text layer and give it the Text/D Text M text style.

  7. Optional: set the frame’s corner radius to the Global Radius variable, and give it the Shadows/Shadow M effect style.

You’ll notice each field only offers variables that make sense there. Spacing variables appear in gap and padding fields, colors in fills, and so on. Read more in Collections, variables and styles.

8. See what a developer sees

Section titled “8. See what a developer sees”

Most variables have a code syntax: the ACSS CSS variable they stand for.

  1. Switch to Dev Mode with the toggle in the toolbar, or press Shift+D.

  2. Select your card.

  3. Look at the code in the inspect panel. Instead of plain numbers and hex codes, you’ll see ACSS variables such as var(--space-m), var(--space-l) and var(--primary-ultra-light).

A developer building with ACSS can use these names as they are. If Dev Mode isn’t available on your Figma plan, open a variable’s settings in the Variables panel to see its code syntax.

9. Change something and save again

Section titled “9. Change something and save again”

Go back to the plugin, open Color Palette › Primary, and move the Hue slider. Click Save. Your card’s background changes color.

That’s the key idea: the plugin updates its variables in place, so everything that uses them follows your changes. You can keep adjusting your system while you design.

Next steps

Section titled “Next steps”