Figmaのバリアブルは、色や数値などを名前付きで保存し、複数のレイヤーへ適用する機能です。たとえばボタンの色を同じバリアブルへ関連付けると、元の値を変更してまとめて更新できます。
この記事では、ファイル内で管理するローカルバリアブルの作成、適用、モードの使い分けを説明します。公式情報の確認日は2026年10月3日です。掲載している既存の操作画像は2024年4月のUIで、現在の配置や名称とは異なる場合があります。
バリアブル・スタイル・コンポーネントの役割
| 機能 | 管理するもの | 用途の例 |
|---|---|---|
| バリアブル | 色・数値・文字列などの値 | 共通の余白、ブランドカラー、テーマ別の値 |
| スタイル | 複数の設定を組み合わせた見た目 | 文字サイズ・行間などを揃えたテキストスタイル |
| コンポーネント | 再利用する部品の構造 | アイコンと文字を組み合わせたボタン |
これらは併用できます。バリアブルをスタイルや部品へ適用すると、構造と共通の値を分けて管理できます。スタイルの使い方と再利用する機能の比較も参照してください。
Variablesを開き、値を作成する
現行の英語版公式資料では、左側のナビゲーションから Variables を開く方法を案内しています。以前のUIでは、レイヤーの選択を解除して右側の「ローカルバリアブル」から開きました。旧画像と入口が違う場合は、まず左側のVariablesを探してください。
- 編集権限のあるFigma Designファイルを開きます。
- 左側の
Variablesを選びます。 - コレクション内で
＋ Create variableを選びます。 - 使いたい値のタイプを選び、名前と値を入力します。
編集権限があればバリアブルの作成・編集ができます。チームライブラリへの公開やプロトタイプでの利用は、プランの条件も確認してください。Figma公式：バリアブルの作成と管理
デザインでよく使う4タイプ
| タイプ | 保存する値 | 適用する例 |
|---|---|---|
| Color | 色と不透明度 | 塗り、線、テキストの色 |
| Number | 数値 | 幅・高さ、角丸、間隔、文字サイズ |
| String | 文字列 | ボタンのラベル、フォント名 |
| Boolean | true／false | レイヤーの表示・非表示 |
公式のタイプ一覧には、Figma Motionのアニメーション用のTimingとEasingも含まれています。この記事の練習対象は、画面の色・寸法・文字・表示を扱う上記4タイプです。Figma公式：タイプと適用先
Colorを塗りへ適用する
Colorの設定例として、color/brand にブランドカラーを登録します。対象レイヤーの塗り設定でバリアブルの選択を開き、この値を適用します。もう1つのレイヤーにも同じ値を適用すると、共通の色を管理できます。
Numberを余白や角丸へ適用する
Numberは、たとえば space/card に16、radius/button に8を登録する用途があります。対象の間隔や角丸の入力欄でバリアブルを選びます。設定値は用途に合わせて決めてください。
StringとBooleanを使う
Stringは、共通のラベルやテキストを管理します。Booleanは true と false の値でレイヤーの表示を管理します。画面の見た目を作るための値と、プロトタイプ中に操作で変更する値は、使い方を分けて考えます。
コレクション・グループ・エイリアスで整理する
コレクションは、関連するバリアブルとモードをまとめた単位です。たとえば色を管理するThemeと、余白を管理するSpacingを分けると、変更する対象を探しやすくなります。グループはコレクション内の値を分類するために使います。
エイリアスは、同じタイプの別のバリアブルを値として参照する設定です。たとえば color/button/background が color/brand を参照するようにすると、部品で使う用途名と、元の色の値を分けて管理できます。Figma公式：エイリアス
Light・Darkのモードを切り替える
モードは、同じバリアブルに場面別の値を持たせる仕組みです。設定例として、背景色の surface/page にLightでは白、Darkでは濃い色を登録します。文字色も別のバリアブルで用意すると、背景と文字を一緒に切り替えられます。
Variablesでコレクションを開き、列見出しの右側にある New variable mode からモードを追加します。各モードへ値を入力したら、バリアブルを適用したレイヤー、またはそのレイヤーを含むフレームを選び、右側のAppearanceから Apply variable mode でコレクションとモードを選びます。Figma公式：モード
モードを適用しても、直接入力した色や数値まで自動的に変わるわけではありません。切り替えたいプロパティへバリアブルを適用しているかを確認します。子レイヤーが独自のモードを持つ場合は、その指定も確認してください。
値の変更とプロトタイプ操作を分ける
バリアブル自体の値を編集する操作、デザイン上でモードを選ぶ操作、プロトタイプ中に値やモードを変えるアクションは別の操作です。プロトタイプの Set variable で個別の値を変更する場合と、Set variable mode でコレクションのモードを変える場合を区別します。
プロトタイプのバリアブルやチームライブラリへの公開は、公式ガイドでEducationまたは有料プランの機能として案内されています。利用可能なモード数もプランによって異なるため、所属チームの条件を確認してください。Figma公式：利用条件
適用できない・切り替わらない場合
- タイプと適用先が合っているかを確認します。色の入力欄にはColorなど、対応する値を使います。
- 候補に出ない場合は、そのバリアブルのScopeが適用先を許可しているか確認します。
- 値が変わらない場合は、対象のプロパティが同じバリアブルへ関連付いているか確認します。
- モードだけが変わらない場合は、親子レイヤーのモード指定と、コレクションの値を確認します。
モードの詳しい切り分けはバリアブルのモードが切り替えられない場合へ、文字の編集は文字サイズが変更できない場合へ進んでください。関連する機能はFigmaの使い方まとめから探せます。