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