Variables（変数）の使い方を解説｜Figma初心者向けに基本からわかりやすく紹介

はじめに

Figmaを使っていると、「Variables（変数）」という言葉を見かけることがあります。

Figma初心者の方の中には、

「Variablesって何？」
「Stylesと何が違うの？」
「Auto Layoutやコンポーネントと関係あるの？」
「実務で本当に使う必要があるの？」

と感じる方も多いのではないでしょうか。

Variablesは、Figmaでデザインを効率よく管理するための重要な機能です。

特に、Webサイトやアプリのデザインで、色・余白・角丸・文字サイズなどを統一したい場合にとても役立ちます。

例えば、サイト全体で使っているメインカラーを変更したいとします。

Variablesを使っていない場合、ボタン、見出し、背景、アイコンなど、該当する箇所を一つずつ探して修正する必要があります。

しかしVariablesを使っていれば、登録している値を変更するだけで、関連するデザインにまとめて反映できます。

つまり、Variablesは「デザインの共通ルールを管理するための仕組み」と考えるとわかりやすいです。

この記事では、Figma初心者の方に向けて、Variablesとは何か、どんな場面で使うのか、基本的な使い方、メリット、注意点までわかりやすく解説します。

Variablesとは？

Variablesとは、日本語でいうと「変数」のことです。

少し難しく聞こえるかもしれませんが、簡単に言うと「あとからまとめて変更できる共通の値」です。

例えば、以下のような値をVariablesとして登録できます。

• 色
• 数値
• 文字列
• Boolean
• 余白
• 角丸
• サイズ
• 透明度
• テキスト内容

Figmaでは、これらの値をデザイン内のさまざまな要素に適用できます。

例えば、

• ボタンの背景色
• テキストの色
• カードの角丸
• 要素間の余白
• アイコンのサイズ
• ラベルの文言

などに使うことができます。

Variablesを設定しておくと、元の値を変更するだけで、その値を使っているデザイン全体に変更を反映できます。

これは、CSSでいうところのカスタムプロパティに近い考え方です。

:root {
  --color-primary: #0066ff;
  --space-md: 24px;
  --radius-md: 8px;
}

このようにCSSで変数を設定しておけば、後から色や余白を変更しやすくなります。

FigmaのVariablesも、これに近いイメージで使うことができます。

Variablesを使うべき理由

Variablesを使うべき理由は、デザインの管理が圧倒的に楽になるからです。

Webデザインでは、同じ色や余白を何度も使います。

例えば、メインカラーとして青を使っている場合、

• ボタン
• リンク
• アイコン
• 見出し
• 背景
• CTA

など、さまざまな場所で同じ色を使うことがあります。

もしクライアントから、

「メインカラーを少し濃い青に変更してください」

と言われた場合、Variablesを使っていなければ、該当箇所を一つずつ修正する必要があります。

しかし、Variablesを使っていれば、登録しているメインカラーの値を変更するだけで済みます。

これにより、修正時間を大幅に短縮できます。

また、修正漏れを防げる点も大きなメリットです。

手作業で修正していると、どうしても一部だけ変更し忘れることがあります。

Variablesを使えば、同じ値を参照している箇所がまとめて更新されるため、デザインの統一感を保ちやすくなります。

Stylesとの違い

Figmaには、以前からStylesという機能があります。

Stylesも、色やテキスト、エフェクトなどを登録して再利用できる便利な機能です。

では、VariablesとStylesは何が違うのでしょうか。

ざっくり言うと、

Stylesは「見た目のスタイルを登録する機能」
Variablesは「値そのものを管理する機能」

と考えるとわかりやすいです。

例えば、Color Styleでは「Primary Color」という色スタイルを登録できます。

一方でVariablesでは、「color/primary」という値を作り、その値をさまざまなデザインに適用できます。

さらにVariablesは、モードを使うことで値を切り替えられる点が特徴です。

例えば、

• Light Mode
• Dark Mode

という2つのモードを作った場合、同じ「background」という変数でも、ライトモードでは白、ダークモードでは黒、というように値を切り替えられます。

Figma公式でも、Variablesはモードによってコンテキストごとに値を変えられる仕組みとして説明されています。

Variablesで管理できる主な種類

Variablesにはいくつかの種類があります。

初心者の方は、まず以下の4つを覚えておくとよいでしょう。

Color

Colorは、色を管理するVariablesです。

例えば、

• Primary
• Secondary
• Background
• Text
• Border
• Accent

などを登録できます。

