Figmaバリアブルとスタイルの違い｜LPで実践して覚える

LPを作っていると、同じ紫を何か所にも入力したり、余白を毎回数字で打ったりしがちです。バリアブルとスタイルに登録しておけば、一覧から選ぶだけで同じ値を使え、あとで変えるときも1か所の修正で済みます。

この記事では、無料版のFigmaで、LPのデザインファイルにバリアブルとスタイルを登録する手順を解説します。

バリアブルとスタイル登録の全体像

バリアブルとスタイルの違いを理解する

Figmaには、色や数値を登録して使い回す機能が2つあります。バリアブルとスタイルです。どちらも、登録した値を変えると、使っている箇所すべてに反映されます。

2つの違いは、1つの登録で持てる値の数です。

バリアブルは「値を1つ」だけ表示する

例えば、ボタンの紫 4A07A0 を「color/accent/primary」という名前で登録したとします。ボタンにこのバリアブルを適用すると、4A07A0 の紫が表示されます。

バリアブルは、このように色や数値などの値を1つ持ち、表示される値は常に1つです。登録できる値の種類は、次の4つです。

出典：Figma Learn「Overview of variables, collections, and modes」

スタイルは「複数の値」をまとめて適用する

例えば、本文の文字を「フォントはNoto Sans JP・サイズ16・太さ500・行間170%」と決めたとします。この4つをテキストスタイルにまとめて登録すると、適用したときに4つが一度に反映されます。

スタイルは、このように複数の値を組み合わせて持ち、適用するとすべてが同時に使われます。登録できるスタイルは、次の4種類です。

上の図のように、スタイルの中にはバリアブルを入れられます。入れるかどうかは任意で、色を直接入力しただけの単色の色スタイルも作れます。

出典：Figma Learn「The difference between variables and styles」

どちらで登録するかを決める

迷ったら、「その見た目は値1つで決まるか」で考えましょう。グラデーションは2色以上、影は色・位置・ぼかしなどを組み合わせるため、スタイルで登録します。

また、使える場所を絞り込む「スコープ」は、バリアブルだけの機能です。設定方法はスコープを設定するで解説します。

出典：Figma Learn「The difference between variables and styles」の「Scope variables」（ページ一覧）

無料版でできること・できないこと

この記事は、無料版（Starterプラン）を前提にしています。無料版でも、バリアブルとスタイルの登録・適用はできます。ただし、プランの違いで次の制限があります（2026年10月時点）。

有料版ならモードで値を切り替えられる

モードは、1つのバリアブルに複数の値を持たせ、場面に応じて切り替える機能です。例えば、背景色のバリアブルにライト用とダーク用の値を登録し、フレームごとに切り替えられます。

作れるモードの数は、1つのコレクションあたり、Professionalプランで10個、Organizationプランで20個です。

出典：Figma Learn「Compare Figma plans and features」

STEP1：バリアブルを登録する

LPのデザインファイル（ここでは「サンプル_LP」）に、色・数値・フォント名のバリアブルを登録します。ここで登録したバリアブルは、STEP2のスタイルの中でも使います。

1-1. コレクションを作る

コレクションは、バリアブルをまとめて入れておく箱です。ファイルで最初のバリアブルを作ると、1つ目のコレクションも一緒に作られます。

1. 何も選択していない状態で、左のツールバーの「バリアブル」を開く
2. 「+ バリアブルを作成」をクリックし、種類（カラーなど）を選ぶ
3. 作られたコレクションの名前を「LP 1」に変更する

コレクションの中は、さらにグループ（フォルダのようなもの）で分けられます。グループは、次の1-2で決める名前の付け方で自動的に作られます。

1. コレクション「LP 1」に32個のバリアブルが入っている
2. 名前の「/」で分けたグループが並ぶ
3. 「+ バリアブルを作成」から追加する

出典：Figma Learn「Create and manage variables」の「Create a variable collection」（ページ一覧）

1-2. 名前の付け方を決める

名前に「/」を入れると、その前の部分がグループになります。例えば「color/accent/primary」と名付けると、colorグループの中のaccentグループに、primaryが入ります。

