前回学習した「デザインシステム」は、色や文字、コンポーネント、デザインルールなどを共通化し、
複数の画面で一貫したデザインを作るための仕組みです。
しかし、ルールを決めただけでは、デザインの変更を効率化できません。
例えば、Webサイト全体でブランドカラーとして青色を使っているとします。
ボタン、リンク、見出しなど、あちこちで同じ青色を設定している場合、ブランドカラーを変更するときには、それぞれの設定を修正する必要があります。
こうした問題を解決するための機能が、Figmaの
Variables（変数） です。
今回は、変数の基本的な考え方を理解し、実際に色の変数を作成してデザインに適用してみましょう。
Variablesとは
Variablesは、デザインで使う値に名前を付けて、まとめて管理するための機能です。
例えば、次のような変数を作成できます。
| 変数名 | 値 |
|---|
| color/primary | #2563EB |
| color/text | #222222 |
| color/background | #FFFFFF |
| spacing/small | 8 |
| spacing/medium | 16 |
ここで重要なのは、
名前と値を分けて管理するという考え方です。
通常のデザインでは、オブジェクトに直接色を設定します。
一方、変数を使う場合は、オブジェクトに「color/primaryという変数の値を使う」と設定します。
この違いによって、変数の値を変更するだけで、その変数を参照している複数のオブジェクトに変更を反映できます。
プログラミングで扱う、変数や定数と同じ考え方ですね。
変数の使い方
Variablesには、いくつかの種類があります。
| 種類 | 管理する値 | 使用例 |
|---|
| Color | 色 | ブランドカラー、文字色、背景色 |
| Number | 数値 | 余白、サイズなど |
| String | 文字列 | 文言など |
| Boolean | 真偽値 | 有効・無効などの状態 |
ただし、変数に設定した値を、どのデザイン設定にも自由に使えるわけではありません。
利用できる場所は変数の種類や、Figma側で対応しているプロパティによって異なります。
今回は、最も目で見て違いを確認しやすい Color（色） を使います。
実習
まずは、変数を適用するための簡単なデザインを作成します。
手順1：新しいFrameを作る
1. Figmaで練習用のファイルを開きます。
2. キャンバス上で F キーを押してFrameツールに切り替えます。
3. キャンバス上にFrameを1つ作成します。
4. 左側のレイヤーパネルで、作成したFrameを Color Variables Practice などの名前に変更します。
Frameのサイズは、今回の練習で見やすい大きさ（テキトー）で問題ありません。
手順2：長方形を3つ作る
1. R キーを押して長方形ツールに切り替えます。
2. 作成したFrameの中に長方形を3つ配置します。
3. それぞれのレイヤー名を Button A、Button B、Link Sample などに変更します。
4. 右側のデザイン設定にあるFillで、3つのオブジェクトに同じ青色を設定します。
この段階では、3つのオブジェクトに色を直接設定している状態です。
この青色を変数で管理できるようにするのが、今回の目的です。
Color変数を作成する
ここからVariablesを操作です。
FigmaのUIは更新されることがあるため、画面上の表示位置やボタン名が異なる場合があります。
重要なのは、変数を管理する画面でColor型の変数を作成することです。
手順1：変数の管理画面を開く
1. キャンバス上で何も選択していない状態にします。
2. 右側のデザイン設定にある、変数やローカル変数を管理する入口を探します。
3. 変数の管理画面を開きます。
変数の管理機能は、Figmaのローカル変数を扱う画面から操作します。
現在のバージョンでは、左メニューにバリアブル(Variables)を作成するボタンが配置されています。
見つからない場合は、現在のUIで「Variables」または「ローカル変数」に相当する項目を確認してください。
手順2：Collectionを作成する
Variablesは、Collection（コレクション）というまとまりの中で管理します。
新しいCollectionを作成し、名前を
Design Tokens にします。
Collectionは、関連する変数をまとめておくためのグループです。例えば、色や余白など、プロジェクトで共通利用する値を整理できます。
手順3：Color変数を作成する
作成したCollectionの中に、次の変数を作成します。
名前：color/primary
種類：Color
値：#2563EB
名前に / を使うと、色の分類を意識した整理ができます。これは命名上の工夫であり、必ずこの形式にしなければならないわけではありません。
作成した変数に、青色の値が設定されていることを確認してください。
名前で「color/@@」とした場合、左項目のcolorとしてまとめられて、名前が「primary」となってしまいますが、これはバグではありません。
オブジェクトに変数を適用する
変数を作成しただけでは、キャンバス上のオブジェクトの色は変わりません。
オブジェクト側で、
作成した変数を参照するように設定します。
手順1：Button Aを選択する
キャンバス上の
Button A の長方形を選択します。
ここで選択するのは、長方形そのものです。
Frameや別のオブジェクトを選択していると、意図したFillの設定ができません。
手順2：Fillに変数を設定する
右側のデザイン設定にある塗り（Fill）を確認します。
塗り（Fill）の色を選択する操作から、色の変数を選択する画面を開きます。
Design Tokens の中にある color/primary を選択します。
「カスタム」タブを「ライブラリ」に切り替えると、先ほど作った「color/primary」の「color」のグループ表示が出ています。
Variablesの色を変更して、Button Aの色が、変数の値に基づく青色になっていることを確認します。
選択した色のところが「color/primary」となっているのを確認してください。
VariablesとDesign Systemの関係
前回学習した
Design Systemと、今回の
Variablesを整理してみます。
（ついでにComponentも）
Design System：デザインのルールや再利用する部品を体系化したもの
Variables：そのルールで使う色や数値などを管理する仕組み
Components：ボタンや入力欄など、繰り返し利用するUI部品
例えば、会社のWebサイトでブランドカラーを統一したい場合、
Variablesで色を管理し、Componentsでボタンを共通化し、Design Systemで利用ルールを整理できます。
それぞれは別の機能ですが、組み合わせることでデザインの一貫性と変更のしやすさが向上します。
あとがき
変数という言葉を聞くと、
プログラミングの知識が必要だと感じるかもしれません。
しかし、FigmaのVariablesを使うは、プログラムとはまるで違います。
「色に名前を付ける」
「同じ名前の色を複数の場所で使う」
「名前に対応する値を変えると、利用している場所にも反映される」
という考え方が理解できれば、基本はつかめます。
Web制作でも、サイト全体で使う色や余白を統一することは重要です。
Figmaで変数を扱う経験は、実際のWeb制作における設計や管理の考え方にもつながっていきます。
でも、1点だけ残念なお知らせがあります。
無料では、Variablesは、
コレクション内に1つしかセットできません。
2つ以上使いたい場合は、有料版にアップグレードしなければいけません。
でも、コレクションに１つのみという制約ですが、コレクション自体は複数登録できます。
こういうことも認識して便利に使い倒しましょう！
0 件のコメント:
コメントを投稿