FigmaのVariables活用入門: ダークモードの効率的な作成と管理

はじめに

enechainプロダクトデザインデスクのマネージャーの近藤です。現在はプロダクトの大型アップデートやデザインシステムの拡充に日々奮闘しています。

昨年末のアドベントカレンダーでダークモードの歴史や状況について記事（ダークモードを巡るあれこれ：ダークモードの明るい未来）にまとめたのですが、その中で以下のように書いていました。

今年になってFigmaに追加されたVariablesという機能により、ダークモードへ対応するためのカラーの管理が劇的に楽になりました。

しかし、具体的な使い方については触れていなかったので、今回の記事でVariablesを使用してダークモードテーマを実際に作成し管理する具体的な手順を詳しく解説します。この記事はダークモードに関する記事シリーズの第2弾となります。

※この記事中のFigma機能の表記

• 基本的に Variables, Styles, Variable Mode… のように英語で表記します
• 実際の画面キャプチャを使っての解説ではFigma日本語版UIの表記にならって、バリアブル、スタイル、バリアブルモード… と表記します

Figmaに新しく追加されたVariables

昨年6月の大型アップデートでVariablesという機能が追加されました（現在はオープンベータ）。Variablesはいわば「変数」です。Figma上で変数を扱えるようになることで、デザイントークンを管理しやすくなり、デザインシステムの構築をサポートします。また、より高度でインタラクティブなプロトタイプを作成するのに役立ちます。

現在、VariablesではColor, Number, String, Booleanを扱うことができます。その他にもTypographyのサポートなどが今後予定されているようです。

カラー管理におけるStylesとVariablesの違い

新しくVariablesでColorを扱えるようになりましたが、これまでのStylesとVariablesでは色の扱いはどのように変わるのでしょうか。

Figma Learnでちょうどわかりやすく説明されているので確認してみましょう。

バリアブルとスタイルの違い – Figma Learn - ヘルプセンター

ざっくり抜粋すると重要な点は以下です。

• Variablesでは1つの「色」には単一の値のみ指定できる
• Stylesでは単一の値に加えて、複数のカラー値（塗りつぶし、グラデーション、画像、GIF、動画、ブレンドモード）を指定できる
• Variablesは Variables Modeに対応し、テーマを切り替えて利用することができる
• Variablesではカラーの値に別のカラーをエイリアス（ショートカット）として指定できる
  • これによってSemanticカラーの値にPrimitive (Global)カラーをエイリアスとして指定することで、よりシステマチックにカラーのトークンシステムを構築することができる
• Stylesではエイリアスをつけることができない

Variablesでは単一の値のみ指定できる、といいうのはStylesに比べると一見不利にも見えますが、この制約とエイリアスのおかげで、複雑でマルチなテーマ構成であっても管理しやすくなり、ダークモードの構築にも使いやすくなりました。

今回は Variables Mode とエイリアスを使ってダークモードのテーマを構築していきます。

Variablesを使ってダークモードテーマを作る

デモ用に作成したこちらの画面デザインをVariablesを使ってダークモードに対応させる手順を解説していきます。（デモ用デザインのダミーの画像は Unsplashから、テキストは宮沢賢治の「ポラーノの広場」を使用しています）

VariablesはFigmaを日本語で利用している場合は「バリアブル」と表示され、右のパネルからローカルファイルのバリアブルを開き、設定することができます。

現在利用できるバリアブルにはカラー（Color）、数値（Number）、文字列（String）、ブーリアン（Boolean）があります。今回はこの内の「カラー」のみを使用します。

新しくカラーのバリアブルを追加するとこのように、名前と値がセットで設定できるようになります。名前は途中に「/」を入れることで階層を作り、グループ化して扱えるようになります。

各UIの塗り、線の色に作成したバリアブルを指定した状態です。右のパネルの「選択範囲の色」で、全ての色がバリアブルでの指定になっているのが確認できると思います。

