こんにちは！ Shinobuです。
普段はグラフィックデザイナーや講師として、大阪を中心に活動をしています。
今回は、デザインシステムシリーズ、第４回目です。
こちらのカフェの店内注文画面を今回で仕上げていきましょう！
今回の記事では、
- ステータスバーの追加
- これまで作ったパーツのレイアウトとアイコンの作成
という流れで、実務に近い考え方をハンズオンで体験していきます。
第１〜３回目の記事をまだ読んでいない方は、そちらを読んでから第４回目の記事を読み進めてくださいね！
目次
ステータスバーを追加しよう
まずは、今回のUIをよりリアルに近いデザインに仕上げるために、iPhoneのステータスバーを追加していきましょう。ステータスバーとは、画面上部に表示される「時刻・電波・バッテリー残量」などの情報のことで、スマホUIでは欠かせない要素です。
まずは「レジに進む」のような、明確なアクションが求められるパーツから始めましょう。
今回は、Apple公式が提供しているFigmaテンプレート「iOS and iPadOS 26」を使用します。
（１）こちらのURLをクリックして、Figmaのテンプレートにアクセスします。
（https://www.figma.com/community/file/1527721578857867021）
（２）「Figmaで開く」をクリックします。続いて、「このファイルのコピーを作成」を選択しましょう。そのあとは、自分のドラフトで開きます。
ポイント
「新しいファイルでUIキットを使用」
テンプレートを参照するだけで、自分のファイルとは別の場所からパーツを使う方法です。 中のデザインは直接編集できません。
「このファイルのコピーを作成」
テンプレートの内容を自分のファイルに取り込んで、自由に編集できるようにする方法です。 パーツを分解したり、自分のUIに合わせて細かくカスタマイズしたいときに便利です。 今回は、ステータスバーのパーツを一部だけ抜き出して自分のUIに組み込みたいので、「このファイルのコピーを作成」を選びました。
（３）テンプレートの入ったデータが開かれます。「ページ」の中に「Status Bars and Menu Bars」というページがあります。ステータスバーは、ここに格納されています
ここでは確認するだけでOKです。作業しているファイルから呼び出すことができるので、Green Cafeのファイルに戻りましょう。
（４）これまで「Master」「MainUI」という名前のフレーム上にパーツを作っていましたが、いよいよレイアウトをしますから、390×844pxの同じ大きさのフレームを作成します。
フレーム名は「Order / Main」とします。
また、このフレームの塗りに「color/background/base」を適用しておきましょう。
（５）では、先ほど読み込んだテンプレートを呼び出してみましょう。
左のパネルから、「アセット」を選択します。
「UIキット」の中に、「iOS and iPadOS 26」がありますね。選択します。
（６）リストの中から、先ほど確認した「Status Bars and Menu Bars」を選択します。
（７）「Status bar – iPhone」を、フレームにドラッグ&ドロップします。
（８）このコンポーネントの横幅を「390px」に変更し、フレームの一番上、中央に揃えておきましょう。
ポイント
今回作ったフレームの横幅は390pxで、取り込んだテンプレートの横幅は402pxでした。
テンプレートとフレームの幅が同じものを選ぶことが望ましいですが、ここでは390pxのテンプレートが見当たらないため、リサイズして使用します。ステータスバーは、イメージが伝わればOKです。
※当記事のフレームサイズは、WinスクールのFigmaの教材のサイズに合わせて「iPhone 13 & 14」を選択しています。
各パーツをレイアウトしよう
前回までに作成してきたカテゴリボタン、商品カード、レジに進むボタンの各パーツ。
いよいよこれらを使って、注文画面全体をレイアウトしていきます！
背景の準備
（１）レイアウトガイドを設定しておくと、このあとのパーツの配置に迷いません。
レイアウトガイドを、以下のように設定しておきましょう。
レイアウトガイド
種類：列、数：４、幅：64 ガター：24
※これ以降、ガイドは非表示で進めます。必要な時にガイドを表示します。
（２）「Master」フレーム内にある「logo」をコピーし、「Order / Main」フレームに貼り付けます。
フレームの中央に来るように揃えましょう。
アセットの呼び出し
次に、カテゴリボタンをレイアウトします。
コンポーネントにしていますので、ステータスバーと同様、アセットから呼び出します。
（１）左のパネルから「アセット」を選択し、戻るボタン「<」で戻ります。
「すべてのライブラリ」から「このファイル内で作成」を選択すると、前回作ったコンポーネントの一覧が表示されます。
（２）まずは、「おすすめ」のボタンを「Order / Main」フレームにドラッグ&ドロップします。
（３）「ドリンク」「フード」「セット」の順番で、ポイポイと、画面上に置いていきましょう。
この時、「Order / Main」フレーム内にボタンが入っていることを確認します。
フレーム外にレイアウトすると、レイヤーの構造的にも「Order / Main」フレーム外に配置されてしまいます。 飛び出していた場合は、レイヤーパネルで「Order / Main」フレーム内に収めておきます。
（４）「おすすめ」〜「セット」までのボタンを選択し、【Shift+Aキー】でオートレイアウトを設定します。これでボタン同士の余白を一気に設定することができるようになったので、「オブジェクトの左右の間隔」を「16」にします。
（５）レイアウトガイドを表示し、「おすすめ」が１列目にぴったり合うように配置します。
バリアントの使用
今回は、注文ページを開いた直後の状態を表現します。
「おすすめ」のボタンだけが選択されている状態で、「ドリンク」ボタン以降は無効状態に設定します。
前回作ったバリアントを使ってみましょう。
（１）「ドリンク」ボタンを選択します。
デザインパネルの「State」を「disabled」に変更します。 すると、無効状態のデザインに変化します。
（２）「フード」と「セット」ボタンも同様に設定しましょう。
オートレイアウトの揃え方
次に商品カードを並べます。オートレイアウトを使用し、効率よく揃えていきましょう。
（１）「Master」フレーム内にある「card」をコピーし、「Order / Main」フレームに貼り付けます。
（２）貼り付けた「card」を選択した状態で、【Shift+Aキー】でオートレイアウトを設定します。
（３）レイアウトガイドを表示します。 デザインパネルから、オートレイアウトの「水平パディング」と「垂直パディング」を「0」にしましょう。
（４）オートレイアウトしたフレームを、ガイドの幅に合うように広げます。縦幅は、背景の下まで伸ばしておきましょう。
（５）「card」だけを選択し、【Ctrl+Dキー】を５回押します。 「card」が全部で６個になりました。
（６）オートレイアウト内の揃え方を変更しましょう。 ４で広げたオートレイアウトを選択し、デザインパネルから「折り返す」アイコンと、「上揃え（左）」を設定します。
（７）さらに「オブジェクトの左右の間隔」を「24」にすれば、グリッドのガターにピッタリ合います。これでカード部分は完成です。
カートアイコンの作成
最下部にあるカートアイコンはまだ作っていませんでしたので、一緒に作っていきましょう。
（１）カートアイコンを追加しますので、前回と同様に「Material Symbols」を使いましょう。
アイコンは「MainUI」の中にいったん作ります。
ツールパネルの「アクション」をクリックします。
「プラグインとウィジェット」に切り替え、検索バーに「material symbols」と入力をします。
一番上に出てきた「Material Symbols」を選択しておきましょう。
（２）検索バーに「cart」と入力して検索します。
Fillを「ON」にすると、塗りつぶしのデザインが適用されます。
ここでは「shopping_cart」をクリックして挿入しましょう。
（３）カートの色を「color/button/primary」に変更します。
（４）バッジが付いた状態のアイコンを先に作っておくと作業が楽なので、まずはバッジを作りましょう。16×16の正円の上に、「１」という文字を載せます。
正円の塗りは「color/button/accent」を、文字はテキストスタイルを「Caption/Bold」、塗りを「color/background/card」を設定します。
２つを重ねたら、【Ctrl+ Gキー】でグループ化をしておきます。
（５）カートの右上に、バッジを配置します。
続いて【Ctrl+ Gキー】でグループ化をしておきます。
グループ化したオブジェクトを、レイヤーパネル上で右クリックし、「選択範囲のフレーム化」をクリックします。
（６）次に、【Shift+Aキー】でオートレイアウトを設定します。
（７）オートレイアウトにしたフレームのサイズを、「48×48」にします。
また、「中央揃え」にしておきます。
※私の画面では、「Frame15」を選択し、48px四方としました。
アイコンをタップしやすいように、タッチ領域を広げました。
（８）デザインパネルから「コンポーネントを作成」を選択し、７のオートレイアウトをコンポーネント化します。
（９）コンポーネントの「バリアントを追加」を選択し、バリアントを増やします。
デザインパネルからプロパティ名を変更しましょう。 プロパティの「プロパティを編集」アイコンをクリックし、「名前」を「Badge」に変更、値は「デフォルト」を「none」、「バリアント２」を「1」に書き換えます。
また、オートレイアウトの名前を「cart」に変更しておきましょう。
（10）「none」のバリアントから、バッジ部分を削除します。これでカートアイコンの完成です。
最下部のレイアウト
（１）「Order / Main」フレームに、アセットで「button」と「cart」を配置します。
（２）２つのオブジェクトを選択し、【Shift+Aキー】でオートレイアウトを設定します。
このオートレイアウトの設定を、幅「390」、高さ「96」にします。 塗りは「color/button/secondary」を設定します。
（３）このオートレイアウトの「水平パディング」を「31」にします。
これでコンテンツの幅が揃います。
（４）商品カードの値段を、このオートフレーム内にコピー＆ペーストします。
（５）「cart」のステート（状態）のバリアントを「１」にすれば、完成です！
全体図
おわりに
春から４回に分けて、「Figmaのデザインシステムの基礎」をテーマにお届けしました。
いかがでしたか？
このワークをひと通りクリアできれば、もっと大規模で複雑なデザインシステムにもチャレンジできると思います。
デザインシステムの領域は、幅広い知識と技術が必要とされる分野です。
そして、まだまだそのルールなどが確立されている段階だと思います。
ここで紹介したやり方が全てではありませんから、はじめの一歩として、チャレンジしていただければと思います！
次は、自分なりのカフェ画面をアレンジしてみたり、他のページ（メニュー詳細、注文完了画面など）も作ってみると、より理解が深まりますよ！
ぜひ、ここからデザインシステムのスキルを育てていってくださいね！
