ユースケース
以上、Variablesは何ができるのかを解説してきましたが、それではこの機能を使ってどんなことが実現できるかを妄想していきましょう！
ダークモード
これは先ほど例として紹介したので割愛しますが分かりやすいユースケースですね。
デザイントークン
デザイントークンとはデザインにまつわるさまざまな値（色、スペーシング、タイポグラフィ）に意味を込めた名前と共に定義していったものです。
詳しくは、昔記事に書いたのでご存じなければ是非ご参照ください。
昔はFigmaのスタイルだけではこのデザイントークンの役割をカバーしきれず、Token Studioというサードパーティのプラグインを使う必要があったのですが、これが晴れてFigma標準の機能でカバーできるようになりました。Token Studioはプラグインなので逐一開くのが手間だったのですが、この1ステップが減ったのはかなり大きいように感じます。
ただ、冒頭に述べた通りタイポグラフィやエフェクトなどはまだVariableとして定義できないので、そこは今後のアップデートに期待です。
多言語対応&テキストの一元管理
多言語対応ができるのも嬉しいポイントかなと思います。次のように言語をモードとして作り、テキストを切り替えれば多言語対応することができます。
また、これはモードとは関係ないのですが、テキストの一元管理ができるようになるのも夢が膨らみます。これはまだ私自身が実運用していないので絶対に価値があるかは保証できないのですが、基本的にどんなプロダクトでもライティングの一貫性のほか、デザインとコードでのテキストの違いなどが発生しているのではないかと思います。
それはライティングスタイルが定義されていなかったり、デザインにない文言をエンジニアが適当に書いたり、コードに起こした後に文言に修正が入ってデザインには反映されなかったりなど。
それを単一のテキスト情報をまとめたファイルを用意し、コードでも参照するほか、デザインでもVariablesとして参照する形にすると一元管理ができるうえ、後から細かい文体の調整などをしていく時にもデザインとコード二重メンテする必要がなくなってクオリティの向上に繋がるのではないかと考えています。
正直まだ実運用で試せていないので、本当に価値があるか（テキストのメンテコスト&クオリティアップになるか＞Variablesのメンテコスト）はまだ分からないのですが、結構有望な使い方なのではないかと感じています（これやるならREST APIが本当に欲しい……）。
マルチテナント
また、これはプロダクトにもよるのですが、マルチテナントかつテナントによってテーマがそれなりに変わるような場合にはかなり有用な使い方ができるのではないかと思います。
ただ、エンタープライズプラン未満だと作れるモードが4つまでなので対応するテナントの数が増えてくると費用感の相談だったり、また別の工夫が必要になってきたりするのかなという所感です。
おわりに
以上、大まかなVariablesの紹介とユースケースについて考えてみました。
このVariablesは特にモードが存在するようなUIのデザインのメンテナビリティに大きく貢献しますが、エンジニア目線でもデザインとコードで同じ値を参照することができてかなり嬉しい機能になっているなと感じております。
おそらくこのVariablesを活用するためのプラグインやウィジェットなどが今後コミュニティに色々出てくるとは思いますが、自分でも自社のプロダクトや開発プロセスに合わせてプラグインやウィジェットなどが作れるとより捗るのではないかと思います。
次回は、プログラマブルにFigmaのデータを操作する方法としてREST API、プラグイン、ウィジェットの使い方・作り方をご紹介します。お楽しみに！
