figma-store

Figma Store

This allows you to create stores which can persists in clientStorage and pluginData.

[!NOTE] This project is still in conception.

Setup

Inside the UI import the FigmaStore class.

import { FigmaStore } from "figma-store";

Within the main code, initialise the listeners required for the UI to make updates to clientStorage and pluginData.

import { initListeners } from "figma-store";

initListeners();

Usage

Create a store

To persist a store to clientStorage provide a key and an initial value.

let store = await FigmaStore.create("key", { count: 0 });

This initialises the store. When the UI loads, it will grab the data from the main code using figma.clientStorage.getAsync("key").

Updating a store

store.update((value) => {
  return value + 1
)

This is synchronouse and immediately updates the value of the store in the UI while asynchronously updating the value in clientStorage.

Setting a store

The same happens for replacing the value using set.

store.set(0);

PluginData

Below is a basic example of storing a value using pluginData. It requires a key, an initial value and a function that returns the node for the plugin data to be set on.

let fileKey = await Store.create("fileKey", null, (figma) => figma.root);

Below is a more complex example of setting pluginData on several nodes by returning an array of nodes. It also shows how you can also provide in a dynamic value in retrieving the node.

let store = await Store.create(
    `layerStyle${id}`,
    {},
    (figma, { id }) => {
        return figma.root.findAll((node) => node.name === layerStyle + id);
    },
    { id }
);

Async

If you need to wait for a store to be set asynchronously, you can use the Async variant.

Updating a store asynchronously

For example, you can update a value based off some logic with the main code.

await sites.updateAsync(async (figma, store, { siteId }) => {
    store.map((site) => {
        const activeSite = await figma.clientStorage.getAsync("activeSite")

        if (activeSite) {
            return store.shift()
        }
        else {
            site.activeSite(sideId)
        }
    }, {siteId})

    return store
)