FDS - Design Tokens Plugin

プラグインのインストールから起動までの手順

FDSを複製し、自分のプロジェクトへ移動する

  • 公開されているFDSは読み取り専用であり、編集できません。先ずはFDSを複製して自社用のファイルを作成してから編集などの作業を始めてください。
  • Figmaファイルの複製は、ヘッダーのファイル名(FDS UI Kit…)右のドロップダウンメニューから、Duplicate を選択してください
  • 複製後は Draft に配置されます。ドロップダウンメニューから Go to project を選択して、自分のプロジェクトに移動させてください。

Plugin のインストール

  • こちらからzipファイルをダウンロードしてください
    FDSVariablesPlugin
  • zipファイルを解凍します
  • Figmaのメニューから、Plugins > Development > Mnage Plugins in development を選択
  • +をクリック > Import plugin from manifest… を選択
  • 解凍したフォルダの中の manifest.json を開く

Plugin 起動

  • Figmaのメニューから、Plugins > Development > FDS Design Tokens を選択

起動に失敗する場合

Variables各コレクションのグループ名を変更していませんか?
  • グループ名を変更してしまうと読込みエラーとなります
  • 繰り返し失敗する場合は公開されているFDSから新たに複製してお試しください
Variablesは、各コレクション内でディレクトリ2階層目に配置してください
  • 例えば Alias Colorコレクション配下に、Data/Primary/01 というvariables は2階層のディレクトリ配下にあるので読込み可能ですが、Data/01 のように1階層のディレクトリ配下におかれたVariablesはプラグインで読み込むことができません。

おすすめの記事

TOP