How can i use localStorage in a plugin?


I’m developing a plugin based on VueJS 3. I scratched from this project GitHub - joaomarcelofm/figma-plugin-template-vue: A lightweight template for Figma plugins using Vue.js .

I have this code at main.js:

axios.interceptors.request.use((config) => {
    const accessToken = localStorage.getItem('accessToken')
    if (accessToken)
        config.headers.common['Authorization'] = `Token ${accessToken}`
    return config
}, (error) => {
    return Promise.reject(error)

How can I save my accessToken? I can't use [figma.clientStorage]( 'cause it is undefined at `main.js` I can't use `parent.localStorage` or `localStorage` 'cause it is prohibited

Best regards

The localeStorage is not available for plugins, so use figma.clientStorage.

I understood that I couldn’t use localStorage. Do you have a code example that uses Figma’s storage in a Vue/React app?

Best regards

There is nothing complicated here. Just send a message from the UI and receive it in code.ts.

Example plugin used by React:

Many thanks for your reply. I made same solution:


figma.showUI(__html__, {width: 500, height: 650});

figma.ui.onmessage = async (msg) => {
  if (msg.type === "set-value") {
    await figma.clientStorage.setAsync(, msg.value);
  else if (msg.type === "get-value") {
    const value = await figma.clientStorage.getAsync(;
    figma.ui.postMessage({type: 'return-value', value: value});


export function setFigmaStorageValue(name, value) {
    window.parent.postMessage({pluginMessage: { type: "set-value", name: name, value: value }}, "*");
export function getFigmaStorageValue(name) {
    window.parent.postMessage({pluginMessage: { type: "get-value", name: name }}, "*");

    const promise = new Promise(function(resolve, reject) {
            function(event) {
            {once: true}

    return promise;


logout() {
      setFigmaStorageValue('access-token', null);