Upgrading from an older version

If you used the plugin before it became part of Frames For Figma, this page is for you. The plugin was called ACSS for Figma. It’s now the ACSS plugin for Figma, and this version follows ACSS 4. Your settings carry over, but a few things work differently.

What’s changed

• A new name and a new license key. Your old key doesn’t work in the new version.
• Colors use OKLCH. Your palette is converted the first time you open the plugin in a file.
• The Medium shade is gone, as in ACSS 4.
• The layout widths changed from XS to XXL to a scale from 10 to 90.
• Radius XS, XL and XXL match ACSS. Their values change on your next Save. Layers that use them stay linked and get the new radius. See Borders.
• The WordPress export targets ACSS 4.

Get your new license key

Existing customers receive an email with a personal claim code. Use it to get your new Frames For Figma license key, then activate the plugin with it.

Check the email for the date by which to claim your new key. If you didn’t get the email, ask in the community forum.

Colors are now OKLCH

The Color Palette now works in OKLCH, a color model where colors with the same lightness really look equally light. Primary sets the lightness and vividness for every family, and the other families pick their own hue. Read more in Primary sets the tone.

The first time you open the plugin in a file with an older palette, it converts the palette and shows a notice at the top of the Color Palette screen: Palette converted to OKLCH.

• Your main colors are kept exactly. Primary, Secondary and every other family keep their main color.
• Families that don’t match Primary get Manual controls. If a family’s lightness or vividness differs from Primary, or you had adjusted its shades, Manual controls is turned on for it, so it keeps its exact color. See Manual controls.
• The other shades are recalculated. Shades such as Light and Dark now come from the shared Global Lightness Values, so they may look slightly different after you Save.

If you’d rather have the whole palette follow Primary, click Reset all families to inherit from Primary in the notice. This turns off Manual controls and clears the shade adjustments for every family except Primary. Each family keeps its hue but takes Primary’s lightness and vividness, so their main colors change.

Caution

Reset all families to inherit from Primary can’t be undone in the plugin. To keep your exact colors, close the notice with its × instead.

Nothing changes in your Figma file until you click Save.

The Medium shade is gone

ACSS 4 has no Medium shade, so the plugin no longer creates it. Each family now has Ultra-Light, Light, Semi-Light, Main, Hover, Semi-Dark, Dark and Ultra-Dark.

• Settings that used a Medium shade, for example a background or a form color, now use Main.
• The Medium variables already in your file, such as Main Colors/Primary/Medium and Semantic Colors/Danger/Medium, are deleted the next time you click Save. Variables that pointed to a Medium variable now point to that family’s Main.

Caution

Layers that use a Medium variable keep their color but lose the link to the variable. Before you Save, move those layers to Main or another shade.

To find them, select everything on a page and look at Selection colors in Figma’s right sidebar. It lists the color variables in use, and you can swap one for another there.

Layout widths changed

The old T-shirt widths are replaced by the ACSS 4 width scale:

Before	Now
D Width XS … D Width XXL and D Width 50% (and the M versions)	D Width 10 … D Width 90 (and M Width 10 … M Width 90)

Each new width is a share of the content width: D Width 10 is 10% of it, D Width 50 is half of it, and so on. Their code syntax is var(--width-10) to var(--width-90). See Layout.

Caution

The next Save deletes the old width variables. Layers that use them keep their size but lose the link to the variable. Before you Save, move those layers to one of the new Width variables.

The WordPress export targets ACSS 4

The export now creates settings for ACSS 4, and writes colors in the OKLCH format that ACSS 4 uses. Update the ACSS plugin on your WordPress site to version 4 before you import.

Upgrade a file step by step

1. Save a version in Figma’s version history, so you can always go back.

2. Open the plugin in the file. Your settings load and the palette is converted.

3. Open Color Palette and read the Palette converted to OKLCH notice. Keep the exact colors, or click Reset all families to inherit from Primary.

4. Move layers that use a Medium color or an old XS to XXL width to their new variables.

5. Click Save. The plugin updates your variables and removes the old widths and Medium colors.

6. If you use WordPress, export your settings again and import them into ACSS 4.