FigmaでUIデザインを学ぶ！カフェ注文画面から始めるデザインシステムの作り方第１回：デザインシステムってなに？ | お役立ち情報

こんにちは！ Shinobuです。

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

今回から、Figmaを使ったデザインシステムの連載がスタートします！
Figmaを使ってUIデザインの基本を学びながら、デザインシステムの考え方にも少しずつ触れていきますよ。

「デザインシステムって、難しそう…」
「Figmaでどうやって作るのか知りたいけど、大変そう…」

そんな風に感じている人でも大丈夫。

今回のテーマは『カフェの店内注文画面』。
シンプルなUIを作りながら、デザインの準備と、色や文字のスタイル管理―デザイントークン―の第一歩を体験してみましょう！

デザインシステムって？

そもそも、「デザインシステム」とは何でしょうか？
デザインシステムとは、デザインや開発を効率化するための「ルールと部品のセット」のことを指します。
色や文字、ボタンなどの共通ルールをまとめることで、誰が作ってもブレないデザインができあがります。
たとえば「見出しの色とフォントはこれ！」と決めておけば、あとはそれらのパーツを組み合わせるだけでレイアウトが仕上がります。

注文画面の準備をしよう

完成画面の確認

いまから作る画面は、こちら。

最近、飲食店でイートインすると、「注文はこちらの二次元コードを読み込んでくださいね。」と、案内されることが増えましたよね。
これまでは店員さんに直接注文していましたが、スマホからタップするだけで簡単に注文することができるようになりました。

今回Figmaを使って作る画面は、まさにその「カフェの店内注文画面」です。
この記事では、デザインシステムについてできる限り簡単に解説していきますね。

ステップ1：まずはフレーム（キャンバス）を作ろう

最初に、Figmaの画面上にスマホサイズのフレームを作ります。

このフレームは、これから作るパーツたちを並べていくキャンバスです。
ボタンとかアイコンなどを置いておきますよ。

（１）デザインファイルを新規作成したら、ファイルに名前を付けておきましょう。
ここでは「Green Cafe」と名前を付けておきました。
ツールパネルからフレームを選択し、右側のデザインパネルからスマホサイズのフレームを選びます。
ここでは「iPhone 13& 14　　390×844」を選択しました。

（２）これがパーツを置いておくためのフレームです。
今回はスマホサイズを選択しましたが、実際はどんなサイズでもかまいません。
フレーム名を「Master」に変更しておきましょう。

ステップ2：デザイントークンの基本って？

「デザイントークン」とは、色・文字・余白などのスタイル情報を、『名前をつけてまとめて管理できる』仕組みのことです。

たとえば色は、通常「#5E6135」のようなカラーコードで表されますが、コードだけでは何に使う色なのかパッと見てわかりませんよね。

そこで、Figmaではスタイルに名前をつけて登録しておくことで、あとからデザイン全体を一括で変更することができるようになります。

要素	スタイル名の例
ボタンの色	Primary
背景の色	Base
見出し文字	Heading
本文の文字	Body
余白（8px）	Sp-xs
余白（16px）	Sp-md

こうやって名前をつけておけば、「どこで使われているか」が分かりやすくなり、変更も簡単に。
これが、UIデザインを効率よく進めるための基礎になります。

「Primary」や「Base」という名前をつけてFigmaに『スタイルとして登録』します。
今回はまず、色のスタイルを登録してみるところから始めてみましょう！

ステップ3：パーツを作ってみよう！

背景の色をつける

まずはフレームの背景色を設定しましょう。
これは「Base」としてスタイル登録しておきます。

（１）32×32pxの正円を作り、塗りを「#F3EFE5」にします。
右隣に「Base」と文字を入力します。

（２）今作った円と文字を選択し、デザインパネルの図中に示しているアイコンをクリックします。
FigmaはアップデートでUIが変わることがありますが、【Shift+Aキー】のショートカットはとても便利なので覚えておくと良いですよ。

オートレイアウトにしたら、中央に配置しておきましょう。

（３）ここまではFigmaの基礎操作。今からスタイル登録をしていきます。
正円を選択します。
デザインパネル>塗り>カラーコード左側のカラーサムネイルをクリック。
「＋」アイコンをクリック。
「スタイル」タブをクリックして選択します。

「名前」に「Base」と入力をしたら、「スタイルの作成」ボタンをクリックして登録します。

（４）円を選択していると、「塗り」の色が「Base」になっています。
何も選択していない状態だと、スタイル>色スタイルに「Base」が登録されていることがわかります。
選択していない時に「スタイル」に表示されているものが、このファイル上で登録されているスタイルです。

ロゴ

次は、「Green Cafe」のロゴを作りましょう。

（１）テキストツールで「Green Cafe」と入力し、以下のように設定します。
フォントファミリー：Kaushan Script
フォントサイズ：36
文字間隔：-2px
配置：中央揃え
塗り：#5E6135

（２）色の登録をします。先ほどと同じ手順です。
ロゴを選択した状態で、塗り>サムネイル>「+」アイコン>「スタイル」から登録します。
名前は、「Primary」にします。

「Primary（プライマリー）」とは、「主な」というような意味があります。
レイアウトの中で一番よく使う「メインの色」のことを指します。
たとえば、「注文する」ボタンや、リンク、強調したい部分などに使われる色です。
サイトやアプリのイメージを決める大切な色なので、ブランドカラーを使うことも多いです。
ここではブランドカラーであるロゴの色をプライマリーとして登録しました。

（３）文字の設定が終わったら、文字を選択し、【Shift+Aキー】でオートレイアウトを設定します。
オートレイアウトの名前を「logo」に変更しておきましょう。