はじめに
Figmaには従来より「スタイル」という色やタイポグラフィに名前をつけながら値が指定できる機能があったのですが、カバーしている範囲が狭く、デザイントークンという概念を取り扱うにはToken Studioなどの標準機能ではないプラグインなどを活用する必要がありました。
今回登場したVariablesはほとんどのプロパティに値を紐づけることができ、上記のようなデザイントークンはもちろんさまざまなユースケースでの活用に夢が広がります。
この記事ではVariablesという機能自体について解説した後、どんなユースケースが考えられるか、そして開発にはどんな影響があるのかを語ります。
※日本語ローカライズとしては“バリアブル”というカタカナ表記の模様です。
Variablesとは
Variablesでは名前の通り変数を定義することができます。
下記がVariablesを定義しているUIのスクリーンショットなのですが、Variablesは Collectionという括りの中に複数定義していきます。Collectionはライブラリと同様に複数のファイルで読み込むことができます。
現状では以下の4種類のVariableを定義することができます。
- Color（色）
- Number（数字）
- String（文字列）
- Boolean（真偽値）
この記事執筆時点（2023年7月ごろ）ではタイポグラフィやエフェクトなどの値は指定することができないのですが、少なくともFigmaのヘルプページを読むとタイポグラフィと画像は近々サポートされる予定のようです。エフェクトもないとスタイルからの移行ができないので流石にいつかサポートされるのだろうとは勝手に思っています。
また、Variablesの値として他のVariableを参照することができます。
変数の値をホバーして右クリックを押し、「Create alias」を押すと他のVariableを選択することができます。デザイントークンなどで「プリミティブな色のトークンを作って、セマンティックなトークンから参照する」のようなユースケースがあるのですが、そういった場合に便利です。
こうして作ったVariableは、当然のことながらデザインするレイヤーに適用することができます。
そして、前回解説したDev Modeでは適用されたVariableがCSSなどにも反映されて表示されて、便利です！
モードの切り替え
先ほどのCollectionのスクリーンショットでお気付きの方もいるかもしれませんが、このCollectionはモードと言って使う変数の値を切り替えられる機能を持っています。
分かりやすい例としてはダークモードです。次のようにLightとDarkでそれぞれ色の変数を定義します。
そのVariableを使ったレイヤーのモードを切り替えるだけで簡単にライトモードとダークモードを切り替えることができます。
ちなみにこのモードは無課金だと一つしか作れず（実質ナシ）、プロ以上だと4つ、エンタープライズプランまで上げると40個作れるようになります。
コードとの接続
そしてエンジニアにとって何よりエキサイティングなこととして、このVariablesはコードに読み込み／書き込みすることができます！
まず一つにプラグインやウィジェットから使うことができます。
一例としては下記のように既存のCollection、Variableの読み取りができます。
const localCollections = figma.variables.getLocalVariableCollections();
const { variableIds } = localCollections
const variable = figma.variables.getVariableById(variableIds[0])
また、新しくCollectionやVariableを足すことができます。
const collection = figma.variables.createVariableCollection("new-collection")
collection.renameMode(collection.modes[0].modeId, "light")
const colorVariable = figma.variables.createVariable("color-variable", collection.id, "COLOR")
そして嬉しいことにREST APIでも読み書きできます！！
しかし、プラグインやウィジェットに関してはプラン関係なく利用できますが、REST APIに関してはエンタープライズプラン（1編集者あたり11000円／月）限定の機能になっています。
このためだけにエンタープライズに上げるのは大体の組織で費用感的に難しい気がするので、他のセキュリティなどの要件とセットでの検討になるかとは思います。しかし、API経由でできることで都度プラグインなどを実行して同期する煩雑さが無くなるので一度検討してみるのもいいかもしれません。
