Figmaの新機能であるスタイル変数（Style Variables）は、複数のデザイン要素を一括で変更できる非常に強力な機能です。特に★テーマ切り替え、ブランドカラーの統一、タイポグラフィの管理★などに威力を発揮します。この記事では「Figma スタイル 変数 使い方」に関する疑問をすべて解消し、リアルなワークフローで使いこなせるようになるテクニックを丁寧に解説します。初めて使う人からデザインシステムを構築する上級者まで役立つ内容です。
目次
Figma スタイル 変数 使い方とは何か
まず最初に理解すべきは、Figmaにおけるスタイルと変数の違いです。スタイル（text styleやcolor styleなど）は複数のプロパティをまとめて定義しており、一度適用するとフォントサイズ、ウェイト、カラーなど複数の要素が同時に更新されます。変数（variables）は単一の値を持ち、カラー、数値、文字列、真偽値などの型があり、モード（例えばライト／ダークテーマ）を切り替えることで値を切り替えられる特徴があります。これにより、デザインの柔軟性とスケーラビリティが向上します。
スタイルと変数の基本的な違い
スタイルは複数の関連プロパティを含めて一括管理できる一方、変数は一つの数値やカラーなどシンプルな値を管理します。スタイルはコンポーネントに対して一度に複数のプロパティを設定できますが、変数は単一の値であり、必要に応じてスタイルの中で使ったり他の変数と組み合わせたりすることが可能です。
変数の型とモードとは
変数にはカラー、数値（number／float）、文字列、真偽値の型があります。ライトモードやダークモードなど異なるモードを設定でき、モード切り替えで対応する値が自動的に切り替わるようになります。例えば背景色やテキスト色をモードごとに定義しておけば、全体テーマを切り替えるだけでデザインを更新できます。
いつスタイルを使い、いつ変数を使うべきか
もし複数のプロパティをまとめて管理したい場合や既存のデザインに統一性を持たせたい場合はスタイルを使うべきです。一方、カラーパレットのテーマ切り替えやブランドカラーのルールを柔軟に変更したい場合は変数が有効です。多くのプロジェクトではスタイルと変数を組み合わせて使うことで最大の強みを発揮します。
Figmaでスタイル変数を設定する手順と具体例
ここでは、Figmaでスタイル変数を設定する実際の手順を解説します。カラー変数、数値変数、文字列変数などをどう作成し、デザインに適用していくかを具体的に示します。最初から最後まで実際に触りながら追える内容です。
変数の作成方法
まずは新しい変数を作る方法です。Figmaのファイル内でローカル変数（Local Variables）を開き、カラーや数値、文字列の型を選択して変数を追加できます。名前とモードを設定できるので、たとえばライト／ダークのモードを作成して異なる値を定義することが可能です。変数の命名ルールを統一しておくことで後から探しやすくなります。
変数をデザイン要素に適用する方法
変数を使うには、オブジェクトを選択して右サイドバーのFillやStrokeなどのプロパティから変数を選ぶか、名前で検索して適用できます。カラー変数であればソリッドカラー、ストローク、影のカラーなどに適用可能です。数値変数ならフォントサイズや余白、コーナー半径などで使えます。文字列変数や真偽値変数を使えばフォントファミリーやテキスト内容、可視性の制御も可能です。
スタイルを変数でバックアップする方法
既存のスタイルがある場合、それを変数でバックアップしておくと、スタイルの可変性が向上します。スタイルのプロパティの中でカラーなどを変数に置き換えておけば、後から変数値を変更するだけで対応するスタイルがすべて更新されます。こうすることでブランドカラー変更などが発生した際の作業量を大幅に削減できます。
テーマ切り替えやブランドカラー変更の活用テクニック
デザインを作る際、ライト／ダークテーマ切り替え、複数ブランドのバリエーション、アクセシビリティ対策などに活用できるテクニックを紹介します。これらはユーザー体験やプロダクトの見た目を統一しながら柔軟に運用できる方法です。
モードを使ったテーマ切り替え
変数のモード機能を使うと、ライトモードとダークモードなど異なるテーマ用の色やその他の値を定義できます。たとえば変数にモード「Light」と「Dark」を設定し、それぞれ背景色やテキスト色を定義しておけば、デザイン全体でモードを切り替えるだけで一括更新が完了します。テーマ切り替えの管理がシンプルかつ安全になります。
ブランドごとのカラーセット管理
複数ブランドを扱うプロジェクトでは、ブランドごとのカラーセットを変数コレクションとして定義しておくと便利です。ブランドA、ブランドBなどに応じたカラー変数グループを用意し、それぞれのブランドテーマで使い分けることで、ブランドの統一感を保ちつつ差別化できます。
アクセシビリティ・コントラスト比を意識した変数設計
色を変数で管理する際にはアクセシビリティ基準のコントラスト比も考慮してください。テキストやアイコンの色が背景色と十分な差異を持つよう、ライト／ダークモード双方でチェックしておくことが重要です。変数モードの中でコントラスト比のテストを行う習慣をつけると、障害を持つ人にも配慮したデザインになります。
スタイル変数を使いこなすための応用＆ベストプラクティス
ここではプロジェクトやデザインシステムで実際に使いこなすための応用技や落とし穴を含めたベストプラクティスを紹介します。変数やスタイルをただ作るだけでなく、運用を見据えて整備しておくことが大事です。
変数・スタイル体系の整理と命名規則
変数およびスタイルの名前は一貫性が鍵です。カラー変数であれば「brand/primary」「neutral/foreground」「ui/background」などプレフィックスを決めて整理するとわかりやすくなります。スタイルの命名も同様に、テキストスタイルなら「Heading/1」「Body/Regular」など階層や用途で構造を持たせると後々メンテナンスしやすくなります。
デザインシステム内での変数とスタイルの使い分け方
大規模なデザインシステムでは、変数をプリミティブな単位で定義し、それをスタイルの中で組み合わせて使う構造が望ましいです。たとえばプリミティブカラー変数を基にセマンティックカラー変数を定義し、最終的にそのセマンティック変数をスタイルに反映させます。これにより変数を変更したときの影響範囲をコントロールしやすくなります。
変数のスコープ設定と制限の理解
変数にはスコープ設定があり、特定のプロパティにだけ適用するよう制限できます。例えば数値変数で余白やコーナー半径に限定させたりすることで誤用を防止できます。ただし現在はカラー変数など一部の型ではスコープ制限の機能が完全ではないため、プロパティによる制限がまだ反映されないケースがあることも把握しておいてください。
変数とスタイルの互換性や限界
現在カラー変数はソリッドやグラデーションのストップなどに使うことができますが、グラデーション全体を変数として定義することは制約があります。スタイル内で使われる変数を後から変更してもスタイルの一部が希望通りに変わらない場合があるため、変数とスタイルの構造を慎重に設計する必要があります。
よくある質問（FAQ）とトラブルシューティング
スタイル変数を使い始めるとき、疑問や問題が出てくることがあります。ここでよく寄せられる質問とその解決策をまとめます。実務で陥りやすい落とし穴も含めました。
スタイルと変数を誤ってデタッチしてしまう問題
オブジェクトに適用されたスタイルや変数を誤ってデタッチすると、そのスタイル・変数とのリンクが切れてしまい、一括変更が効かなくなります。特に数値変数の余白やコーナー半径などで、手動でプロパティを編集するとデタッチされることが多いので注意が必要です。プロジェクト開始時にスタイルを設定し、できるだけ手動編集を避ける運用ルールを定めておくと効果的です。
グラデーションや影など複合的なスタイルで変数が使えないケース
グラデーションの各ストップや影の色にはカラー変数が適用できる一方で、グラデーション全体を変数で置き換えることは現時点では制限があります。スタイルとしてグラデーションを保持しつつ、その中のカラー値を変数管理する方式を取るのが一般的です。これによりテーマ切り替えなどで柔軟性を保てます。
テキストスタイルとカラー変数の組み合わせの限界
テキストスタイルにフォントサイズ・ファミリー・ウェイトなどを盛り込むことはできますが、色（カラー）をテキストスタイルに含めて変数と完全に連携させる機能は制限があることがあります。そのため、テーブルや見出しなどで色を統一したい場合は、テキストスタイルだけでなく、カラー変数を組み合わせて使う設計が現実的です。
変数を他のファイルやチームライブラリで共有する方法
変数とスタイルは、チームライブラリに公開することで他のファイルでも使えるようになります。公開されたライブラリから変数を参照できるよう設定し、必要に応じて新しいファイルに貼り付けるときにその変数やスタイルを保持することが可能です。ただし未公開の変数は他ファイルで使えないため、ライブラリを整理して共有を前提に設計しておくことがポイントです。
まとめ
「Figma スタイル 変数 使い方」は、デザインの統一性と柔軟性を高めるための強力な機能です。スタイルと変数の役割の違いを理解し、カラーモード・テーマ切り替え・ブランド管理などの要件に応じた運用を設計することで、一度作ったデザインを将来にわたって簡単に更新できます。
カラー変数や数値変数、文字列変数をうまく使ってスタイルのバックアップを取ること、変数の命名規則やスコープ制限を設けて誤用を防ぐこと、既存スタイルへの適用やライブラリ共有などを含めた運用ルールを決めておくことが成功の鍵です。
この記事で紹介したテクニックを参考に、あなたのプロジェクトやデザインシステムでスタイル変数を積極的に活用してみてください。一歩先のデザイン管理を実現できます。
コメント