Skip to main content

Hello,


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.commono'Authorization'] = `Token ${accessToken}`

    return config

}, (error) => {

    return Promise.reject(error)

});```



How can I save my accessToken? I can't use efigma.clientStorage](https://www.figma.com/plugin-docs/api/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.

figma.com

Many thanks for your reply. I made same solution:


code.ts


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



figma.ui.onmessage = async (msg) => {

  if (msg.type === "set-value") {

    await figma.clientStorage.setAsync(msg.name, msg.value);

  }

  else if (msg.type === "get-value") {

    const value = await figma.clientStorage.getAsync(msg.name);

    figma.ui.postMessage({type: 'return-value', value: value});

  }

};

storage-wrapper.js


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) {

        window.addEventListener(

            'message',

            function(event) {

                resolve(event.data.pluginMessage.value);

            },

            {once: true}

        );

    });



    return promise;

}

view.js


logout() {

      setFigmaStorageValue('access-token', null);

    }

Reply


Terms & ConditionsCookie settings