最近のFigma Config 2023で紹介されたVariablesの機能はデザイントークンを管理する機能であるが、デザイントークンの管理はStylesという別の機能を使っている
２つの機能はどちらもFigmaの標準機能であるが、比較するとデザイントークンのmode切り替えなどができる分、Variablesの方が今後便利そう
なのでStylesで管理していたトークンをVariablesに移行したい
この時、StylesToVariablesというプラグインを知ったので軽く使ってみた
まず、Stylesは下のようなカラーを定義したものがあるとする
この時、インストールしたプラグインを起動すると以下のようなポップアップがでる
オプションの２つ
- グループの第 1 レベルを使用してモードを作成するかどうか
- 作成したvariablesにスタイルをバインドするかどうか
１つ目はよくわからないが、２つ目はvariablesをさらにスタイルにしてこれまでのスタイルのように選べるようにするかどうかのオプション
一旦これらは外しておいてボタンを押すと、次のようにVariablesが作成された
Stylesの量が多い場合はかなり便利
