Variables（一部LocalStyles）として構成されているFDSのデザイントークンを、JSONファイルとしてエクスポート/インポートできます。
エクスポート
フッターメニューの「エクスポート」ボタンを押すと、現在プラグイン上に読み込まれているデザイントークン情報を、JSONファイルに出力できます。トークンの変更前・変更後など適宜出力しておけば、いつでもインポートして元に戻すことができます。
出力ファイルは、UXHubに読み込ませて、UXHub上で管理しているUIコンポーネントにデザイントークンを適用することもできます。
出力されるJSONの構成は、Design Tokens Community Group によるDraft (06 November 2023) に準拠しており、適切に解釈すれば他のデザイン管理システムで利用することもできます。
インポート
フッターメニューの「インポート」ボタンを押すと、本プラグインで出力したデザイントークンファイルを選択して、取り込むことができます。バックアップしたデザイントークンに戻したり、他のFigmaファイルで設定したデザイントークンを取り込む場面などで利用ください。
FDS Design Token (JSON) のダウンロード
下記のJSONファイルをインポートすると、FDSのDesignTokenを初期状態にリセットできます。新規Figmaファイルに、FDSのDesignTokenをインポートするときにも利用できます。
インポートに失敗する場合
以下の原因が考えられます。解消方法を確認ください。
- Figma Starter Plan アカウントである
- 解消法：Figma Professional Plan をご利用ください
- Figma Professional Plan 利用中だが、Draft に Figmaファイルをおいている
- 解消法：チームスペースに移動させてください
- 不明なJSONフォーマットである
- 解消法：本マニュアルからダウンロードできるJSONフォーマットに対応しています。こちらをご利用ください。
Figmaの更新読み込み
本プラグインは、起動時にFigmaファイル上のVariablesを読み込みます。
起動後にFigmaファイル上で直接 Variables を変更しても、プラグイン側にその変更は反映されません。フッターの「Figmaの更新読込み」ボタンを押すと、プラグイン側に反映させることができます。
※ 逆にプラグイン側での変更は、即Figmaファイル（のVariables）に反映されます。修正前にバックアップをとってください。