はじめに
こんにちは。株式会社GENEROSITYでUI/UXデザイナー、Webデザイナーとして働いています山口です。
弊社では複数の自社プロダクトを展開しており、そのプロダクトのデザイン設計や社内用フォーマットの整備などを担当しています。
多くのプロダクトでは、用意されたフォーマットにデザインを当てはめて対応するケースが多く、効率よく汎用的に活用するために、「Figma Variables」を積極的に活用しています。
「Variablesって難しそう…」「デザイナーに使ってほしいけど、どう伝えればいいかな」と感じている方もいらっしゃるかもしれません。
この記事ではVariablesの基本から具体的な利便性の活用例、どんな案件で効果を発揮するのかなどご紹介し、多くのデザイナーやエンジニアが活用できるようお手伝いします。
Figma Variablesとは？
そもそも「Variableってなんぞや？」という方のために、簡単にご説明します。
Variableはデザインや開発の中で使う「変数」のことで、デザイナーとエンジニアをつなぐ共通言語のような役割を果たします。(デザイントークンとも言います)
例えば、デザイナーが「このデザインは白でお願いします！」とエンジニアに伝えたとします。エンジニアは「白かぁ…じゃあ#FFFFFFだな」と考えるでしょう。
しかし、ここでVariableを定義せずにコミュニケーションを取ってしまうと、「#FFFFFFではなく、このサイトで使う白は#FDFDFDです！」と後で修正が発生したり無駄なやりとりが発生してしまいます。
ちょっと大袈裟な例ですが、このような確認や修正が行われるのは非効率的です。
そこで、こうした課題を解決するためにVariableを活用します。
例えば、#FDFDFDを「colorWhite」という変数名で定義することで、デザイナーと開発者の間で#FDFDFD=colorWhiteという共通認識が生まれます。(友達同士だけで通用するあだ名みたいなイメージですね)
「このボタンはcolorWhite（#FDFDFD）でお願いします！」
「colorWhiteですね、了解です！」
このように一貫性が保たれた正確なコミュニケーションが可能になります。
上記では色を例に説明しましたが、色だけでなく、サイズ、スペース、フォント、テキストなど様々なプロパティをVariablesで管理することができます。
Figma Variablesを見てみよう
ざっとvariableを理解した上でFigma variablesの画面を見てみましょう。
簡単にvariableを活用した管理例をご紹介します。
Figma上でローカルバリアブルを表示すると下記のように表示されます。
(今回は分かりやすく日本語を使っています)
ここではDOGボタン
とCATボタン
を一括で管理する例でご説明します。
ローカルバリアブルからデザインを管理するには、まずボタンを制作する際にvariableをプロパティにセットする必要があります。セット完了することで直接デザインを触らずにデザインを変更/管理することが可能になります。
この例だと
DOGボタン用のモード →「DOG①」
CATボタン用のモード →「CAT②」になります。
Variableを使うことで、ボタンのサイズ、テキスト内容、フォントの種類など、さまざまな要素を一括で管理できます。
例えば、ローカルバリアブルからテキストやカラーを変更すると、Figma上のデザインが一瞬で更新されます。
下の画像では「DOG」を「わんちゃん」に、赤色を「緑」に変更しています。
この一瞬で更新されるというのが大きなポイントです。
同じボタンが複数個、または複数種類存在している場合でも、複数のボタンを直接編集する必要がなく、Variableを変更するだけで一括更新できるのが大きなメリットです。
ローカルバリアブルの見方
次にローカルバリアブルの管理例を実例でご紹介します。
こちらは弊社で活用してるvariableの例です。
左の❶はグループと呼ばれる階層構造になっています。
下記は弊社で活用しているグループ例です。
グループ構成：
- Padding：テキストやオブジェクトの間隔（スペース）を定義
- Color：色の設定を一元管理
- Font：フォントの種類、サイズ、太さなどを管理
- Size：PaddingやFontで使用されるスペースやフォントサイズを管理。(他のVariableを管理する特殊な役割)
このようにvariableを活用することで、ある程度デザインに制限を持たせ、異なるデザイナーがプロジェクトに関わる際もデザインの一貫性を保つことができ、デザイナー間での差異が減り、エンジニアとの連携も円滑に行うことが可能になります。結果的にvariableを設定する事でチーム全体の作業効率向上につながります。
Figma Variablesの「モード」機能
Figma Variablesには❷「モード」機能があります。
これを活用すると、ベースのデザインを変更せずに、テキスト内容やカラー、サイズ、フォントなどを切り替えることが可能になります。
弊社のデジタルインビテーションサービス「WeCALL」(イベント予約管理システム)では、予約版と抽選版という2種類のバリエーションがあります。「ご予約フォーム」と「応募フォーム」のように、これらの文言の微妙な違いをVariableで一括管理することで、修正時の手間やミスを削減しています。
DOGボタンとCATボタンで紹介した内容と、
これらを応用することで以下のような活用も可能です
- ダークモードとライトモードの切り替え
- デバイスごとのデザイン管理（PC、タブレット、モバイル）
Variableの利点
Variablesを活用するメリットをまとめると：
- デザインの一元管理：色、サイズ、間隔、フォントなどをトークン化して管理
- 効率的な変更：一度の変更で複数の要素に反映できる
- デザインの一貫性向上：チーム間で統一感を保ちながら効率化
- 複数バリエーションの管理：ダークモードや異なるデバイスなどバリエーションの管理が容易
など、variablesを活用することでデザインの一貫性を保ちつつ、作業効率を大幅に向上させることができます。
Variables活用に向いているケース・向いていないケース
今までvariableのメリットをご紹介してきましたが、variable活用には向き不向きがあります。
まとめ
Figma Variablesは、デザインの効率化とデザインの一貫性の向上において非常に有用なツールです。
特にプロダクトやサービスのデザインでは、積極的に活用していく価値があると思っています。
慣れるまでは導入コストがかかりますが、一度使いこなせば管理がとても楽になります。
「チームでデザインを効率化したい」「一貫性を保ちたい」と考えている方は、ぜひデザイン業務に取り入れてみて下さい。(エンジニアのみなさんもデザイナーに相談してみて下さいね)
Figma公式で使い方やバリアブルについて分かりやすくまとめられているVariables Playground も参考になりますので是非。