Using local storage

As your plugin gets more intricate, you may find a need for saving some data locally.

Things you might use it for:

• User's settings/preferences
• Stats tracker of actions preformed (how many layers were renamed with my plugin, etc) can use these for analytics grabbing or fun gamification/achievements.

Things you might not want to use it for:

Anything to do with the Figma layers/design document itself, local storage is just that, local, it is not tied to the Figma layer at all. So if you are storing data that will need to be accessed by other users in that design document, I recommend storing that data in the design document itself, in the form of a layer(s).

// to get a local value that is set
const { getAsync } = figma.clientStorage;
 
// user pref
const userThemePref = await getAsync('userThemePref');
 
// to set a local value
const { setAsync } = figma.clientStorage;
await setAsync('userThemePref', 'dark');

Also, a fun note/bug, the figma.clientStorage will not save locally in Figma's client if your plugin doesn't have an id set in your manifest.json file, so please make sure to add that during development.

{
  "name": "my plugin name",
  "id": "1231231230000000000000", // add this line
  ....
}

When publishing your plugin for the first time, Figma will then give you your plugin ID.

Check Figma API Docs for all Client Storage (opens in a new tab) options.