はじめに
FigmaのPluginを開発する際、ユーザー間で同期さたくないデータを保存したいなと思ったことはありますか？
そんな時に使うのが、「figma.clientStorage API」です。
この記事では、「figma.clientStorage API」について解説しようと思います。
figma.clientStorage API とは？
figma.clientStorage API は、データをユーザーのローカルマシンに保存できます。
ドキュメントに保存されるデータ（setPluginData）とは異なり、ユーザー間で同期されないのが特徴です。
Window.localStorage API と似ていますが、figma.clientStorage API は、非同期であり、オブジェクト、配列、文字列、数値、ブール値、null、undefined、Uint8Arrayを保存でき、1つのプラグインに1MBのストレージが割り当てられます。
また、ブラウザのキャッシュをクリアするなどのユーザーアクションによって、保存されたデータがクリアされます。
データは、セキュリティのためではなく、安定性のために非公開で保存されています。他のPluginからデータにアクセスすることは防ぎますが、ユーザーが自分のクライアントに保存されているデータを見ることは防げません。
プラグインIDが変更されると、データはアクセスできなくなります。
figma.clientStorage APIの使い方
⚪︎ クライアントストレージに保存したデータを取得する
指定されたkeyの値をクライアント・ストレージから取得します。
そのkeyに対応する値が格納されていない場合、 undefined を返します。
// getAsync(key: string): Promise<any | undefined>
const value = await figma.clientStorage.getAsync(key)
⚪︎ クライアントストレージにデータを保存する
指定されたkeyの値をクライアントのストレージに保存します。
保存が失敗した場合は、エラーメッセージを返し、保存は拒否されます。
// setAsync(key: string, value: any): Promise<void>
figma.clientStorage.setAsync(key, value)
// エラー処理
figma.clientStorage.setAsync(key, value).chatch((error: string) => { /* エラー処理 */ })
⚪︎ クライアントストレージに保存したデータを削除する
指定されたkeyに一致する、keyと値両方をクライアントのストレージから削除します。
指定されたkeyに一致するものがなかった場合は、なにも起こりません。
// deleteAsync(key: string): Promise<void>
figma.clientStorage.deleteAsync(key)
⚪︎ クライアントストレージに保存しているすべてのKeyを取得する
クライアント・ストレージに保存されているすべてのキーのリストを取得します。
// keysAsync(): Promise<string[]>
const keyList = await figma.clientStorage.keysAsync(key)
まとめ
この記事では、「figma.clientStorage API」について解説しました。
figma.clientStorage API は、ユーザー間で同期させたくないデータを保存することができる機能です。
特定のアカウントに紐付けたい、データを保存するのに便利です。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。