OKLCH colors and ACSS 4 export

The ACSS plugin for Figma (previously called ACSS for Figma) gets a rebuilt Color Palette and now exports to ACSS 4. If you used an earlier version, read Upgrading from an earlier version first.

New

• OKLCH Color Palette. Colors are now set with lightness, chroma and hue. Primary sets the tone: its lightness and chroma carry over to every other family, so each family only needs a hue, and the palette stays balanced.
• Closest possible chroma. When a hue can’t be as vivid at a given lightness, the plugin uses the most vivid color the file can show instead of clipping it.
• Display P3 support. Colors follow your Figma file’s color profile, so Display P3 files get the wider range of colors automatically.
• Manual controls. Give any family its own lightness and chroma, and fine-tune single shades with Granular shade adjustment.
• Global lightness and hover. One table sets the lightness of every shade for all families, and the hover shade is now relative to each family’s main color. See Global lightness and hover.
• Transparencies. Add transparency variables to any family, for any shade, from 1 to 99 % opacity. See Transparencies.
• Width 10–90. The Layout screen now creates D Width 10 … D Width 90 and the mobile versions, matching ACSS 4. See Layout.

Changed

• WordPress export targets ACSS 4. Colors are exported as OKLCH values, and the export sets up ACSS’s unified lightness to match your palette. See Export to WordPress.
• Every export setting now arrives in ACSS 4. Forms, the section gutter and the line heights of H4 and Text M used ACSS 3 setting names, so ACSS skipped them on import. Form colors now come from Light Styles, because ACSS 4 adapts forms to your color scheme itself. See Forms.
• The Medium shade is gone, as in ACSS 4. Anything that pointed to Medium now uses Main, and the old Medium variables are removed when you click Save.
• The T-shirt content widths (XS to XXL and 50 %) are replaced by Width 10–90 and removed when you click Save.
• New name: the plugin is now called the ACSS plugin for Figma.

Fixed

• Italic font weights stay italic. Picking an italic like Bold Italic on the Typography screen used to save upright Regular text styles and a weight of 400. Now the text styles use the exact style you picked, the weight variables get the right number, and the WordPress export makes those headings or text italic. Each level’s Font Weight list now shows your font’s styles too. See Typography.
• Copies of a file keep their own settings. A duplicated file, or one imported from a .fig file, used to share its plugin settings with the original on the same computer, and each overwrote the other. Collaborators could also get older settings than the ones saved in the file. Now each file keeps its own settings, and everyone who opens the file gets the same ones. See What the plugin remembers.
• WordPress export values ACSS can read.
  • Shadows use your palette colors with color-mix(), and a 0 % opacity stays 0 %.
  • Letter spacing is in em.
  • Colors and contextual gaps are wrapped in var().
  • White, Black and Transparent are no longer exported empty.
  • H5, H6, Text S and Text XS get your sizes.
  • Every radius size, from Radius XS to Radius XXL and Radius 50%, exists in WordPress.
• Radius sizes match ACSS. Radius XS, XL and XXL used a different formula from ACSS, so corners were rounder in Figma than in WordPress. They now use the same steps as ACSS, so layers that use them get a slightly different radius when you click Save. See Borders.
• Save tells you when part of it fails. If a text style’s font couldn’t be loaded, Save used to skip that style and still show “✅ Variables and settings saved”. Now it shows an error that lists what wasn’t saved, and still saves everything else. See Save shows an error.

Upgrading

Your existing palette is converted automatically the first time you open the plugin, and your main colors stay exactly as they were. Before you click Save in an existing file, read Upgrading from an earlier version: layers that use the old Medium or T-shirt width variables need to be moved to the new ones.