FigmaでUIデザインを学ぶ！
カフェ注文画面から始めるデザインシステムの作り方
第３回：ボタン・カードをつくって学ぶ再利用設計

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

今回の記事では、

• コンポーネント化の基本
• ステート（押せる・押せないなどの状態）の表現
• 実際のボタン・カード・アイコンの作成

を中心に、実務に近い考え方をハンズオンで体験していきます。

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

UIパーツを「再利用可能な部品」にする理由

「このボタン、いろんな画面で同じように出てくるなあ」

「前に作ったアイコン、どこだっけ…？」

「余白とか文字サイズ、前と微妙に違ってない？」

そんな、「ちょっとずつなんか違う問題」を解決するのが、コンポーネント化（部品化）という考え方です。

Figmaでは、特定のパーツを「コンポーネント」として定義しておくことで、1か所を直せば、すべてに反映されるようになります。

特に、今回のようなカフェの注文画面のように、複数の商品やボタンが並ぶUIでは、再利用しやすい部品をつくることが肝心です！

作成するUIパーツ一覧

今回は次の3つのパーツを作成していきます。

カテゴリ選択ボタン
「おすすめ」「ドリンク」「フード」などのカテゴリをタブのように選べるボタン。

商品カード
商品名・価格・追加ボタンが含まれた、商品を選ぶためのUIブロック。

「レジに進む」ボタン
画面下部に表示される、「レジに進む」ボタン。

「レジに進む」ボタンのステートをつくる

まずは「レジに進む」のような、明確なアクションが求められるパーツから始めましょう。

「レジに進む」ボタンには、次のようなステート（状態）があります。

• 通常状態（enabled）…タップできる
• 無効状態（disabled）…タップできない

※今回はスマホ想定のUIなので、ホバー状態は省略します。 前回作っていたFigmaのデータを開きましょう。
現状、Masterフレームには、第１回目で作成した「レジに進む」ボタンがありますので、こちらを使っていきましょう。

ボタンやカード用のフレームを作成する

ではここで、ボタンやカードのマスターを置いておくためのフレームを作ります。
コンポーネント用とレイアウト用でフレームを分けると、作業や管理がしやすくなるため仕訳けておきましょう。

（１）Masterフレームを選択し、【Ctrl+Dキー】Macの場合は【⌘+Dキー】を押して、フレームを複製します。

（２）複製したフレームを「MainUI」に名前を変更します。
Masterフレームの「レジに進む」ボタンは削除し、MainUIフレームには、「レジに進む」ボタンのみ残しておきましょう。

通常状態（enabled）のデザイン

（１）MainUIフレームの「レジに進む」ボタンを編集していきます。
背景の濃い緑色は、前回作成したカラースタイル button/primary（#5E6135）がすでに適用されています。
しかし、ボタン上のテキストは「#FFFFFF」のままになっていますので、スタイル適用する必要があります。
文字にtext/on-primary（#FFFFFF）を適用しましょう。

（２）前回、テキストスタイルも登録していました。「レジに進む」の文字を選択し、Button/Primaryを設定しておきましょう。

無効状態（disabled）のデザイン

「レジに進む」ボタンは、カートに何も入っていないときには押せなくする…そんな状態を見た目で表現する必要があります。
元のbutton/primaryの色の不透明度を40%に落とした色を、無効状態（disabled）として設定しましょう。

（１）通常状態の「レジに進む」ボタンを選択します。
デザインパネルから「コンポーネントを作成」をクリックします。

（２）同じくデザインパネルの「バリアントを追加」ボタンをクリックすると、ボタンがもう１つ追加されます。

（３）新しく追加されたバリアント（＝もう1つのボタン）を「無効状態（disabled）」として編集します。
不透明度を40%に変更しましょう。
およそ３０～４０％の不透明度を設定すると、「押せない」「無効だ」ということを視覚的にユーザーに伝えることができますよ。

（4）buttonコンポーネントを選択し、デザインパネルからプロパティ名を変更します。
プロパティの「プロパティを編集」アイコンをクリックし、「名前」を「State」に変更、値は「デフォルト」を「enabled」、「バリアント２」を「disabled」に書き換えます。

バリアントを使ってみよう

