Figmaでデザインシステムを作るときは、色・余白・文字サイズなどの値をバリアブルに、文字の組み合わせや効果をスタイルに、ボタンなどの部品をコンポーネントにまとめ、1つのファイルからライブラリとして公開します。
最初から全部をそろえようとせず、よく使う色と文字、ボタンから始めて、使いながら増やしていくと続けやすくなります。
この記事は、チームやクライアントの案件で、色や部品の使い方をそろえたいFigmaの利用者に向けたものです。
内容は、2026年10月15日にFigmaの公式ヘルプセンター（Figma Learn）で確認したものです。
画面の撮影や、実際のファイルでの検証はしていません。
デザインシステムを作る4つの要素
| 要素 | まとめるもの | 例 |
|---|---|---|
| バリアブル | 1つの値（色、数値、文字列、真偽値） | ブランドの色、余白の大きさ、角丸の半径 |
| スタイル | 複数の値の組み合わせ | テキストスタイル（フォント・サイズ・太さ）、グラデーション、影 |
| コンポーネント | 何度も使う部品 | ボタン、入力欄、カード、アイコン |
| ライブラリ | 上の3つをほかのファイルで使えるように公開したもの | 「（会社名やサービス名）デザインシステム」のような名前のファイル |
バリアブルとスタイルの使い分け
Figmaの公式ヘルプでは、バリアブルは1つの値を保存し、スタイルは異なる値の組み合わせを保存すると説明されています（Figma Learn：バリアブルとスタイルの違い）。
| 項目 | バリアブル | スタイル |
|---|---|---|
| 保存できる値 | 1つの値 | フォントのファミリー・サイズ・太さのような値の組み合わせ |
| ライト・ダークなどの切り替え（モード） | できる | バリアブルを使えば、スタイルにもモードを適用できる |
| 別の値を参照する（エイリアス） | できる | できない |
| 使える場所の制限（範囲設定） | できる | できない |
公式ヘルプでは、バリアブルはスタイルの代わりではなく、追加の機能だと説明されています。
色や数値はバリアブル、文字の組み合わせや影・グラデーションはスタイル、と分けて使うのが分かりやすい方法です。
作る手順
- デザインシステム用のファイルを1つ作り、チームのプロジェクトに置く
- 色のバリアブルを、元になる色と、用途ごとの色の2段に分けて作る
- 余白や角丸を、数値のバリアブルとして作る
- 見出しや本文の文字を、テキストスタイルとして作る
- ボタンや入力欄などを、バリアブルとスタイルを使ってコンポーネントにする
- ライブラリとして公開する
ファイルの名前は、ライブラリの名前としてそのまま使われるため、Figmaのヘルプの例にある「Habitz デザインシステム」のように、用途の分かる名前にしておきます。
色は2段に分けて作る
Figmaの公式ヘルプでは、あるバリアブルが別のバリアブルの値を引き継ぐ「エイリアス」で、デザインシステムを整理する方法が紹介されています。
例えば、元になる色「brand-400」を作り、アイコンの色「icon-default」はbrand-400を参照するように作ります。
brand-400の値を変えると、icon-defaultを使っているすべての場所の色が変わります。
元になる色と用途ごとの色を分けておくと、ブランドの色を変えるときも、用途ごとの色を1つずつ直さずに済みます。
バリアブルの作り方は、Figmaのローカルバリアブルの使い方で説明しています。
余白と文字
余白や角丸は、数値のバリアブルにして、使う値を決めておきます。
余白を8の倍数でそろえる考え方は、8の倍数一覧とFigmaの8ポイントグリッドで紹介しています。
文字は、フォントのファミリー、サイズ、太さを組み合わせたテキストスタイルにします。
公式ヘルプでは、数値のバリアブルをテキストスタイルのフォントサイズに使うと、モバイルとデスクトップなどのモードで文字サイズを切り替えられると説明されています。
スタイルの作り方は、Figmaのローカルスタイルの使い方にまとめています。
ライトモードとダークモード
バリアブルには、同じバリアブルに複数の値を持たせる「モード」があります（Figma Learn：Figmaでのバリアブルに関するガイド）。
ライトとダークの2つのモードを作り、フレームのモードを切り替えると、そのバリアブルを使っているレイヤーの色がまとめて切り替わります。
モードがうまく切り替わらないときは、Figmaの変数モードが切り替わらない原因と確認順を参考にしてください。
ライブラリとして公開する
ファイルの中で作ったバリアブル、スタイル、コンポーネントは、そのままではそのファイルの中でしか使えません。
ほかのファイルで使うには、ライブラリとして公開します（Figma Learn：ライブラリの公開）。
- 共有したい要素があるファイルで、左のサイドバーの［アセット］タブを選ぶ
- ［ライブラリ］アイコンをクリックする
- ［このファイル］で今のファイルを見つけ、［公開］をクリックする
- ライブラリの目的や、変更の内容を説明に書く
- 公開したくない要素のチェックを外す
- ［公開］をクリックする
公式ヘルプでは、公開するにはファイルにコンポーネント、スタイル、バリアブルのいずれかが1つ以上必要で、ファイルが下書き（ドラフト）にある場合はプロジェクトへ移す必要があると説明されています。
使えるプラン
| 機能 | 使えるプラン（2026年10月15日確認） |
|---|---|
| ライブラリの公開 | すべての有料プラン |
| バリアブルのチームライブラリへの公開 | エデュケーションプランとすべての有料プラン |
| コンポーネントとスタイルの作成 | 無料のスタータープランでも可能（ほかのファイルへの公開はできない） |
ライブラリを公開するには、元のファイルへのフルシートと編集の権限も必要です。
ビジネスプランとエンタープライズプランでは、公開先を特定のチームや組織全体に選べます。
公開した後の運用
元のファイルで色や部品を直しても、更新を公開するまでは、ほかのファイルには反映されません。
更新を公開すると、そのライブラリを使っている人の画面では、ライブラリのアイコンに青いバッジが付き、更新を確かめて取り込めます。
公式ヘルプでは、更新を公開するたびに説明を求められるため、何を変えたかを書いておくと、使う人が判断しやすくなります。
作業中の部品などを公開したくない場合は、ライブラリの画面で要素を右クリックし、［公開時に非表示］を選びます。
［公開］が押せないとき
- ファイルにコンポーネント、スタイル、バリアブルがない
- 前回の公開から、変更していない
- 変更した要素が［公開時に非表示］になっている
- ファイルが下書き（ドラフト）にある
開発者と値を共有する
バリアブルは、Dev Modeで開発者が確かめられるほか、JSONに書き出してコードの変数と合わせることもできます。
方法はFigma VariablesをJSONへ書き出す方法、Tokens StudioとStyle Dictionaryの連携、Figma Dev Modeの使い方で説明しています。