Webデザインでは、色の統一がとても重要です。

Variablesで色を管理しておくと、サイト全体の色変更がしやすくなります。

Number

Numberは、数値を管理するVariablesです。

例えば、

• 余白
• 角丸
• 幅
• 高さ
• アイコンサイズ
• 線の太さ

などに使えます。

Auto Layoutの間隔やパディングにも使えるため、実務では非常に便利です。

String

Stringは、文字列を管理するVariablesです。

例えば、

• ボタンの文言
• ラベル
• メッセージ
• 言語切り替え用のテキスト

などに使えます。

多言語サイトやアプリのデザインを作る場合にも活用できます。

Boolean

Booleanは、trueまたはfalseのようなオン・オフを管理するVariablesです。

プロトタイプや条件分岐のような使い方で役立つ場合があります。

初心者のうちは、まずColorとNumberから使い始めるのがおすすめです。

Variablesの基本的な使い方

Variablesの基本的な流れは、以下のようになります。

1. Variablesを作成する
2. 名前を付ける
3. 値を設定する
4. デザインに適用する
5. 必要に応じて値を変更する

Figmaでは、Variablesはコレクション単位で管理します。
公式ヘルプでも、変数コレクションはVariablesモーダルのサイドバーから作成でき、
複数のモードがある場合は列をドラッグしてモードの編集や並べ替えができると説明されています。

最初は難しく考えず、次のような簡単な構成から始めるとよいでしょう。

Color
- color/primary
- color/secondary
- color/background
- color/text
- color/border

Spacing
- spacing/8
- spacing/16
- spacing/24
- spacing/32

Radius
- radius/small
- radius/medium
- radius/large

このように、用途ごとに整理しておくと後から管理しやすくなります。

命名ルールを決める

Variablesを使うときに重要なのが、命名ルールです。

名前がバラバラだと、後からどれを使えばよいのかわからなくなります。

例えば、以下のような名前が混在していると管理しにくくなります。

blue
main blue
button blue
PrimaryColor
color_main

これでは、どの色が正しいメインカラーなのかわかりません。

おすすめは、カテゴリごとにスラッシュで整理する方法です。

color/primary
color/secondary
color/text/default
color/text/subtle
color/background/default
color/background/section
color/border/default

余白であれば、

spacing/4
spacing/8
spacing/16
spacing/24
spacing/32

角丸であれば、

radius/s
radius/m
radius/l
radius/full

のようにしておくと、見やすくなります。

実務では、デザイナーだけでなくコーダーもFigmaを見ることがあります。

そのため、誰が見ても意味がわかる名前にすることが大切です。

Modesとは？

Variablesを理解するうえで重要なのが「Modes」です。

Modesとは、同じ変数に対して複数の値を持たせる仕組みです。

例えば、

color/background

という変数があるとします。

この変数に対して、

Light Mode：#ffffff
Dark Mode：#111111

のように設定できます。

すると、同じデザインでもモードを切り替えるだけで、ライトモードとダークモードを切り替えられます。

これはとても便利です。

従来であれば、ライトモード用のデザインとダークモード用のデザインを別々に作る必要がありました。

しかしVariablesのModesを使えば、同じフレームのまま見た目を切り替えることができます。

Figma公式ヘルプでも、Variable modesはライトモード／ダークモードのような異なる文脈を、複数フレームを作らずに表現できる機能として紹介されています。

実務でよく使うVariablesの例

実務でよく使うVariablesには、以下のようなものがあります。

ブランドカラー

color/brand/primary
color/brand/secondary
color/brand/accent

サイト全体の印象に関わる色です。

クライアントのブランドカラーがある場合は、最初に設定しておくと便利です。

テキストカラー

color/text/default
color/text/subtle
color/text/inverse

本文、補足文、白抜き文字などを管理できます。

背景色

color/background/default
color/background/section
color/background/strong

ページ背景やセクション背景を統一できます。

余白

spacing/8
spacing/16
spacing/24
spacing/32
spacing/48

Auto Layoutのパディングやgapに使えます。

角丸

radius/4
radius/8
radius/16
radius/full

ボタンやカードの角丸を統一できます。

サイズ

size/icon/s
size/icon/m
size/icon/l

アイコンやボタンの高さなどに使えます。

Auto Layoutとの組み合わせ

Variablesは、Auto Layoutと組み合わせることでさらに便利になります。

例えば、Auto Layoutでボタンを作る場合、