今の手順、コンポーネントを作ってバリアントを追加しましたが、これの一体どこが便利で、どうやって使うのか？がイメージしづらいですよね。
いったんここで、どのように使うのかを確認しておくと、いかに便利な仕組みを作ったのかがわかりますよ。

（１）左側のパネルから、「アセット」を選択します。
※ここで出てくるライブラリ一覧は、私の画面と同じである必要はありません。

（２）検索バーに、先ほど設定したプロパティ名「State」と入力します。
buttonが出てきましたね。

（３）アセットパネルからbuttonをドキュメント上にドラッグ＆ドロップします。
通常状態（enabled）の「レジに進む」ボタンがレイアウトされました。

（４）必要な時に、無効状態（disabled）の「レジに進む」ボタンに切り替えることができます。
デザインパネルのbuttonを確認すると、プロパティ名「State」の右側に「enabled」と書いてありますね。
これをクリックして出てきたリストから、「disabled」を選択しましょう。
一瞬で無効状態（disabled）の「レジに進む」ボタンに切り替えることができました！

このようにしてコンポーネントにしておくと、レイアウトの際に非常に効率よく、ルールを守って仕上げることができるんです。
便利なことを確認したら、アセットからドラッグ＆ドロップしたbuttonは削除しておきましょう。
左側のパネルも、「アセット」から「ファイル」に戻しておきます。

カテゴリ選択ボタンをつくる

次は、「ドリンク」「フード」などを切り替えるカテゴリアイコンです。
ボタンは、「選択されているとき・されていないとき」で、見た目の違いを明確にする必要があります。

選択状態（selected）のデザイン

（１）「おすすめ」と、文字を入力します。以下のように設定します。

テキストスタイル：Body/Regular

カラースタイル：text/on-primary

（２）文字の設定が終わったら、文字を選択し、【Shift+Aキー】でオートレイアウトを設定します。
要素内の余白（Padding）設定が簡単になりますよ。
ボタンを作る際は、いつもオートレイアウトを使ってください。

オートレイアウトの名前を「btn-category」に変更しておきましょう。

（３）btn-categoryの色をbutton/primaryにします。

（４）パディングと角丸の設定を以下のようにしましょう。

パディング：左右24／上下16
角の半径：8

非選択状態（unselected）のデザイン

（１）次に、選択されていない状態のボタンをつくりましょう。「レジに進む」ボタンと同様です。
選択状態の「おすすめ」ボタンを選択します。
デザインパネルから「コンポーネントを作成」をクリックし、「バリアントを追加」ボタンをクリックします。

（２）新しく追加されたバリアントを「非選択状態（unselected）」として編集します。
塗りをbutton/secondaryに変更しましょう。

（4）btn-categoryコンポーネントを選択し、デザインパネルからプロパティ名を変更します。
「名前」を「Select」に変更、値は「デフォルト」を「selected」、「バリアント２」を「unselected」に書き換えます。

（５）btn-categoryコンポーネントを選択し、コピー＆ペーストします。
コンポーネントは、同じ場所に貼り付けられるので、横にドラッグしましょう。
テキストを「ドリンク」に打ち直します。

（６）同じ手順で、「フード」「セット」も作っておきましょう。
この２つのコンポーネントを選択し、デザインパネル>レイアウトから「サイズ自動調整」アイコンをクリックしておきましょう。コンポーネントのサイズがボタンのサイズにフィットします。

商品カードをコンポーネント化する

では最後に、今回のメインとなる「商品カード」をつくります。

（１）長方形を作成し、以下のように設定します。

サイズ：W152、H226

角の半径：8

塗り：background/card ドロップシャドウ：位置X3、Y３、ぼかし3

（２）商品の画像を設定します。（１）の長方形を選択し、【Ctrl+Dキー】Macの場合は【⌘+Dキー】を押して、長方形を複製します。
複製した長方形を、以下のように設定します。

サイズ：H113

角の半径：上8、下0

ドロップシャドウ：削除
塗り：商品の画像

（３）ここで、カードと画像を選択し、【Shift+Aキー】でオートレイアウトを設定します。
レイヤー名を「card」にします。

（４）カードの中に「カフェラテ」と入力し、文字を以下のように設定します。

テキストスタイル：Body/Regular

カラースタイル：text/primary

（５）「カフェラテ」の文字を【Ctrl+Dキー】Macの場合は【⌘+Dキー】で複製し、「\」に打ち換えます。
この文字を以下のように設定します。

