This allows you to create stores which can persists in clientStorage
and pluginData
.
[!NOTE] This project is still in conception.
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();
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")
.
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
.
The same happens for replacing the value using set
.
store.set(0);
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 }
);
If you need to wait for a store to be set asynchronously, you can use the Async
variant.
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
)