グレーの「900」「50」は濃さを表し、数字が大きいほど濃い色です。STEP2のグラデーションも同じく色名で「grad/purple」、テキストスタイルは役割で「PC/body」のように名付けます。

出典：Figma Learn「Manage and share styles」

1-3. 色のバリアブルを登録する

1. バリアブルの画面で「+ バリアブルを作成」をクリックし、「カラー」を選ぶ
2. 名前と値（カラーコード）を入力する
3. 下の表の6色をすべて登録する

背景の gray-50（FDFDFD）は、真っ白（FFFFFF）ではありません。文字用の white とは別の色として登録しています。

出典：Figma Learn「Create and manage variables」の「Create a variable」（ページ一覧）

1-4. 数値のバリアブルを登録する

余白・幅・角丸・文字の大きさ・太さを、数値のバリアブルとして登録します。手順は色と同じで、種類に「数値」を選びます。

サンプル_LPでは、余白の値を8の倍数でそろえています。

角丸の radius/full には、9999 のように大きな値を入れます。ボタンの両端を半円にしたいときに使います。

出典：Figma Learn「Overview of variables, collections, and modes」の「Number variable」（ページ一覧）

1-5. フォントファミリのバリアブルを登録する

フォントの名前は、文字列のバリアブルとして登録します。

1. バリアブルの画面で「+ バリアブルを作成」をクリックし、「文字列」を選ぶ
2. 名前に「font-family/base」、値に「Noto Sans JP」を入力する

名前をフォント名ではなく役割（base＝基本の文字）にしておくと、あとでフォントを変えても名前を直さずに済みます。

出典：Figma Learn「Apply variables to designs」の「Font properties」（ページ一覧）

1-6. スコープを設定する

スコープは、バリアブルを使える場所を絞り込む設定です。初期状態ではすべての入力欄に表示されるため、余白の欄にフォントサイズの値まで並んでしまいます。

1. 同じグループのバリアブルをまとめて選び、右クリックで「バリアブルを編集」を開く
2. 「スコープ」タブを開く
3. 「サポートされているプロパティのすべてで表示」のチェックを外す
4. 下の表のとおり、使う場所だけにチェックを入れる

出典：Figma Learn「Create and manage variables」

STEP2：スタイルを登録する

STEP1のバリアブルを組み合わせて、テキスト・グラデーション・影のスタイルを登録します。

2-1. テキストスタイルを登録する

1. 何も選択していない状態で、右サイドバーの「スタイル」の「+」をクリックし、テキストスタイルを選ぶ
2. 名前を入力する（例：PC/body）
3. フォントの欄で「バリアブルを適用」を選び、font-family/base を選ぶ
4. 太さの欄で、同じように font-weight/medium を選ぶ
5. サイズの欄で、font-size/16 を選ぶ
6. 行間に「170%」を入力する
7. 「スタイルを作成」をクリックする

同じ手順で、下の表のテキストスタイルを登録します。行間は、スタイルごとに％で直接入力します。

PCとSPで同じ役割名をそろえ、「PC/」「SP/」でグループを分けています。サイズが違っても、同じ役割の文字を探しやすくなります。

テキストの揃え（左揃え・中央揃え）は、テキストスタイルに含められません。テキストごとに設定しましょう。

出典：Figma Learn「Create color, text, effect, and layout guide styles」

2-2. グラデーションを色スタイルで登録する

グラデーションは2色以上を組み合わせるため、バリアブルではなく色スタイルで登録します。

1. 何も選択していない状態で、右サイドバーの「スタイル」の「+」をクリックし、色スタイルを選ぶ
2. 名前を入力する（例：grad/purple）
3. 塗りの種類をグラデーションに変える
4. カラーストップの色をクリックし、「ライブラリ」タブからバリアブルを選ぶ
5. 残りのカラーストップも同じように設定し、「スタイルを作成」をクリックする

サンプル_LPでは、grad/purple のストップに color/accent/primary と color/accent/sub を使っています。grad/blue の青はバリアブルに登録していないため、色を直接入力しています。

どちらのグラデーションも、名前は色名にしています。

出典：Figma Learn「Apply variables to designs」の「Color style with gradient stops」（ページ一覧）

2-3. 影をエフェクトスタイルで登録する