作成してあった画面はいわゆるライトモードですので、次にダークモードに対応できるように新しい「バリアブルモード」を作ります。

新しいバリアブルモードを追加するとこのように、 Mode1, Mode2として各色の名前に対して2つの値を設定できるようになります。

Mode名をここでは Light Mode, Dark Modeとしました。

バリアブルモードが複数あると、Frameのレイヤー設定で作成済みのモードを選択できるようになっています。

作成していた画面のフレームを複製して、1つをLight Mode, もう1つをDark Modeとした状態です。レイヤーリストでも確認できるようになります。

画面Frameは全く同じ構成で、塗りと線の色にはバリアブルのトークンが設定されています。Dark Modeの値を変えることで、同じトークンが設定されているUIの色を一括で変えることができるので、各トークンの色をダークモード用に設定していきます。

一通り色の指定が終わるとこのように同じ画面のライトモードとダークモードを用意することができました。

バリアブルの設定はまとまった状態で「コレクション」として別々のセットとして扱うことができるので、先程のテーマ管理のバリアブルコレクションと別に、Primitiveカラーのコレクションを作っておくこともできます。

今回の例で、コレクション「Theme」ではカラーをSemanticに扱っています。カラーの値にこのようにPrimitiveトークンを設定（エイリアス）することで、よく使われているSemantic / Primitiveなカラーのシステムを拡張する形で、新しいモードとしてダークモードを追加することができます。

親Frameにバリアブルモードの設定がされている場合、Frame内に配置されるモード指定なしの子オブジェクトは親の設定が反映されるので、このように同じUIの配置を変えるだけでモードを切り替えることも可能です。

以上のデモではFigmaのComponent / Instanceの機能は使っていませんでしたが、Main Componentの色にVariablesを設定すれば、Instanceに一括で変更を反映させることができ、より複雑に構築されたUI、デザインシステムに対してもダークモードを追加することは容易です。

レイヤーパネルのモードを切り替えることでいつでも表示を切り替えることができるので、全画面を複製する必要もありません。画面仕様がまだ固まっていない状態でも安心してダークモードのカラースキームを構築することができます。

Variablesはまだベータなの？

Variables機能はまだオープンベータです。ただ、これは機能自体を搭載するかどうかをテストしているわけではなく、より柔軟で拡張性に富む機能とエクスペリエンスの向上を目指して追加のプロパティや機能が開発されているという意味でベータ扱いとなっているようです。Figmaのこれまでの機能追加例を見ても、Variablesが今後急に廃止され利用できなくなることは恐らくないでしょう。

What Figma features are in beta? – Figma Learn - Help Center

注意する点としては、Variablesで構築されたデザイントークンを公式の機能として、開発連携のために書き出す機能はまだありません。これまで利用されていたStylesで構築していたカラートークンを書き出すためのプラグインでVariablesに対応しているものもありますが、まだ対応が十分でないもの、不具合が残っているものなどもあるようなので、プラグインの選定やテストは十分に行うようにしてください。

まとめ

Figmaの新機能Variablesのおかげでダークモードをデザイナーが扱うのはとても容易になりました。これにより、ライトモードで作成したデザインをダークモードに簡単に変換し、一貫した品質を保つことが可能です。さらに、ライトモードやダークモードに限らず、さまざまなデザインテーマを作成することもできます。ただし、色の設計やテーマの構築は引き続きデザイナーの役割であり、ブランドの体験、アクセシビリティ、ユーザーのニーズに合わせた設計が重要です。ダークモードに高度に対応するためにはこれまで構築したデザインのelevationやopacity、ブレンドモードの考え方などでアップデートが必要になるケースも出てくるかもしれません。これらのトピックについても、今後ブログで取り上げる予定です。

enechainでは一緒に事業を拡大していける仲間を絶賛募集中です。ダークモードやカラースキームなどデザインについて取り組みながら、新しいエネルギーの取引と価値を一緒に作っていきたいチャレンジングなデザイナー、エンジニアの応募をお待ちしています！