▶ 3日で初案件PR
この記事でわかること
Figma Variablesを使うと、色・余白・角丸などを一元管理でき、変更を全コンポーネントへ即時反映できます。公式ヘルプでは4つの変数タイプが定義されており、フリーランス案件でも最小3コレクションから始められます。この記事では作成から適用、モード切り替えまで実務ベースで解説します。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Figma Variablesは「値に名前をつけて再利用する仕組み」です。まずColorだけをVariables化するだけで案件の修正コストが大幅に変わります。Number、String、Booleanを追加することで、余白・文言・表示制御まで一元管理できるようになります。フリーランスが案件をまたいで再利用したいなら、コレクションを用途別に3つ（Color・Spacing・Rounded）に分けるのが最小かつ最速の構成です。
今日やるべき1つ
既存Figmaファイルを開き、右サイドバーの「Assets」タブからLocal Variablesを開いて、ブランドカラー1色をColorタイプで登録してください（所要時間：5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| Variablesが何かをゼロから知りたい | Figma Variablesは4タイプで値を一元管理 | 3分 |
| 今すぐ変数を作って適用したい | Figma Variablesは5ステップで作成から適用まで完了 | 5分 |
| ライト/ダーク切り替えを設定したい | Figma Variablesのモードは2ステップでテーマ切り替え | 5分 |
| 案件をまたいで再利用できる構成を作りたい | フリーランス向けFigma Variablesは3コレクションが最小構成 | 7分 |
| 命名と分類に悩んでいる | Figma Variables管理は5つの仕組みで効率化 | 5分 |
Figma Variablesは4タイプで値を一元管理
Figma Variablesとは、デザインで繰り返し使う値（色・数値・文字列・オン/オフ）に名前をつけて管理する仕組みです。「ブランドカラー」「標準余白」など意味のある名前をつけることで、複数のコンポーネントに同じ値を一括で適用でき、修正時も1箇所の変更が全体へ即座に反映されます。実務上の価値は「修正コストをゼロに近づけること」にあります。
フリーランスデザイナーが案件をこなすうえで、同じブランドカラーを数十個のコンポーネントに手動で適用し直す作業は珍しくありません。Variablesを導入すると、その作業が根本から不要になります。Figmaのポートフォリオ作成や案件管理において、デザインシステムの整備はフリーランスの生産性を大きく左右します。
ColorタイプはUI全体の色を一括管理
ColorタイプはHEX・RGB・HSLなどの色値を変数として保持します。ボタンの背景色・テキスト色・ボーダー色などあらゆる塗りに適用でき、コレクション内の1つの値を変更するだけでファイル内のすべての適用箇所が更新されます。ブランドカラー変更という最も発生頻度の高い修正作業を、1回の操作で完結させられます。
Variablesを使う前は「Find & Replace Color」などのプラグインで対応していたケースも多いですが、Variablesを使うとプラグインへの依存なしに同等以上の管理が実現します。
NumberタイプはSpacingとRoundedの統一に使う
Numberタイプは整数または小数の数値を保持します。余白（Padding・Gap）、角丸（Corner Radius）、フォントサイズ、ストローク幅などの数値プロパティに適用できます。たとえば「spacing/sm」を8px、「spacing/md」を16px、「spacing/lg」を24pxと定義しておくと、レイアウト全体の余白をシステムとして管理できます。数値を1箇所変えるだけで、そのトークンを使っているすべてのコンポーネントの余白が同時に更新されるため、デザインの一貫性を保ちながらの仕様変更が容易になります。
StringタイプとBooleanタイプは文言と表示切り替えに使う
Stringタイプは文字列を変数として保持し、テキストレイヤーのコンテンツに適用できます。多言語対応やコピーライティングのA/Bテストで有効で、言語モードを切り替えるだけで画面全体のテキストを一括変更できます。Booleanタイプはtrue/falseの二値を保持し、レイヤーの表示・非表示の切り替えに使います。アイコンのON/OFFや特定ステートの表示制御をコンポーネント内で完結させる設計が可能になります。StringとBooleanを活用すると、デザインデータ1ファイルで複数パターンのUIを管理できます。
Figma公式ヘルプでは4タイプの詳細と使用可能なプロパティが確認できます（変数の基本 – Figma Help Center）。
CHECK
▶ 今すぐやること: 現在作業中のFigmaファイルで、ブランドカラーをColorタイプとして1つ登録する（5分）
Q: StylesとVariablesはどう違いますか？
A： StylesはFigma内のデザイン設定をグループ化する仕組みで、Variables導入前から使える機能です。VariablesはStylesより細かい制御とモード切り替えが可能で、開発側のデザイントークンとの連携も前提に設計されています。用途が重なる部分もありますが、新規案件ではVariablesへ統一していく方向が現在の実務標準になりつつあります。
Q： Variablesを使えるプランはどれですか？
A： 作成・管理の基本機能はすべてのプランで利用できます。モードの複数作成（3モード以上）はProfessional・Organization・Enterpriseプランが対象です。フリーランスが1人で使うFreeプランでも、1コレクションにつき2モード（例：Light/Dark）まで作成できます。
要点整理
StylesからVariablesへ移行する理由はモード切り替えと開発連携にあります。Colorから始めて、Numberを後から追加する段階導入が現実的な進め方です。
Figma Variablesは5ステップで作成から適用まで完了
Variablesはどこから作成して、どこで適用するのかを5ステップに整理すると、迷わずに進められます。
ステップ1とステップ2はコレクションと変数の作成
まずFigmaのキャンバス右上「Assets」タブを開き、左サイドバー下部の「Local Variables」をクリックします。次に「New Collection」を押してコレクションを作成し（例：Color）、「New Variable」からColorタイプを選択して変数を作成します（例：名前「brand/primary」、値「#0066FF」）。コレクションは変数をグループ化する入れ物であり、用途別に複数作ることができます（バリアブルとコレクションの作成と管理 – Figma Help Center）。
ステップ3はオブジェクトへの適用
キャンバス上でボタンなどのオブジェクトを選択し、右サイドバーの塗り（Fill）横にある「・・・」アイコンをクリックします。カラーピッカーが開いたら左下の「ライブラリアイコン（格子柄）」をクリックすると変数一覧が表示されるので、先ほど作成した「brand/primary」を選択します。以降、そのオブジェクトの塗りは「brand/primary」の値に依存し、変数の値を変更すると自動で追従します。
ステップ4と5はモードの追加と切り替え
Local Variablesパネルのコレクション名横の「Edit」からモードを追加します（例：Lightモードの値＝白背景、Darkモードの値＝黒背景）。モードの切り替えは、フレームを選択した状態で右サイドバーの「Apply variable mode」からコレクションとモードを指定することで実行できます。プロトタイプのインタラクションと組み合わせると、クリック操作でのライブなモード切り替えデモも作成できます。
CHECK
▶ 今すぐやること: テスト用フレームに四角形を置き、Colorタイプの変数を1つ作って塗りに適用する（5分）
Q: 変数の値はどうやって一括変更しますか？
A： Local VariablesパネルからコレクションのセルをダブルクリックするかInspectパネルから変数名をクリックし、値を直接編集します。変更は保存と同時にその変数を適用しているすべてのオブジェクトに即時反映されます。
Q： テキストレイヤーのフォントサイズにNumberタイプを適用できますか？
A： 適用できます。テキストレイヤーを選択し、右サイドバーの「Font size」の値横にある変数アイコン（菱形）をクリックすると、Numberタイプの変数一覧が表示されます。選択後はフォントサイズが変数に紐づき、変数値の変更が即時反映されます。
押さえておきたい点
コレクションは用途別に分けて作成し、変数名はスラッシュで階層を区切る命名（例：「brand/primary」）を最初から採用することで、後からの管理コストを大幅に下げられます。
Figma Variablesのモードは2ステップでテーマ切り替え
モードとコレクションの関係を正確に理解すると、ライト/ダーク設計に迷わずに対応できます。
モードはコレクション内の「列」、変数は「行」という構造
Local Variablesパネルを開いた状態でコレクションを見ると、縦に変数名が並び、横にモードが並ぶ表構造になっています。「brand/primary」という変数に対して、Lightモードでは「#FFFFFF」、Darkモードでは「#1A1A1A」という値を設定します。変数名（行）は1つですが、モード（列）ごとに異なる値を持つ設計です。変数名をセマンティック（意味ベース）で付けることが、モード設計の前提になります。
「#0066FF」という色名を変数名にしてしまうと、Darkモードでその変数に別の色を割り当てたとき名前と値が乖離し、管理が破綻します。「brand/primary」「text/default」のように役割で命名しておくと、どのモードに切り替えても変数名の意味が一貫します。
ライト/ダーク設計はColorコレクションに2モードを追加するだけ
実装手順は2ステップです。ステップ1として、Colorコレクションの右上「Edit」から「Light」と「Dark」の2つのモードを追加します。ステップ2として、Lightモード列とDarkモード列それぞれに各変数の値を入力します（例：「surface/background」をLightで「#FFFFFF」、Darkで「#111111」に設定）。フレームを選択して「Apply variable mode」でDarkを指定すると、そのフレーム内のすべての変数がDark側の値に自動で切り替わります。
手動で色を1つずつ変えていた従来の方法と比較すると、20個の色変数がある画面でも切り替え操作は1回で完了します。
フリーランスデザイナーがFigma VariablesでミニマムなデザインSystemを構築し、ライト/ダークのモード切り替えに活用しているケースが増えています（Figma VariablesでミニマムなデザインSystemを作る – Zenn）。
ブランド切り替えはコレクションを分けるより同一コレクション内のモードで管理
複数ブランドを扱うフリーランスには、ブランドA・ブランドBの色を別々のコレクションで管理するか、同一コレクション内の異なるモードで管理するかという選択があります。小規模案件（2〜3ブランド）であれば、同一コレクション内のモードで管理する方が操作ステップが少なく、ファイル構成もシンプルに保てます。案件をまたいだライブラリとして共有する場合は、ブランドごとにコレクションを分けた方がライブラリの権限管理が容易になります。
CHECK
▶ 今すぐやること: ColorコレクションにLightとDarkの2モードを追加し、背景色1つに値を設定してフレームのモードを切り替えて動作を確認する（5分）
Q: モードはいくつまで追加できますか？
A： FreeプランではコレクションごとにMode 1とMode 2の計2モードまでです。Professional以上のプランでは1コレクションあたり最大40モードまで追加できます。
Q： モード切り替えはコンポーネント単位でできますか？
A： できます。フレームだけでなく、コンポーネントインスタンスを選択した状態でも「Apply variable mode」からモードを指定できます。親フレームと異なるモードを子コンポーネントに適用することも可能で、画面の一部だけ別テーマにするといった設計にも対応できます。
確認事項
セマンティック命名を採用しているか、モードを追加する前に変数名の命名規則を固めておくことで、後からのリネーム作業をゼロにできます。
PR提供: 日本デザインスクール（デザスク）
Figma Variablesの適用先を3分でセルフ診断
以下の3問で、自分のプロジェクトに最適なVariables導入のスタートラインを特定できます。
Q1: 現在のファイルで、同じ色を10箇所以上使っていますか？
Yesの場合 → Q2へ進んでください。Noの場合 → Result Cへ。
Q2: ライト/ダークや複数ブランドの切り替えを将来的に使う予定がありますか？
Yesの場合 → Result Aへ。Noの場合 → Result Bへ。
Q3（Q1でNoだった場合）: 余白や角丸の数値が統一されていない箇所が3箇所以上ありますか？
Yesの場合 → Result Cへ。Noの場合 → Result Dへ。
Result A: ColorコレクションにLight/Darkモードを設定するところから始める
ブランドカラーと背景色をセマンティック命名で登録し、2モードを設定します。所要時間は15〜20分です。
Result B: ColorコレクションをモードなしのシングルモードでVariables化する
まず1モードでColorをすべてVariables化し、運用感をつかんでからモードを追加します。所要時間は10〜15分です。
Result C: Numberコレクション（Spacing・Rounded）から始める
余白と角丸をNumberで管理することで、レイアウト変更の修正コストが先に減ります。所要時間は10分です。
Result D: 小規模案件ではStylesの活用を先に完成させる
Variables導入のROIが得られない規模の場合、Stylesで色管理を完結させてから次の案件でVariablesに移行する判断も合理的です。
CHECK
▶ 今すぐやること: 上記のResultに従って、今日の作業ファイルで最初の変数を1つ登録する（5〜10分）
Q: 既存デザインをVariablesに移行するとき、元のデザインは崩れますか？
A： 崩れません。Variablesへの移行は既存の値を変数に「紐づける」操作であり、見た目の変更は発生しません。変数の値を変更した場合は即時反映されるため、移行前に既存の色値・数値を変数に正確に設定することが重要です。まず1コンポーネントだけで試してから全体に展開する段階導入が安全です。
Q： Variablesを削除したらどうなりますか？
A： 削除した変数が適用されていたオブジェクトは、変数への参照が外れ、最後に設定されていた実値（HEX値や数値）がそのまま残ります。見た目は変わりませんが、以降はVariablesによる一元管理の対象外になります。削除前に影響範囲を確認したい場合は、変数名で「Find」検索すると適用箇所を事前に洗い出せます。
重要ポイント
診断Result Dに該当する小規模案件でも、スターターキットファイルの準備だけ先に完成させておくと、次の案件から即座にVariablesを導入できます。
フリーランス向けFigma Variablesは3コレクションが最小構成
フリーランス案件でVariablesを毎回ゼロから設計していては、導入コストで利益を圧迫します。最小限の構成を1度作って使い回すことが、最も現実的な運用方法です。作業効率を上げる仕組みとして、デザインシステムの標準化は特に効果が高い領域です。
ColorコレクションにBrand・Neutral・Semanticを収める
Colorコレクションに収める変数は3グループで整理できます。Brandグループには「brand/primary」「brand/secondary」などのブランドカラーを、Neutralグループには「neutral/100」から「neutral/900」のグレースケールを、Semanticグループには「text/default」「surface/background」「border/default」など役割ベースの変数を置きます。Semanticグループの変数値には、BrandやNeutralの変数をエイリアスとして参照させる設計にすると、ブランドカラーの変更がSemantic側へ自動で伝播します。
Color・Spacing・Roundedなどに分けて複数プロジェクトで運用することで、案件をまたいだ変数の再利用が実現します（Figmaのバリアブル機能を複数プロジェクトで活用する – note）。
SpacingコレクションとRoundedコレクションで数値を統一する
Spacingコレクションには「spacing/xs」「spacing/sm」「spacing/md」「spacing/lg」「spacing/xl」の5段階をNumberタイプで登録します（例：4/8/16/24/40px）。Roundedコレクションには「rounded/sm」「rounded/md」「rounded/lg」「rounded/full」の4段階を登録します（例：4/8/16/9999px）。この3コレクション合計で20〜30個程度の変数を用意すると、ほとんどのフリーランス案件のデザインシステム要件はカバーできます。
テンプレートファイルとして保存して案件をまたいで使い回す
3コレクション構成を完成させたファイルを「Variables Starter Kit」としてDraftsに保存し、新規案件開始時にDuplicateして使い始めることで、毎回の初期設定時間をゼロにできます。ブランドカラーのみを差し替えると（所要時間3〜5分）、新しい案件のベースデザインシステムが即座に完成します。
このスターターキット方式は中長期的に見てコストパフォーマンスが高い運用です。初期の構築に1〜2時間かかりますが、3案件目以降はほぼ回収できます。
CHECK
▶ 今すぐやること: Draftsに「Variables Starter Kit」という名前の新規ファイルを作成し、Color・Spacing・Roundedの3コレクションを作成して変数を5つずつ登録する（20分）
Q: コレクションは何個まで作れますか？
A： 公式の制限は明示されていませんが、実務では用途別に5〜10コレクション程度が管理しやすいとされています。コレクションが増えすぎると変数の検索性が下がるため、Color・Spacing・Rounded・Typography・Motionの5コレクションを上限の目安にする運用が一般的です。
Q： ライブラリとして別ファイルに公開することはできますか？
A： できます。チームライブラリ機能（Professional以上）を使うと、変数をファイルをまたいで共有できます。ライブラリファイルで変数を管理し、各案件ファイルから参照する設計にすると、複数案件の一括更新が可能になります。Freeプランでは同一ファイル内のみに限られます。
覚えておくこと
スターターキットは3コレクション・20〜30変数が最小構成です。ブランドカラー差し替えだけで新案件に即対応できる状態を最初に作ることが、長期的な効率化の起点になります。
Figma Variables管理は5つの仕組みで効率化
変数名の付け方や分類方法を最初に設計するだけで、長期運用が可能な構造になります。
ハック1: セマンティック命名で修正コストを削減
【対象】 : 複数案件でVariablesを継続運用したいフリーランスデザイナー
【手順】 :
ステップ1として、色名ベースの命名（例：「blue-500」）をすべてロールベース（例：「brand/primary」）に変換するルールを1ページのドキュメントとしてFigmaファイル内にまとめます（20分）。
ステップ2として、Brand・Neutral・Semanticの3レイヤーを定義し、Semanticの変数値にはBrandまたはNeutralの変数をエイリアスとして参照させます（設定：10分）。
ステップ3として、新しい変数を追加する際はSemanticレイヤーへの追加を原則とし、Brand・Neutralの直接参照はコンポーネントで使わないルールをチームまたはメモとして明文化します（5分）。
【コツと理由】 : 「blue-500」のような色名そのものを変数名にすると、ダークモード追加時に「blue-500」に白を割り当てるといった矛盾が生じます。「brand/primary」のように役割で命名した場合、ブランドカラー変更の修正箇所はBrandレイヤーの1〜2変数のみになり、Semanticレイヤー経由でコンポーネント全体に伝播するため、修正コストを大幅に削減できます（Figma Variables設定のコツとメリット – デザインテック）。
【注意点】 : 命名規則を決める前に変数を大量に作り始めてはいけません。後から一括リネームはできますが、コンポーネントへの適用が進んだ後では影響範囲の確認に時間がかかります。最低限のルール（スラッシュで階層を区切る・英小文字・ロールベース）を先に決めてから変数作成を始めてください。
ハック2: エイリアス設計で変更伝播を自動化
【対象】 : ColorコレクションにBrand・Semanticの2レイヤー構造を導入したいデザイナー
【手順】 :
ステップ1として、Brandグループの変数（例：「brand/primary」値#0066FF）を先に作成します（5分）。
ステップ2として、Semanticグループの変数（例：「button/bg」）を作成し、値の入力欄でライブラリアイコンをクリックして「brand/primary」をエイリアスとして参照させます（3分）。
ステップ3として、コンポーネントのボタン背景色には「brand/primary」ではなく「button/bg」を適用します。これにより「brand/primary」の値を変更するだけで「button/bg」→ボタン背景色への変更が自動で伝播します（設定確認：2分）。
【コツと理由】 : 「button/bg」を作らずに「brand/primary」を直接コンポーネントに適用する設計では、ボタン背景とリンクテキストが同じ「brand/primary」を参照することになり、ボタンだけ色を変えたいときにBrandの値を変えると全体に影響します。Semanticレイヤーを挟むことで、「button/bg」と「link/text」が同じBrand値を参照しながらも、それぞれ独立して値を上書きできる設計になります。
【注意点】 : エイリアスの参照チェーンが3階層以上になると、どの変数がどの値を参照しているか把握しづらくなります。Brand → Semantic → Componentの2チェーン（3変数）までを上限とする運用が、フリーランスの1人管理には現実的です。
ハック3: スコープ設定で変数選択のノイズをゼロにする
【対象】 : 複数タイプの変数が増えてきて、適用時の変数選択が混雑してきたデザイナー
【手順】 :
ステップ1として、Local Variablesパネルで変数名を右クリックして「Edit variable」を開き、「Scopes」セクションを確認します（2分）。
ステップ2として、Colorタイプの変数であれば「Fill」「Stroke」「Effect」などの適用可能プロパティが表示されるので、その変数を使う目的に合ったスコープのみをチェックします（例：背景色専用なら「Fill」のみをON）（3分）。
ステップ3として、Spacingコレクションの変数は「Gap」「Padding」のみにスコープを絞り、フォントサイズには表示されないよう設定します（3分）。
【コツと理由】 : すべてのスコープをONのまま使うと、変数を適用しようとしたときに関係のない変数まで候補に表示され、選択ミスが増えます。スコープを限定すると適用時の操作ステップが減り、「塗りに余白の変数を誤適用する」といったヒューマンエラーを構造的に防げます。
【注意点】 : スコープを狭めすぎると、想定外のプロパティに変数を適用したくなったときに都度スコープを開き直す必要があります。最初は「Fill」「Stroke」「Gap」「Padding」「Corner radius」の主要5スコープを用途別に設定し、追加ニーズが出てから広げる方向で調整してください。
ハック4: プロトタイプのモード切り替えで実機に近いレビューを実現
【対象】 : ライト/ダーク切り替えをプロトタイプで動的に確認したいデザイナー
【手順】 :
ステップ1として、Light/Darkの2モードを持つColorコレクションをあらかじめ設定します（前出の手順）。
ステップ2として、プロトタイプのインタラクション設定で「Set variable mode」アクションを選択し、トリガー（例：トグルボタンクリック）に対してDarkモードへの切り替えアクションを割り当てます（5分）。
ステップ3として、プロトタイプをプレビューし、トグルをクリックして全フレームがDarkに切り替わることを確認します。クライアントへのレビューデモとして使用できます（確認：2分）。
【コツと理由】 : 静的なデザインカンプをLight/Dark別々に用意して提出する方式では「切り替え後の見た目」しか確認できませんが、動的プロトタイプではクライアント自身が操作してリアルタイムで確認できます。フィードバックの精度が上がり、承認までのやり取りを短縮できます。
【注意点】 : 「Set variable mode」アクションはFigmaのプロトタイプエンジンのバージョンによって挙動が異なることがあります。旧バージョンのプロトタイプ設定では表示されない場合があるため、インタラクション設定の「Behavior」が「New」になっていることを確認してください。プロトタイプを「共有リンク」で送る場合は、受け取り側がFigmaアカウントにログインしている必要があります。
ハック5: 段階導入で既存デザインを壊さずVariablesを拡張
【対象】 : 進行中の案件に途中からVariablesを導入したいフリーランス
【手順】 :
ステップ1として、ファイルを複製（Duplicate）し、複製版で最初の移行作業を行います。元ファイルはそのままバックアップとして残します（2分）。
ステップ2として、最も再利用頻度の高いコンポーネント（多くの場合ボタンとヘッダー）のみを対象に、現在の色値と同じ値でColorタイプの変数を作成し、適用します。見た目は変わりません（15〜20分）。
ステップ3として、2〜3日運用してエラーがないことを確認した後、カード・フォーム・フッターへと適用範囲を段階的に広げます。全体への展開は1〜2週間かけて行うことで、リスクを最小化できます（継続作業）。
【コツと理由】 : 最も頻繁に変更が発生するコンポーネントから優先して適用することで、移行作業自体のコストを抑えられます。全面置換は途中でバグが発生したときの切り戻しも複雑になります。「高頻度コンポーネントから段階導入」の方式を採用した場合、移行ミスによるデザイン破損のリスクも構造的に低減できます（Figmaのバリアブル機能を複数プロジェクトで活用する – note）。
【注意点】 : 50%のVariables化でも、変更頻度の高い部分がカバーされていれば実務上の修正コストは十分に削減されます。完璧な移行より、運用中のプロジェクトを止めないことを優先してください。
CHECK
▶ 今すぐやること: 現在の作業ファイルを複製し、複製版でボタンコンポーネントの背景色にColorタイプの変数を適用して動作を確認する（15分）
Q: ボタンのサイズやテキストもVariablesで管理できますか？
A： 管理できます。ボタンの横幅・高さはNumberタイプ、パディングはNumberタイプ、ラベルテキストはStringタイプで管理できます。オートレイアウトのPaddingとGapにNumberタイプを直接適用するには、オートレイアウト設定パネルの数値欄横の変数アイコンから変数を選択します。
ボタンのサイズ・テキスト・フォントなどをVariablesで一元管理することで変更反映を効率化しているデザイナーが増えています（Figma Variablesの魅力：効率的で一貫性のあるデザイン管理 – Qiita）。
Q： ハックで紹介されていないTypographyやMotionも変数管理できますか？
A： できます。フォントサイズ・行間・文字間隔はNumberタイプ、フォントファミリーはStringタイプで管理できます。アニメーションの継続時間（ms）もNumberタイプで変数化可能です。アニメーション系はプロトタイプのトランジション設定との組み合わせが必要で、Color・Spacingより設定手順が増えます。Color・Spacingの運用に慣れた段階で追加してください。
要点整理
5つのハックのうち、最初に取り組むべき優先順位はセマンティック命名（ハック1）、エイリアス設計（ハック2）、段階導入（ハック5）の順です。スコープ設定とプロトタイプ活用は変数数が20を超えた段階で導入すると効果が出やすくなります。
Figma Variablesを3コレクションから始める
Figma Variablesは「値に名前をつけて再利用する仕組み」です。Color・Spacing・Roundedの3コレクションをまず構築することで、フリーランス案件の修正コストを大幅に削減できます。4タイプ（Color・Number・String・Boolean）の使い分けを理解し、セマンティック命名とエイリアス設計を組み合わせると、ブランドカラー変更のような大規模修正でも対応箇所が1〜2変数に収まります。モード機能を使ったライト/ダーク切り替えはFreeプランでも2モードまで使えるため、今日から実装できます。
Variablesの導入で最も大切なのは、まず1つ変数を作って動かしてみることです。最初にColorを1つ登録して適用するだけで、仕組みの実感が得られます。そこから少しずつ変数を増やしていくことで、案件をまたいで再利用できる設計資産になります。フリーランスとして作業効率を高める習慣として、デザインシステムの整備は継続的に取り組む価値があります。
| 状況 | 次の一歩 | 所要時間 |
| まだ変数を1つも作っていない | ブランドカラーをColorタイプで1つ登録し、ボタンの塗りに適用 | 5分 |
| Colorは作ったがNumberは未導入 | spacing/sm（8px）をNumberで登録し、ボタンのPaddingに適用 | 10分 |
| 変数は作ったがモードを使っていない | ColorコレクションにDarkモードを追加して背景色の値を設定 | 15分 |
| ライト/ダークはできたが案件間の再利用ができていない | Variables Starter Kitファイルを作成してDraftsに保存 | 30分 |
Figma Variablesに関するよくある質問
Q: Figma VariablesとStyles（スタイル）はどちらを使えばいいですか？
A： 新規案件ではVariablesへの統一を推奨します。StylesはFigmaの旧来の管理方式で、モード切り替えや開発連携（デザイントークン出力）に対応していません。既存ファイルにStylesが設定済みの場合は、Stylesを残しつつVariablesを段階的に並行導入し、安定してから切り替える方針が安全です。
Q： Figma Variablesはエンジニアとの連携にどう使えますか？
A： 変数名と値をJSONやCSS変数として出力するプラグイン（Token Studio for Figmaなど）を使うことで、デザインとコードのトークンを同期できます。変数名をそのままCSS変数名として使える命名規則（例：「–color-brand-primary」に対応する「brand/primary」）で設計しておくと、エンジニア側のコーディングコストも下がります。Figma公式のDev Modeでも変数名がInspectパネルに表示されます。
Q： Figma Variablesは小規模案件でも導入する価値がありますか？
A： ページ数が5ページ以上、または将来的に同クライアントからの追加修正が見込まれる案件であれば、導入コストは2〜3回の修正で回収できます。ランディングページ1枚など修正機会が少ない場合はROIが出にくいため、まずスターターキットの準備だけ行い、本格運用は次の案件からとする判断も合理的です。フリーランスの開業資金と同様に、初期投資と長期リターンのバランスで判断することが重要です。
【出典・参照元】
バリアブルとコレクションの作成と管理 – Figma Help Center
Figmaのバリアブル機能を複数プロジェクトで活用する – note
Figma VariablesでミニマムなデザインSystemを作る – Zenn
Figma Variablesの魅力：効率的で一貫性のあるデザイン管理 – Qiita
Figma Variables設定のコツとメリット – デザインテック
記事内容は2026年09月時点の情報に基づいています。