How it works
Saving and auto-save
How Save writes your plugin settings to Figma as variables and styles, what the plugin remembers on its own, and how to keep your layers linked.
The ACSS plugin for Figma keeps two things apart: your settings in the plugin, and the variables and styles in your Figma file. Save is what turns your settings into variables and styles. Until you click it, nothing in your Figma file changes.
What Save does
Section titled “What Save does”Every screen except Export has a Save button at the top right. You can also press Cmd+S on a Mac or Ctrl+S on Windows while the plugin window is active.
When you click Save, the plugin:
- Writes the settings from every screen at once, not just the screen you’re on. If you changed colors and spacing, one Save covers both.
- Creates what’s missing. The first Save in a file creates all eight collections, plus the text styles and effect styles.
- Updates what’s already there. Later saves change the values of the existing variables and styles.
When it’s done, Figma shows “✅ Variables and settings saved” at the bottom of the screen for a few seconds. The first Save in a file can take a few seconds because there’s a lot to create. Later saves are faster. Wait for the message before you close the plugin.
If something goes wrong, Figma shows a message starting with “❌ Error saving tokens:” and the plugin shows “Save failed:” with the reason. Click Save again. If the error keeps coming back, see Troubleshooting.
Some problems affect only part of a Save, for example a text style whose font can’t be loaded. Then the plugin still saves everything else, including your settings, and the message lists what wasn’t saved.
Saving again updates in place
Section titled “Saving again updates in place”The plugin finds its variables and styles by name and updates their values. It doesn’t delete and recreate them. That’s why layers that use a variable stay linked and change with it: set your Primary color to green, click Save, and every fill that uses Primary turns green.
A few things follow from this:
- The plugin’s values win. If you edit one of the plugin’s variables directly in Figma, for example in the Variables panel, the next Save puts the plugin’s value back. Make your changes in the plugin instead.
- Keep the plugin’s names. If you rename or move one of the plugin’s variables or styles, the next Save can’t find it. It creates a new one with the original name, and the renamed one stops updating. Transparencies are the exception: the plugin recognizes them and gives them back their name.
- Deleted variables come back. If you delete one of the plugin’s variables or styles, the next Save creates it again. Layers that used the deleted one aren’t linked to the new one, so you’ll need to apply it again.
- Your own variables are left alone. Variables and collections you create yourself aren’t touched, even if you put them in one of the plugin’s collections. Give them names the plugin doesn’t use.
Save only removes two kinds of variables: transparencies you’ve removed in the plugin, and the old layout widths from earlier versions of the plugin (see Upgrading).
What the plugin remembers
Section titled “What the plugin remembers”The plugin remembers your settings for each file. Close the plugin and open it again in the same file, and your settings are back on every screen. Another file has its own settings, and a new file starts with the plugin’s defaults.
Your settings travel with the file:
- Collaborators who open the plugin in the file get the same settings, on any computer.
- A copy of the file, duplicated in Figma or imported from a
.figfile, starts with the original’s settings. From then on, each file keeps its own. Changing the copy doesn’t change the original.
While you work, the plugin keeps your settings by itself a moment after you change something. This is auto-save. It only remembers your settings in the plugin. It doesn’t change any variables or styles in Figma; only Save does that.
Good to know
Section titled “Good to know”- If the file’s color profile changed while the plugin was open, Save recalculates your colors for the new profile and saves again by itself. See Color Palette.
- Text styles and effect styles hold a copy of their values. They aren’t linked to variables, so they change when you Save in the plugin, not when you edit a variable in Figma. See Collections, variables and styles.
- Before big changes in an important file, save a version in Figma’s version history. It’s an easy way back if you change your mind.