FigmaでUIデザインを学ぶ！カフェ注文画面から始めるデザインシステムの作り方第２回：色・文字・余白を整える、デザイントークンの設計術 | お役立ち情報

こんにちは！ Shinobuです。

普段はグラフィックデザイナーや講師として、大阪を中心に活動をしています。

今回は、デザインシステムシリーズ、第２回目です。
前回から引き続き、こちらのカフェの店内注文画面を作っています。

みなさんはFigmaでデザインをしていて、こんなことを感じたことはありませんか？

「同じ色を何度も手打ちしている気がする…」
「パーツごとに文字サイズがバラバラになっちゃった」
「余白の指定がなんだか場当たり的…」

これらは、デザインにルールがないことで起きがちなプチストレスです。

そんなときに役立つのが、「デザイントークン」という考え方。
色や文字、余白などの見た目に関するルールをあらかじめ定義しておくことで、作業の効率がぐんと上がり、チームでも共有しやすくなります。

この第2回目の記事では、色・文字・余白の3つを中心に、実際にFigmaで「トークン」を設計しながら学んでいきます。

といっても、難しいコードや理論はナシ。
第１回目で作った「カフェのUIデザイン」をベースに、Figmaのスタイル機能を活用して、手を動かしながらルールを整えていく体験をしてみましょう。

第１回目の記事をまだ読んでいない方は、そちらを読んでから第２回目の記事を読み進めてくださいね！

デザイントークンをおさらい

「デザイントークン」とは、色・文字サイズ・余白などの視覚的な要素に名前をつけてルール化するための仕組みのことです。

例をあげると…

color/text/base → 通常の本文に使う文字色
font/heading/lg → 大見出しに使うフォントサイズとウェイト
spacing/md → よく使う16pxの余白

このように、あいまいになりがちな見た目のルールをあらかじめ整理しておくことで、

一貫性のあるデザインができる
再利用性の高いパーツが作れる
将来的に画面やパターンが増えても整理・変更しやすい

というメリットがあります。
それではまずは、色から整えていきましょう！

カラートークンをつくる

Figmaのカラースタイル機能を使って、デザインで使う色をトークンとして整理していきます。
最終的には後述の「バリアブル」で管理できるようにしますが、まずはカラースタイルとして登録していきましょう。

今回のカラースタイル一覧

カラースタイル名	カラースタイル名	カラースタイル名
background/base	#F3EFE5	画面全体の背景色
background/card	#FFFFFF	カードの背景色
button/primary	#5E6135	主役のボタン色
button/accent	#FF3030	アクセントのボタン色
button/secondary	#B6D3A2	セカンダリーボタン色
text/primary	#5E6135	主なテキスト色（ボタン内文字など）
text/on-primary	#FFFFFF	ボタン上の文字色（主にprimaryボタン内）

色をスタイル登録する

Figmaで色を登録する際は、「スタイル」に名前をつけて保存しておくと、あとから管理しやすくなります。
色のサンプルとスタイル名を「Master」フレームに並べてから、1つずつ色スタイルとして登録していきましょう。
※同じ色コード（#FFFFFFや#5E6135など）でも、使われる場所によって別名で登録しておくと、用途に応じて変更しやすくなります。

BaseとPrimaryの修正

まずは前回の第１回目で登録した「Base」と「Primary」を、今回の命名ルールに合わせて整理しておきましょう。（１）前回登録していた「Base」の修正をします。
何も選択していないことを確認し、右側のデザインパネル>スタイル>色スタイル　の、「Base」にカーソルを合わせます。
右側に「スタイルを編集」アイコンが表示されるので、アイコンをクリックしましょう。

（２）名前を「background/base」に変更します。確定は、【Enterキー】でOKです。
すると、「Backgroud」>「Base」というような階層で表示されます。

（３）同じようにして、「Primary」を「button/primary」で登録しなおしましょう。

命名ルールのポイント

/ （スラッシュ）を使ってカテゴリ分けすると、Figma上でフォルダ階層として整理される
名前から「何に使う色か」がわかるようにする
チームで共有したときに、探しやすく・使いやすくなる

全ての色の登録

では次に、全ての色の登録を行いましょう。

第１回目に行ったように、まずは「Master」フレームに色とカラースタイル名をレイアウトしてからカラースタイル登録をしましょう。

表内の作業が終わると、「Master」フレームとカラースタイルはこのようになっているはずです。

小規模なシステムだとここまででも十分なのですが、今回はさらにステップアップして、バリアブルを使って登録していきます。

バリアブルの設定

Figmaには「カラースタイル」と「バリアブル」という2つのしくみがあります。
ここまでやってきた操作は、「カラースタイル」です。
どちらも「色を登録して使い回す」ためのものですが、少し役割が違います。

カラースタイルとは？

「この色は見出しに使う色です」といった感じで、見た目のルールを決めて共有するための機能です。

スタイルガイドとして色を管理できる
パネルでまとまりが見えるので整理しやすい
チームでも共通の色を使いやすい

バリアブルとは？

バリアブルは、特定の色や数値に「名前をつけておいて使い回す」しくみです。
※「変数」に近い考え方ですが、ここではむずかしい話はしません。

名前をつけて色や数値を登録できる
あとからその名前の内容を変えると、すべてのデザインに一気に反映される
ライトモード／ダークモードを切り替えることもできる

たとえば「button/Primary というバリアブルに #FF0000を登録」しておくと、
「ボタンの色を変えたい！」というときに、その名前の色を変えるだけで全部のボタンが変わります。

どう使い分けるの？

カラースタイル：見た目のルールを整理・共有したいときに使う
バリアブル：色や数値の「意味」や「用途」でまとめて管理したいときに使う