影は、色・位置・ぼかしなどの値を組み合わせて作るため、エフェクトスタイルで登録します。

1. 影を付けたい要素を選び、右サイドバーの「エフェクト」でドロップシャドウを追加して見た目を整える
2. 「エフェクト」のスタイルのアイコンをクリックし、「+」をクリックする
3. 名前を入力し（例：PC/text-shadow）、「スタイルを作成」をクリックする

影の色には色のバリアブルを、位置やぼかしの数値には数値のバリアブルを割り当てることもできます。1つのスタイルに、複数の影を重ねて保存することもできます。

サンプル_LPでは、文字用の PC/text-shadow と、円形の要素用の PC/circle-shadow を登録しています。

出典：Figma Learn「Create color, text, effect, and layout guide styles」の「Effects」、「Apply variables to designs」の「Effect style with a color property」（ページ一覧）

STEP3：登録したものをデザインに適用する

3-1. 色を適用する

1. 要素を選び、右サイドバーの「塗り」または「線」にある「スタイルとバリアブルを適用」のアイコンをクリックする
2. 一覧から色を選ぶ

一覧では、四角い見本がバリアブル、丸い見本がスタイルです。グラデーションの grad/purple は、丸い見本で表示されます。

3-2. 数値を適用する

1. 要素を選び、余白や角丸などの入力欄をクリックする
2. 「=」を入力し、一覧からバリアブルを選ぶ

1-6でスコープを設定していれば、その欄に合うバリアブルだけが一覧に出ます。

テキストには、STEP2のテキストスタイルを適用します。テキストを選んで右サイドバーの「テキスト」からスタイルを選ぶと、フォント・サイズ・太さ・行間がまとめて反映されます。

キャンバス上の操作でバリアブルが外れたとき

オートレイアウトの余白や間隔を、キャンバス上でドラッグして変えると、割り当てたバリアブルが外れます。値を変えたいときは、入力欄から別のバリアブルを選び直しましょう。

自分でバリアブルを外したいときは、数値なら入力欄で Delete キーを押し、色なら見本の横にある「切り離し」アイコンをクリックします。

出典：Figma Learn「Apply variables to designs」

さいごに

この記事では、Figmaのバリアブルとスタイルの違いと、LPのデザインファイルに登録する手順を紹介しました。

よくある質問

グラデーションをバリアブルとして登録できますか？

できません。バリアブルは値を1つしか持てないため、2色以上を組み合わせるグラデーションは色スタイルで登録します。カラーストップの1つ1つには、色のバリアブルを使えます。

登録手順は「2-2. グラデーションを色スタイルで登録する」で解説しています。

無料版で、ライトモードとダークモードを切り替えられますか？

できません。値を切り替えるモードは有料プランの機能で、無料版ではバリアブルに値を1つだけ登録します。

モードの内容は「有料版ならモードで値を切り替えられる」で解説しています。

入力欄で「=」を押しても、登録したバリアブルが出てきません

スコープで、その入力欄にチェックを入れていない可能性があります。「バリアブルを編集」のスコープタブで、使いたい項目にチェックが入っているか確認しましょう。

設定方法は「1-6. スコープを設定する」で解説しています。

単色の色は、色スタイルにしてもいいですか？

単色1つだけの色スタイルも作れます。ただし、使える場所を絞り込むスコープはバリアブルだけの機能なので、単色はバリアブルで登録すると候補を整理しやすくなります。

選び方は「どちらで登録するかを決める」で解説しています。

別のファイルでも同じバリアブルを使えますか？

無料版では、バリアブルやスタイルをライブラリとして公開できないため、登録したファイルの中で使います。ほかのファイルから呼び出すには、有料プランが必要です。

無料版の制限は「無料版でできること・できないこと」で解説しています。

参考にした公式情報

Figma公式 ヘルプセンター（Figma Learn）

バリアブルとスタイルの違い、登録・適用の手順、プランごとの制限を確認できます。

• The difference between variables and styles
• Overview of variables, collections, and modes
• Create and manage variables
• Apply variables to designs
• Create color, text, effect, and layout guide styles
• Manage and share styles
• Compare Figma plans and features

どのページも英語ですが、ブラウザの翻訳機能を使えば日本語で読めます。