Figma変数を使うと、色・余白・角丸の一元管理が可能になり、変更1回で全要素に自動反映されます。Figma公式ヘルプでは変数をプロジェクト横断で使える動的な値と定義しており、この記事では作成から適用・テーマ切り替え・開発連携まで5ステップで解説します。
▶ 3日で初案件PR
この記事でわかること
COLOR・NUMBER・STRING・BOOLEANの4タイプと使い分けを理解できる。コレクション・モード・エイリアスの3概念を習得し、ダークモード切り替えを15分で実装できる。スコープ設定・命名規則・2層構造の3つの実務ハックで変更対応時間を大幅に削減できる。
今の仕事について、一番近いものは？
この記事の結論
Figma変数の核心は「値を1箇所で管理して全体に自動反映させる仕組み」です。まずはブランドカラーと余白の2種類だけを変数化すれば、フリーランス案件レベルの運用はすぐに始められます。コレクション・モード・エイリアスの3概念を理解すれば、ダークモード対応や開発連携まで一気に応用できます。
今日やるべき1つ
Variablesパネルを開き、ブランドカラー1色を変数として登録する（10分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 変数が何かを理解したい | Figma変数は4タイプで値を管理 | 3分 |
| まず作ってみたい | Figma変数は3操作で作成から適用 | 5分 |
| コレクション・モードが理解できない | Figma変数はコレクションとモードで2層構造 | 5分 |
| 自分の案件に使えるか判断したい | Figma変数の導入は規模と頻度で判断 | 3分 |
| ダークモードに対応したい | Figma変数は5つの仕組みで運用を自動化 | 7分 |
| 開発側との命名ルールを決めたい | Figma変数は5つの仕組みで運用を自動化 | 7分 |
Figma変数は4タイプで値を管理
変数は「動的な値」を名前付きで保存し、プロジェクト全体にリンクさせる仕組みです。更新するとリンク先の要素に自動反映される点がスタイルとの最大の違いで、保守コストを大幅に削減できます。
変数とスタイルは管理対象が異なる
Figmaには「スタイル」と「変数」の2種類の管理機能があります。スタイルは色・エフェクト・テキストスタイルなどの見た目の設定を保存し、変数はそこで使う「値そのもの」を保存します。「プライマリカラー」というスタイルの中身の色値（#1A73E8など）を変数として管理するイメージで、見た目の設定はスタイル、その設定が参照する値は変数と役割を分離することで、テーマ切り替えや大規模変更に強い構造を作れます。
変数にはCOLOR・NUMBER・STRING・BOOLEANの4タイプがあります。COLORは塗りや線の色、NUMBERは余白・角丸・サイズなどの数値、STRINGはコンテンツ文字列やバリアント名、BOOLEANはレイヤーの表示・非表示の切り替えに使います（Figma公式ヘルプ「バリアブルとコレクションの作成と管理」）。4タイプを理解しておくと、後述のスコープ設定やエイリアス設計がスムーズになります。
スタイルより変数が優れている3場面
変数がスタイルより有利になる代表的な場面は3つです。
第一に、ライト/ダークモードの切り替えのように「同じ設計で値だけ差し替えたい」場合です。変数のモード機能を使えば、レイヤー構造をいじらずに全体のカラーパレットを入れ替えられます。第二に、余白や角丸などの数値を組織のルールとして統一したい場合です。直値で書かれた「16px」が各コンポーネントに散在していると変更が大変ですが、変数1つを更新するだけで全体に反映されます。第三に、Figmaの変数名をそのままコードのトークン名にマッピングしたい開発連携の場面です。スタイルにはコード構文設定がないため、変数の方が開発側との連携に向いています。
スタイルは「1つのコンポーネントで使う見た目の設定を保存する」用途、変数は「プロジェクト全体で参照する値を一元管理する」用途と覚えると使い分けがしやすくなります。小規模案件でも変数化を始めることで、仕様変更の対応時間を削減できます。フリーランスとして作業効率を上げる仕組みを早い段階から整えておくと、同時に複数案件を抱える際にも対応しやすくなります。
変数が向いている用途と向いていない用途
変数が最も効果を発揮するのは、プロジェクト内で繰り返し参照する値です。ブランドカラー・共通の余白サイズ・角丸の半径などが代表例で、これらは1回変数化するだけで全コンポーネントへの波及効果が大きくなります。一方、ページ固有のテキストやそのデザインでしか使わない1回きりの値は変数化の費用対効果が低く、直値のままで問題ありません。再利用頻度の高い値から優先順位をつけて変数化してください。
CHECK
▶ 今すぐやること: 自分のデザインファイルを開き、何種類の色値・余白値がバラバラに使われているか確認する（5分）
Q: 変数はFigmaの無料プランでも使えますか？
A： 変数の作成・適用自体は一部機能が有料プラン限定ですが、基本的なCOLORとNUMBER変数はFreeプランでも利用できます。モード機能はProfessional以上のプランが必要です。詳細はFigmaの公式プライシングページでご確認ください。
Q： スタイルから変数への移行は一気にやるべきですか？
A： 既存案件では一気に移行せず、まず新規コンポーネントから変数を使い始める段階的な方法が安全です。既存のスタイルを変数に置き換えるときは、影響範囲の確認を先に行ってから着手するとトラブルを防げます。
Figma変数は3操作で作成から適用
基本操作は「作る・名前をつける・要素に適用する」の3ステップで完結します。Figmaの公式ヘルプに沿って手順を整理すると、10分以内に最初の変数を動かせます。
VariablesパネルからCOLOR変数を作る手順
Variablesパネルは右サイドバー上部のリソースアイコン（格子状のアイコン）をクリックするか、メニューの「Resources > Variables」から開けます。パネルが開いたら「+ New variable」ボタンをクリックし、タイプとして「Color」を選択します（Figma公式ヘルプ「バリアブルとコレクションの作成と管理」）。
名前を入力する際は「見た目（blue-500）」ではなく「役割（primary/action/default）」で命名するのが実務のポイントです。名前を確定したら、カラーサンプルをクリックして値を設定します。ブランドカラーの#1A73E8を入力すれば、最初のCOLOR変数が完成します。
要素に変数を適用する2つの方法
作成した変数を要素に適用する方法は2通りあります。1つ目は右サイドバーの塗りや線のカラーピッカーを開き、右上の変数アイコン（小さな菱形）をクリックして変数を選択する方法です。2つ目はVariablesパネルから変数名を直接キャンバス上の要素にドラッグする方法で、複数要素に一括適用したい場面で便利です。どちらの方法でも、適用後は右サイドバーのカラー表示が変数名に変わり、リンクされていることを確認できます。
適用した変数の値を後で変更するには、Variablesパネルで変数の値を書き直すだけです。変更は即座にリンク先のすべての要素に反映され、手動で各要素を修正する作業が不要になります。10箇所に使われているプライマリカラーを変更する場合、変数なしなら10回の手作業が必要なところ、変数なら1回の修正で完了します。
NUMBER変数で余白・角丸を管理する
余白（spacing）と角丸（radius）もCOLOR変数と同じ手順で作成できます。タイプをNUMBERに設定し、値として「8」「16」「24」などの数値を登録します。コンポーネントの「Auto layout」のパディング設定でも変数を参照できるため、デザインシステムの余白体系を変数で統一すると、間隔の一貫性が保たれます。
最初に変数化すべき候補は「ブランドカラー」「共通余白（8・16・24pxの3段階）」「角丸（4・8pxの2種類）」です。
CHECK
▶ 今すぐやること: Variablesパネルでブランドカラー1色をCOLOR変数として登録し、ボタンコンポーネントの塗りに適用する（10分）
Q: 変数を適用した要素はオーバーライドできますか？
A： はい。変数を適用した要素でも、ローカルでオーバーライドは可能です。ただし変数の元の値を変更した場合、オーバーライドされていない要素には自動反映される一方、オーバーライドした要素には反映されません。
Q： 変数はコンポーネントの外でも使えますか？
A： 使えます。コンポーネント外のフレームやテキスト、図形にも同様に適用できます。再利用性を高めるには、コンポーネント内で変数を使う設計の方が管理しやすくなります。
Figma変数はコレクションとモードで2層構造
コレクションとモードは、変数の「整理棚」と「引き出し」の関係です。「コレクション＝カテゴリ」「モード＝バリエーション」と考えると整理しやすく、この2つが理解できるとダークモード対応やブランド別テーマ管理など、本格的な変数運用への扉が開きます。
コレクションは変数の分類単位
コレクションは、変数をまとめて管理するグループです。1ファイル内に複数のコレクションを作成でき、「Colors」「Spacing」「Typography」の3コレクションに分けると、変数が増えても探しやすい状態を維持できます。コレクション内の変数は、名前をスラッシュ区切りで階層化できます（例: color/primary/default、color/primary/hover）。
フリーランス案件では、コレクションを増やしすぎると管理を追えなくなることも珍しくありません。最初は「Colors」「Sizing」の2コレクションに絞り、案件の規模が大きくなった段階でTypographyやComponentsのコレクションを追加する段階的な方針が現実的です。
モードで同じ変数に複数の値を持たせる
モードは、1つのコレクション内で「同じ変数名に対して異なる値を設定する」機能です。ColorsコレクションにLightとDarkの2つのモードを設定すると、「color/primary/default」という変数に対して、Lightモードでは#1A73E8、Darkモードでは#82B4F9という異なる値を持たせられます。キャンバス上でフレームのモードを切り替えるだけで、全体のカラーが即座に入れ替わります。
モードは1コレクションにつき最大40個まで設定でき、Light/Darkの他にも「ブランドA」「ブランドB」のような複数テーマ管理にも応用できます。ただし、モードが増えると管理コストも比例して増えます。フリーランス案件では、クライアントから明確に要件として提示された場合（ダークモード対応・多言語展開など）にのみモードを採用し、そうでない場合は1モードで運用するのが現実的なラインです。
エイリアスは「参照の参照」で変数を階層化する
エイリアスは、ある変数の値として別の変数を参照させる仕組みです。「primitives/blue/500」という色値を直接持つ変数（プリミティブ変数）を作り、「color/primary/default」という変数がその値を参照する（エイリアス）構造を作ると、ブランドカラーが変わったとき「primitives/blue/500」の値を1回書き換えるだけで全体に反映されます。
エイリアスを活用する実務上の典型的な構造は「プリミティブ（生の値）→ セマンティック（役割名）→ コンポーネント（適用先）」の3層です。小規模案件では3層すべてを作る必要はなく、「セマンティック変数がプリミティブ変数を参照する」2層構造で十分なケースがほとんどです。
CHECK
▶ 今すぐやること: Variablesパネルで「Colors」コレクションを作成し、Light/Darkの2モードを設定して各モードに異なる背景色を登録する（15分）
Q: モードを切り替えるにはどう操作しますか？
A： キャンバス上でフレームを選択し、右サイドバーの「Variables」セクションにあるコレクション名の横のモードアイコンをクリックすると、モードを切り替えられます。フレームごとに異なるモードを設定できるため、Light/Darkの比較をキャンバス上で並べて確認することも可能です。
Q： エイリアスとグループ名（スラッシュ区切り）の違いは何ですか？
A： スラッシュ区切りは表示上の階層整理（フォルダ的な分類）で、エイリアスは変数の値として別の変数を参照させる機能です。スラッシュ区切りは見た目の整理、エイリアスは値の依存関係の構築と理解すると使い分けがしやすくなります。
PR提供: 日本デザインスクール（デザスク）
Figma変数の導入は規模と頻度で判断
変数導入には初期設定コストが発生するため、案件の性質によっては費用対効果が見合わない場合もあります。以下の3問で判断すると、迷いなく意思決定できます。
Q1: 案件期間は2週間以上ありますか？
Yes → Q2へ進んでください。No → 変数化は不要です。直値で対応し、納品後のメンテナンス性より初速を優先してください。
Q2: ブランドカラーや余白が複数コンポーネントで繰り返し使われますか？
Yes → Q3へ進んでください。No → 変数化は不要です。繰り返し使われない値は変数化しても管理コストだけが増えます。
Q3: 仕様変更（色変更・モード追加）が案件中に発生する可能性はありますか？
Yes → 変数導入を推奨します。変更コストの削減効果が初期設定コストを上回ります。No → 最小限の変数化（ブランドカラーのみ）で対応してください。エンジニア連携が必要な案件はコード構文の設定も追加します。
Result A（Q3 Yes）: フル変数運用
Colorsコレクションを作成し、コアカラーとUIカラーをエイリアスで2層化します。余白・角丸のNUMBER変数も追加し、ダークモードが要件なら2モードを設定します。初期設定に30〜60分かかりますが、仕様変更対応の累積削減時間がそれを上回ります。
Result B（Q3 No、連携なし）: 最小限変数化
ブランドカラーのみCOLOR変数として登録し、コンポーネントに適用します。NUMBER変数やモードは不要です。変数化による保守性向上を体験するための「練習」として位置づけると、次の案件での応用が楽になります。
Result C（Q3 No、エンジニア連携あり）: 連携重視の最小限変数化
ブランドカラーをCOLOR変数として登録し、コード構文（Code syntax）を設定します。エンジニア側のトークン名に合わせた変数名を付けることで、デザインと実装の命名ズレを防げます。初期設定は15〜20分程度です。
CHECK
▶ 今すぐやること: 進行中または次の案件について、上記Q1〜Q3の3問に回答し、変数導入レベルを決定する（3分）
Q: 変数を使わずに納品した案件に、後から変数を導入できますか？
A： 技術的には可能ですが、既存の直値をすべて変数に置き換える作業は案件規模が大きいほど時間がかかります。「影響範囲の把握→主要コンポーネントだけ変数化→残りは仕様変更時に随時変数化」という段階的なアプローチが現実的です。
Q： 小規模案件（ランディングページ1枚など）でも変数は有効ですか？
A： ブランドカラーが3色程度でコンポーネントが少ない場合、変数化の優先度は低いと考えます。ただし、同じクライアントから継続案件が発生する可能性がある場合は、最初から変数化しておくと次回の修正対応が格段に早くなります。
Figma変数は5つの仕組みで運用を自動化
ここでは、変数の基本を理解した後に取り組むことでフリーランス案件での作業効率が具体的に上がる運用レベルのハックを5つ紹介します。
ハック1: スコープ設定で誤適用を防ぎ、選択ミスをゼロにする
【対象】: 変数を複数登録しはじめて、意図しない変数を誤適用してしまった経験があるデザイナー
【手順】: Variablesパネルで変数を右クリックし「Edit variable」を開きます（2分）。「Scope」セクションで、この変数を適用可能なプロパティを選択します（例: Fill、Stroke、Background）。「Hides from publishing」にチェックを入れると、他のファイルへの公開からも除外できます。
【ポイント】: スコープを最初から設定することで変数ピッカーに表示される候補が絞られ、選択ミスが起きない環境を作れます。カラー変数に「Fill only」を設定すればBorderの色選択時には表示されず、意図しない誤用が物理的に発生しなくなります。「確認する習慣」より「間違えられない構造を作る」方が品質を担保できます。スコープを絞りすぎると「あの変数を使いたいのに出てこない」という逆の不便が起きるため、命名と合わせてセットで設計し、スコープと名前が矛盾しないようにしてください。スコープ設定は後から変更可能なため、まず広めに設定し、使いながら絞っていく方法もあります。
ハック2: 役割ベース命名でエンジニア連携の認識ズレを防止
【対象】: エンジニアとの命名ズレで修正依頼が発生し、デザイン・実装間の往復作業に時間を取られているフリーランスデザイナー
【手順】: 変数名の設計前に、エンジニア側のコードで使われているトークン名を確認します（5分）。見た目の色名（blue-500）ではなく役割名（color/primary/default）で変数を命名します（10分）。「Edit variable」の「Code syntax」セクションで、Web/iOS/Androidそれぞれのコード上の変数名を登録します（5分）。
【ポイント】: 「役割ベースの命名（primary/action/default）」の方がモード切り替え時に破綻しません。ダークモードでblue-500がオフホワイトに変わる場合、変数名がblue-500では内容と名前が矛盾し、チーム内で混乱が起きます。役割ベースであれば、モードが変わっても「プライマリの操作色」という意味が保たれ、エンジニア側のコードとの対応も安定します（design-tech.xtone.co.jp「Figma Variables設定のコツと命名設計」）。コード構文の設定を忘れると、エンジニアがFigmaのDev Modeで変数を確認したとき、Figma上の表示名しか見えません。エンジニア連携がある案件では、変数を作成した時点でコード構文を同時に設定するのが最も効率的です。
ハック3: プリミティブ/セマンティック2層構造でブランド変更を1回の修正で完了
【対象】: 複数のブランドカラーを管理し、クライアントから「色だけ変えてほしい」という修正が頻発しているデザイナー
【手順】: 「Primitives」コレクションに色値を直接持つ変数を登録します（例: primitives/blue/500 = #1A73E8）（10分）。「Semantics」コレクションに役割名の変数を作成し、値としてPrimitivesの変数をエイリアスで参照します（例: color/primary/default → primitives/blue/500）（10分）。コンポーネントにはSemantics変数のみを適用し、Primitives変数を直接コンポーネントに当てないようにします。
【ポイント】: 2層構造にすることで、ブランドカラーの変更時はPrimitives変数の値を1つ変更するだけで全体に反映され、Semantics変数の命名構造は崩れません（note「デザイナーもエンジニアもちょっと幸せになる変数設計」）。変数間の依存関係が複雑になるため、Primitives変数を直接変更した際の影響範囲をVariablesパネルの「Uses」で確認する習慣が重要です。小規模案件では2層化よりも1層で管理するシンプルな構成で十分なため、エイリアスを使うべき規模かどうかを先に判断してから着手してください。
ハック4: 変数化前の「直値の棚卸し」で移行コストを削減
【対象】: 既存の大きなデザインファイルに後から変数を導入しようとして、どこから手をつければいいか分からなくなっているデザイナー
【手順】: Figmaの「Edit > Find and replace」またはプラグイン「Figma Tokens」を使い、ファイル内で繰り返し使われている色値・数値を洗い出します（20分）。出現頻度が3回以上の値を「変数化候補リスト」として記録します（スプレッドシートか、ファイル内の専用ページに整理）（10分）。頻度の高い順から変数を作成し、Variablesパネルで登録後に要素へ適用し直します。
【ポイント】: 「頻度の高い値から個別に置き換える」アプローチを採用することで、1回の作業ミスの影響範囲を限定できます。特定の値の変数化が終わったら、その変数が正しく全体に反映されているかを確認してから次の値に移行する手順を踏むことで、既存コンポーネントの意図しない変化を最小化できます（note「デザイナーもエンジニアもちょっと幸せになる変数設計」）。新規コンポーネントを作る際は「既存変数から選ぶ」というルールを自分の中で決めておくと、直値の増加を防げます。段階的な移行を前提としたスケジュールを組んでください。
ハック5: 納品時の変数ドキュメントで継続案件の引き継ぎを効率化
【対象】: クライアントに納品後、「色を少し変えたい」という依頼への対応や、チームメンバーへの引き継ぎで余計な時間が発生しているフリーランスデザイナー
【手順】: ファイル内に「_VariablesGuide」という専用ページを作成します（5分）。コレクション・変数名・用途・適用箇所を一覧化したテーブルを貼り付けます（20分）。「このファイルで直値を使わないでください」「色はColorsコレクションの変数のみ使用」等のルールを記載し、クライアントや次の担当者への引き継ぎ文書として添付します。
【ポイント】: 変数ガイドページを1枚作ることで、クライアントからの「ここの色はどう変えればいいですか？」という問い合わせを減らし、継続案件での修正対応を効率化できます。ガイドページが複雑すぎると誰も読まなくなります。「変数の一覧」「変更してよい変数・してはいけない変数の区別」「変更方法の手順（スクリーンショット2〜3枚）」の3点に絞ると、クライアントでも読みやすいドキュメントになります。30分以内で作れる粒度に収めることが継続可能な運用の条件です。外注契約書のテンプレートと同様に、引き継ぎドキュメントも雛形を作っておくと次案件以降の準備時間を短縮できます。
CHECK
▶ 今すぐやること: 現在進行中のFigmaファイルで「直値で使われているカラー値」をFind and replaceで検索し、上位3件を変数に置き換える（20分）
Q: プリミティブ/セマンティックの2層構造は、小規模案件でも必要ですか？
A： LP1枚やアイコンセットのような小規模案件では不要です。2層構造を導入する目安は、ブランドカラーが変更される可能性がある案件か、複数のテーマ（ライト/ダーク等）が要件として存在する案件です。それ以外では1層のシンプルな構成で十分です。
Q： コード構文（Code syntax）の設定はいつやるのがベストですか？
A： 変数を作成した時点で同時に設定するのが最も効率的です。後から一括で設定しようとすると見落としが発生しやすいため、「変数を作ったらコード構文を設定する」をセットの習慣にしてください。
Figma変数を使いこなす：1箇所管理で案件対応を効率化する
Figma変数の核心は「動的な値を1箇所に登録して、プロジェクト全体に自動反映させる」仕組みです。まずはブランドカラーと余白をCOLOR・NUMBER変数として登録し、コンポーネントに適用するだけで、変更対応の効率が実感できます。コレクション・モード・エイリアスを組み合わせることで、ダークモード対応や開発連携まで段階的に応用範囲を広げられます。
変数の学習は「全部理解してから始める」より「1つ作って動かす」を繰り返す方が確実に習得できます。今日の案件ファイルにブランドカラー1つを変数化するところから始めてください。フリーランスとして時間管理の仕組みを整えることで、Figmaの学習時間も確保しやすくなります。
| 状況 | 次の一歩 | 所要時間 |
| まだ変数を1つも作っていない | Variablesパネルでブランドカラーを1つ登録し、ボタンに適用 | 10分 |
| 変数は作れるがモードが分からない | Colorsコレクションに「Light」「Dark」2モードを追加して背景色を設定 | 15分 |
| エンジニアとの連携に変数を使いたい | 既存の変数にCode syntaxを設定し、Dev Modeで表示を確認 | 20分 |
| 既存ファイルに変数を導入したい | Find and replaceで直値を洗い出し、頻度上位3件を変数化 | 30分 |
Figma変数の使い方に関するよくある質問
Q: FigmaのVariablesとデザイントークンは同じものですか？
A： 厳密には異なります。デザイントークンはデザインシステムの設計概念（プラットフォームを超えて共有する命名付きの値の集合）であり、FigmaのVariablesはその概念をFigma上で実装する機能です。Figma変数をデザイントークンに対応させた設計にすることで、StyleDictionaryなどのツールと連携してコードに書き出せるようになります。
Q： 変数を設定したコンポーネントをライブラリとして公開できますか？
A： できます。OrganizationまたはProfessionalプランのチームライブラリ機能を使えば、変数を含むコンポーネントを他のファイルから利用可能です。変数もコンポーネントと同様にライブラリとして公開・購読でき、デザインシステムの変数を一元管理する用途に使えます。
Q： 変数の数が増えすぎて管理が大変になってきました。整理する方法はありますか？
A： 3つの方法が有効です。第一に、スラッシュ区切りの命名（color/primary/default）で階層を作り、関連変数をグループ化します。第二に、使われていない変数を定期的に削除します（「Find all uses」で使用箇所がないことを確認してから削除）。第三に、コレクション単位で役割を分け、1コレクションに詰め込みすぎない設計を徹底します。
【出典・参照元】
Figma公式ヘルプ「バリアブルとコレクションの作成と管理」 – 変数の作成・管理・スコープ・コード構文の公式解説
note「デザイナーもエンジニアもちょっと幸せになる変数設計」 – 実運用ベースのVariables導入体験談
zero-one.media「フリーランスデザイナーのFigma活用Tips」 – フリーランス向け実務寄り解説
design-tech.xtone.co.jp「Figma Variables設定のコツと命名設計」 – 命名規則と分類の実務コツ
Figma公式プライシングページ – プラン別機能の比較