どちらか一方ではなく、両方を組み合わせて使うと、チームでもプロジェクトでももっと効率的になります！

バリアブルに色を登録する

コレクションの作成（１）何も選択していないことを確認し、右側のデザインパネル>バリアブルの右側「バリアブルを開く」アイコンをクリックしましょう。

（２）「このコレクションにはバリアブルがありません」と出るので、「＋作成」ボタンをクリックし、出てきたリストから「色」を選択します。

（３）左上の「サイドバーを切り替える」アイコンをクリックし、サイドバーを表示します。

（４）表示されたサイドバーのオプションから、「名前を変更」をします。「コレクション１」を「ThemeColor」にしてください。
※「Theme Color」のように単語の間にスペースを入れると、うまく機能しないことがあります。必ず続けて書いてくださいね。

色を登録する

カラートークン一覧

※下の表は先ほどと同じ内容ですが、バリアブル用に登録しなおします。

カラースタイル名	カラースタイル名	カラースタイル名
background/base	#F3EFE5	画面全体の背景色
background/card	#FFFFFF	カードの背景色
button/primary	#5E6135	主役のボタン色
button/accent	#FF3030	アクセントのボタン色
button/secondary	#B6D3A2	セカンダリーボタン色
text/primary	#5E6135	主なテキスト色（ボタン内文字など）
text/on-primary	#FFFFFF	ボタン上の文字色（主にprimaryボタン内）

命名ルールのポイント

系統ごとに / で区切る（例：color/background/base）

（１）「色」をダブルクリックし、「color/background/base」に変更します。

（２）「FFFFFF」のサムネイル部分をクリックし、ベースカラーである「#F3EFE5」に変更します。
※面倒に感じるかもしれませんが、「カラースタイルで登録した色」は、そのままではバリアブルには出てこないんです。両者は別々に管理されているので、それぞれに登録が必要となります！

（３）カラートークン一覧を確認しながら、全てのトークンを登録していきましょう！
一番上の画面全体の背景色は登録しましたから、２番目のカードの背景色から登録しましょうね。
「＋バリアブルを作成」>「色」をクリックして登録します。

全てを登録し終わったら、このようになります。
バリアブルボックスの「×」を押して、閉じておきましょう。

テキストトークンをつくる

次は、文字まわりです。見出しと本文、それぞれに合ったテキストトークンを作っていきましょう。

UIにおけるテキスト設計の基本

見出し：サイズ大きめ・太め・間隔は少し広め
本文：小さめ・行間ゆったり・読みやすさ重視
補足や注釈：小さいけど行間はたっぷり、色も少し薄めが多い

これらを毎回手打ちしていると事故の元。ちゃんとテキストトークン名をつけて登録していきます。

ではまずは、テキストスタイルから登録していきます！

今回のテキストスタイル一覧

スタイル名	フォント	サイズ	ウェイト	用途
Body/Regular	Noto Sans JP	14	Regular	本文用
Price/Number	Noto Sans JP	24	Bold	値段の数字
Price/Unit	Noto Sans JP	16	Bold	円マーク
Button/Primary	Noto Sans JP	16	Bold	レジに進むボタン
Caption/Bold	Noto Sans JP	12	Bold	カート内の商品数バッジ

文字をスタイル登録する

（１）「Master」フレームに、「本文用」と文字を入力し、フォントファミリーを「Noto Sans JP」、ウェイトを「Regular」、フォントサイズを「14px」にします。

（２）テキストパネル>タイポグラフィ　の右側、４つの丸アイコン（スタイルを適用）をクリックします。
さらに、「＋」マークをクリックし、名前を「Body/Regular」と登録します。

最後に「スタイルの作成」ボタンを押せば、スタイル登録が完了します。

（３）今回のテキストスタイル一覧を見ながら、「本文用」以降も登録してみましょう。
全て登録すると、以下のようになります。

コレクションの作成

スタイル登録が終われば、バリアブルの登録です。

（１）何も選択していないことを確認し、右側のデザインパネル>バリアブルの右側「バリアブルを開く」アイコンをクリックしましょう。
（２）サイドバーのオプションから、「コレクションを作成」をクリックします。
名前を「Typography」にします。

文字を登録する

先ほど登録したカラーと違って、テキストは「フォントの種類」「フォントの太さ」「フォントのサイズ」など、各プロパティごとにバラバラで登録する必要があります。

ところが、実は「font-family」や「font-weight」にバリアブルを使っても、Figmaではテキストの見た目（フォント）は切り替わりません。
あくまで「Noto Sans JP」という文字列を登録するだけなので、フォントの見た目が変わることはないのです。

じゃあ、なぜバリアブルを登録するのか？

フォントのルールを明示的に残せる
チーム内で「本文やボタンはこのフォントだよ」と共有しやすい
デザインシステムとして、整った構造で管理できる

つまり、実際の見た目を変えることに使うためというよりは「ルールを残すため」に登録するんだよ、と覚えておいてください！
フォントの設定は、テキストスタイルから行うってことです。

テキストトークン一覧

font-family

トークン名	フォント名	用途
font-family/base	Noto Sans JP	本文・ボタン・キャプションなど共通

font-weight

トークン名	ウェイト名	用途
font-weight/regular	Regular	本文・商品名・追加ボタン用
font-weight/bold	Bold	値段・円マーク・ボタン・キャプション用

font-size

トークン名	サイズ（px）	用途
font-size/body	14	本文・商品名・追加ボタン用
font-size/price-number	24	値段の数字用
font-size/price-unit	16	円マーク用
font-size/button-primary	16	レジに進むボタン用
font-size/caption	12	カート内の商品数バッジ用