• 左右の余白：spacing/24
• 上下の余白：spacing/12
• アイコンと文字の間隔：spacing/8
• 角丸：radius/8

のようにVariablesを使って設定できます。

こうしておくと、後から余白ルールを変更したい場合も、Variablesの値を変更するだけで反映できます。

例えば、サイト全体の余白を少し広めにしたい場合、spacingの値を調整するだけで、複数のパーツに変更を反映できます。

これは、デザインの保守性を高めるうえで非常に重要です。

コンポーネントとの組み合わせ

Variablesは、コンポーネントとも相性が良いです。

例えば、ボタンコンポーネントを作る場合、

• 背景色
• テキスト色
• 角丸
• 余白
• 高さ

などをVariablesで管理できます。

さらに、Variantsと組み合わせれば、

• Primary
• Secondary
• Disabled
• Hover

などの状態管理もしやすくなります。

Variablesを使っておくと、コンポーネントの見た目を統一しやすくなり、デザインシステムに近い運用ができます。

コーダーにとってのメリット

Variablesは、デザイナーだけでなくコーダーにとってもメリットがあります。

FigmaのVariablesは、CSSのカスタムプロパティやデザイントークンに近い考え方です。

そのため、Figma上で

color/primary
spacing/24
radius/8

のように整理されていれば、コーディング時にもルールを把握しやすくなります。

例えばCSSでは、

:root {
  --color-primary: #0066ff;
  --spacing-24: 24px;
  --radius-8: 8px;
}

のように変換しやすくなります。

また、Dev Modeではファイル内のローカルVariable collectionを確認でき、Variablesの名前や値も参照できます。

デザインとコードのルールを近づけられる点も、Variablesの大きな魅力です。

初心者がやりがちな失敗

Variablesは便利ですが、使い方を間違えると管理が難しくなることもあります。

最初から細かく作りすぎる

初心者がやりがちな失敗のひとつが、最初から細かく作りすぎることです。

例えば、

button-blue
button-blue-hover
button-blue-text
card-blue
header-blue
footer-blue

のように細かく作りすぎると、どれを使えばいいのかわからなくなります。

最初は、

color/primary
color/text/default
color/background/default

のようにシンプルに始めるのがおすすめです。

名前を感覚で付ける

「blue」「red」「gray」だけのような名前も注意が必要です。

色そのものの名前だけだと、用途がわかりにくくなります。

おすすめは、色名ではなく用途で名前を付けることです。

例えば、

color/primary
color/error
color/success
color/warning

のようにしておくと、色が変わっても意味が残ります。

仮にPrimaryが青から緑に変わっても、「primary」という役割は変わりません。

使っていないVariablesが増える

Variablesをたくさん作っても、使っていないものが増えると管理が大変になります。

定期的に見直して、不要なVariablesを整理することも大切です。

Stylesと混在して混乱する

FigmaではStylesとVariablesの両方を使えるため、最初は混乱しやすいです。

どちらを使うかはチームや案件によって異なりますが、これから新しく設計する場合は、Variablesを中心に整理していくと拡張しやすくなります。

Variablesを学ぶおすすめの順番

初心者の方は、次の順番で学ぶと理解しやすいです。

まずは、Color Variablesを作ってみましょう。

次に、ボタンや見出しに適用します。

その後、Number Variablesで余白や角丸を管理してみます。

慣れてきたら、Light ModeとDark ModeのようなModesを試してみましょう。

さらに、コンポーネントやAuto Layoutと組み合わせると、実務に近い使い方ができます。

最初から完璧なデザインシステムを作ろうとする必要はありません。

小さく始めて、少しずつ増やしていくのが一番おすすめです。

まとめ

Variablesは、Figmaでデザインの共通ルールを管理するための便利な機能です。

色、余白、角丸、サイズ、文字列などをVariablesとして登録しておくことで、後からまとめて変更しやすくなります。

特に、複数ページのWebサイトやアプリデザインでは、Variablesを使うことで修正時間を大幅に短縮できます。

また、ライトモードとダークモードの切り替え、PCとスマホでの値の変更、デザインシステムの構築にも役立ちます。

初心者の方は、まずColor Variablesから始めるのがおすすめです。

慣れてきたら、Spacing、Radius、Sizeなども管理していきましょう。

Variablesを使えるようになると、Figmaでのデザイン作業がより効率的になり、修正にも強いデータを作れるようになります。

Figmaを実務で使っていきたい方は、Auto Layoutやコンポーネントとあわせて、ぜひVariablesも学んでおきましょう。