テキストスタイル：Price/Unit

（６）「\」の文字を【Ctrl+Dキー】Macの場合は【⌘+Dキー】で複製し、「450」に打ち換えます。
この文字を以下のように設定します。

テキストスタイル：Price/Number

（７）「450」の文字を【Ctrl+Dキー】Macの場合は【⌘+Dキー】で複製し、「追加」に打ち換えます。
この文字を以下のように設定します。

テキストスタイル：Body/Regular
カラースタイル：button/secondary

（８）「追加」のアイコンを入れます。
ツールパネルの「アクション」をクリックします。
「プラグインとウィジェット」に切り替え、検索バーに「material symbols」と入力をします。
一番上に出てきた「Material Symbols」を選択しておきましょう。

（９）実行を押します。

（10）出てきたボックスの検索バーに「add」と入力します。
「add_circle」をクリックすると、画面上にアイコンが追加されます。
カラースタイル：button/secondaryに変更しましょう。

（11）アイコンを「追加」の前にドラッグ＆ドロップで移動させます。
レイヤーパネルを見て、cardの中に入っていればOKです。

（12）値段と追加ボタンのパーツを、それぞれ横並びにしましょう。
\マークと「450」を選択し、【Shift+Aキー】でオートレイアウトを設定します。以下のように設定します。

オートレイアウト

並び：水平

オブジェクトの左右の間隔：4

揃え：下揃え（左）
オートレイアウト設定：文字のベースラインにそろえる（有効）

（13）同じように、add_circleアイコンと「追加」を選択し、【Shift+Aキー】でオートレイアウトを設定します。以下のように設定します。

オートレイアウト

並び：水平

オブジェクトの左右の間隔：4

揃え：左揃え

（14）値段と追加ボタンを選択し、【Shift+Aキー】でオートレイアウトを設定します。以下のように設定します。

オートレイアウト

揃え：左揃え

（15）「カフェラテ」と、（14）で作ったオートレイアウトを選択し、さらに【Shift+Aキー】でオートレイアウトを設定します。

以下のように設定します。

オートレイアウト

W：152

パディング：左右８／上下16

オブジェクトの左右の間隔：32

ここで、オブジェクトの左右の間隔：32にすると、はみ出してしまいます。これは親要素のcardのオブジェクトの左右の間隔：10が原因です。こちらを０にしておきましょう。

（16）あともう少しでカードが終わります。
値段と追加ボタンのオートレイアウトを選択し、Wをコンテナに合わせて拡大、オブジェクトの左右の間隔を自動にします。
そうすると、カードの中の余白バランスを自動でとってくれるため、デバイスや要素の変更にも強くなります。
コーディングに慣れている方は、「justify-content: space-between」をイメージしてください。

今回は、これで完成です！　下図のようになっていますか？
レイヤーパネルの構成も、いま一度確認してみましょう。

余白トークンについて

前回、「Figmaでは色や文字のようにスペーシングのスタイル登録はできません。」とお伝えしました。
ただし、余白のルールが一貫していないと、コンポーネントの見た目にばらつきが出てしまいます。
そのため今回は、「レジに進む」ボタンには padding: 16px 40px、カテゴリボタンには padding: 16px 24px を適用しました。

こうした余白の値は、本来はバリアブル（変数）として登録しておくことで、チーム内で共通認識を持ちやすくなります。

今回はバリアブルに登録はしませんでしたが、4・8・16・24・32・40pxを使うと決めていました。

Figmaのスペーシング用バリアブルは、スタイルのように自動で反映はされませんが、ルールとして決めておき、オートレイアウトで手入力していくことで整ったデザインにつながります。

今後はこの「余白ルール」も、デザインシステムの一部として育てていきましょう！

おわりに

今回の記事では、UIパーツを「再利用できる部品」として整える方法を学びました。

ボタン・アイコン・商品カード…こうした小さな単位の設計をしっかり行うことが、結果的に「整ったUI」や「作りやすいデザイン」につながります。

次回・第4回目では、これまで作った部品たちを組み合わせて、画面全体をモジュールとして構築していくフェーズに入ります。

さらに一歩、実践的な「デザインシステムの世界」に踏み込んでいきましょう！

関連記事