Figmaの変数（バリアブル）でモードを切り替えられない場合は、モードの作成条件、対象プロパティへの適用、親子の指定、ライブラリの更新を分けて確認します。モードを選べるのに見た目が変わらないときは、プランの確認だけで終えず、参照先と値を調べてください。
症状別の確認先
| 症状 | 先に見る場所 |
|---|---|
| 新しいモードを追加できない | ファイルが属するチームのプラン・モード数 |
| 切り替えの項目が出ない | 選択対象・変数の適用・複数モードの有無 |
| 選べるが変わらない | 各モードの値・プロパティの参照・親子の設定 |
| モードに情報アイコンが付く | 同じ変数の版とライブラリ更新 |
この記事は2026年10月3日に確認した公式資料に基づく切り分け手順です。掲載する確認用の数値は、手元のファイルで原因を調べるための設定例です。
1. 作成できない場合は、プランとモード数を確認する
公式では、複数の変数モードを作成・使用できる対象としてEducation・Professional・Organization・Enterpriseを案内しています。コレクションごとに作成できる数もプランで異なります。現在の上限は公式の変数モードから確認してください。
変数を作れることと、追加モードを作れることは別です。一方、すでにモードを選択できる場合は、値や適用先を確認する段階に進みます。契約条件だけを原因と決めつけないようにしてください。
2. 色やサイズに、変数が割り当てられているか確認する
同じ色のHEX値を入力しただけでは、変数の参照にはなりません。変更したい塗りや寸法のプロパティに、どのコレクションのどの変数を割り当てたか確認します。色と数値など、プロパティに対応する型も必要です。変数の型・スコープ・適用方法
レイヤーでのモード切り替えは、複数モードを持つ変数が適用されていることが条件です。親フレームなどのコンテナは、その内側のレイヤーに変数が適用されているか確認します。ページ全体の切り替えは、ローカルコレクションに複数モードがあるかを確認してください。
3. 切り替わらない箇所を一つに絞る
例えば背景色だけを調べるなら、次の設定例で、変数の値と対象プロパティを照合します。既存の本番デザインを一括で置換する前に、確認用フレームへ対象を複製して進めてください。
| 確認項目 | 設定例 | 調べること |
|---|---|---|
| コレクション | Theme | 別のコレクションを切り替えていないか |
| 色の変数 | surface | 背景の塗りがこの変数を参照するか |
| Lightの値 | #FFFFFF | Darkと同じ値ではないか |
| Darkの値 | #222222 | 別名の場合、参照先の最終値も違うか |
| 切り替える対象 | 背景を含む親フレーム | 子側に別モードの指定がないか |
親を切り替えても子だけ変わらなければ、子の参照とモードを確認します。全体が変わらなければ、コレクション・値・割り当て先を確認します。色が同じという結果だけで、切り替え操作の失敗とは判断できません。
4. 子のAutoと、明示したモードを区別する
Autoの子は親の指定を継承します。親もAutoなら、指定がある上位のコンテナを辿り、指定がなければコレクションのデフォルトを使います。子を特定のモードへ明示的に設定すると、その箇所は親と異なる値を使うことがあります。
右サイドバーのAppearanceにあるモード設定と、レイヤーパネルのモード名を確認してください。ページを調べる場合は選択を解除してページ側を確認します。デフォルトの変更と、特定モードへの明示指定も区別します。明示指定した箇所は、そのモードがデフォルトでなくなっても同じモードを参照します。公式：モードと継承の仕様
5. 情報アイコンがある場合は、ライブラリの版を揃える
同じ変数の異なる版が使われていると、モードに競合が生じることがあります。まず共有元で必要な更新が公開されているか確認し、利用先で変更内容を確認して受け入れます。これらの編集・公開・更新受け入れには、対象ファイルの編集権限が必要です。
変数を使うコンポーネントが別のコンポーネントを経由している場合は、途中のファイルの更新も確認します。末端のファイルだけを更新しても、途中が古いままでは解消しないことがあります。公式：ライブラリ更新の確認と受け入れ、アセットとライブラリの更新手順
共同作業者へ伝える情報
チームのプラン、編集権限、コレクション名、変数名、モードごとの値、適用プロパティ、親と子のモード設定、情報アイコンの有無を控えます。「作成できない」「項目が出ない」「選んでも変わらない」「競合する」のどれかを添えると、確認する場所を共有できます。
よくある質問：Figmaの変数モードが切り替わらないときのチェックリスト
Figmaの変数のモードが切り替わらないときは、何から確認しますか？
モードの作成条件、対象プロパティへの適用、親子の指定、ライブラリの更新を分けて確認します。モードを選べるのに見た目が変わらないときは、プランの確認だけで終えず、参照先と値を調べます。
新しいモードを追加できないのは、なぜですか？
公式が複数の変数モードを作成・使用できる対象として、Education・Professional・Organization・Enterpriseを案内していると説明しています。コレクションごとに作成できる数も、プランで異なります。現在の上限は、公式で確認してください。
同じ色のHEX値を入力すれば、変数になりますか？
なりません。同じ色のHEX値を入力しただけでは、変数の参照にはなりません。変更したい塗りや寸法のプロパティに、どのコレクションのどの変数を割り当てたかを確認します。
親を切り替えても、子だけ変わらないときは？
子の参照とモードを確認します。子を特定のモードへ明示的に設定すると、その箇所は親と異なる値を使うことがあります。Autoの子は、親の指定を継承します。
LightとDarkで、色が変わらないのは、切り替えの失敗ですか？
色が同じという結果だけで、切り替え操作の失敗とは判断できません。LightとDarkの値が同じ値になっていないか、別名の場合は参照先の最終値も違うか確認します。
モードに情報アイコンが付くのは、なぜですか？
同じ変数の異なる版が使われていると、モードに競合が生じることがあります。まず共有元で必要な更新が公開されているか確認し、利用先で変更内容を確認して受け入れます。途中のファイルの更新も確認してください。