Alex52
August 27, 2023, 4:57pm
1
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.common['Authorization'] = `Token ${accessToken}`
return config
}, (error) => {
return Promise.reject(error)
});```
How can I save my accessToken? I can't use [figma.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.
Alex52
August 27, 2023, 5:36pm
3
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.
The window.postMessage() method safely enables
cross-origin communication between Window objects; e.g., between
a page and a pop-up that it spawned, or between a page and an iframe embedded within it.
This guide describes how to make basic network requests, test network access, and specify the scope of your plugin's network access. As a best practice, Figma recommends that your plugin only allows domains that are needed for your plugin to work.
Example plugin used by React:
// If no layer is selected after 1 seconds, show the empty state.
setTimeout(function() {
setTimeLoad(true);
}, 1000);
React.useEffect(() => {
// Update client storage so the next time we run the app
// we don't have to ignore our errors again.
if (initialLoad !== false && ignoredErrorArray.length) {
parent.postMessage(
{
pluginMessage: {
type: "update-storage",
storageArray: ignoredErrorArray
}
},
"*"
);
}
}, [ignoredErrorArray]);
// so we can check what changed.
if (msg.type === "update-errors") {
figma.ui.postMessage({
type: "updated errors",
errors: lint(originalNodeTree)
});
}
// Updates client storage with a new ignored error
// when the user selects "ignore" from the context menu
if (msg.type === "update-storage") {
let arrayToBeStored = JSON.stringify(msg.storageArray);
figma.clientStorage.setAsync(documentUUID, arrayToBeStored);
}
// Clears all ignored errors
// invoked from the settings menu
if (msg.type === "update-storage-from-settings") {
let arrayToBeStored = JSON.stringify(msg.storageArray);
figma.clientStorage.setAsync(documentUUID, arrayToBeStored);
Alex52
September 3, 2023, 6:09pm
5
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);
}