Figma基礎 スマートフォン対応のワイヤーフレームの作成

Figmaにプロジェクトを作成する

1. Figmaを開きます。ブラウザ版またはアプリ版のFigmaを起動します。
2. 新しいファイルを作成
   • Figmaのダッシュボードで「+ New File」をクリック。
   • 新しいキャンバスが開きます。
3. ファイルに名前をつけましょう。
   右上の「Untitled」をクリックして、「サイト名」（今回はKOBE MODE)などの名前を付けておきましょう。

フレームを設定する（レイアウトグリッドの活用）

1. スマートフォンサイズのフレームを選択
   • ショートカットキー：Fをでも選択可
   • 右側のプロパティパネルで「フレーム」からスマートフォンサイズ（例：iPhone 16、393×852px）を選択。
2. 背景色を調整（任意）
   • フレームを選択したまま、プロパティパネルの「塗り」で背景色を設定（初期設定の白で問題ない場合はスキップ）。
3. レイアウトグリッドを設定
   レイアウトグリッドを使用して、ワイヤーフレームの整列デザインを整えることができます。
   • フレームを選択した状態で、右側のプロパティパネルのレイアウトグリッド（Layout Grid）セクションを見つけます。
   • 「+」ボタンをクリックしてグリッドを追加。
4. グリッドタイプを設定
   • グリッド（Grid）：正方形のグリッドで、ピクセル単位の細かい配置に便利。
   • 列（Columns）：スマートフォンデザインでは通常「2列」または「4列」に設定すると良いでしょう。
     • カラム数：2～4
     • ガター　Gutter（間隔）：16px
     • マージン　Margin（余白）：16px
   • 行(Rows)：高さの基準を決めたい場合に活用。
5. グリッドの色と透明度を調整
   • グリッドがはっきり見えて、写真やオブジェクトが見えにくい時は、透明度を調整して背景要素と重ならないようにします。
6. デザインをレイアウトグリッドに合わせる
   配置するUI要素（ボタン、テキスト、画像など）がグリッドに沿うように調整することで、全体のデザインが整った印象になります。

レイアウトグリッドは、レスポンシブデザインや複数のデバイス間で一貫性のあるデザインを作成するのに役立ちます。特に、余白や要素の配置に迷ったときは、グリッドを基準にすると効率的に進められます。

スライドショーぽく見せる

Figmaではスライドショーのような動きをプロトタイプで設定することが可能です。今回もそれを踏まえて、センターにある長方形横に２つの長方形を配置し、スライドショーであることを明確にします。

長方形をAlt(option)キーを押しながらドラッグし、コピーします。その時、スマートフォンのフレームから外にはみ出すことによって、TOPレイヤーの外に移動しますので、TOPのレイヤーフレーム内のスライドショーフレームに移動します。フレームのプロパティパネルでのレイアウト内でコンテンツを隠すにチェックが入っているか確認しましょう。

要素を配置しオートレイアウトを活用する方法

オートレイアウトは、Figmaの便利機能の１つで、選択した要素を自動的に整理し、均等な間隔や整列を簡単に設定できる仕組みです。要素を追加したりサイズを変更しても、他の要素が自動的に調整されるため、デザイン作業を効率化できます。

要素を配置する

1. 見出しを作成
   • テキストツール（T）を使い、「NEW RE ARRAIVAL」と入力しました。
   • プロパティパネルからフォントサイズや色を調整。
2. 長方形ツールで商品写真を配置
   • 長方形ツール（R）を選択し、写真用のプレースホルダーを作成します。
   • プレースホルダーにのちのちダミー画像を挿入する場合は、Unsplashプラグインが便利です。
3. 商品タイトルと金額を追加
   • テキストツールで商品名を入力（例：「商品テキスト」）。
   • 同様に金額（例：「1,000円」）も追加し、それぞれフォントサイズや色を調整。

要素をオートレイアウトにまとめる

1. 写真、タイトル、金額を選択
   • Shiftキーを押しながらこれら3つの要素を選択。
2. オートレイアウトを適用
   • 右側のプロパティパネルでオートレイアウト（ Add Auto Layout）をクリック。
   • 垂直方向（Vertical）に配置され、要素間に均等なスペースが設定されます。
   • スペース（Padding）や要素間の間隔（Gap）を調整。

オートレイアウトにすることにより、選択した３つのアイテムは、フレーム化されます。

横にコピーして複数の商品を配置

1. 作成したオートレイアウトグループを選択
   • 上記で作成した商品要素全体を選択。
2. コピーして横に並べる
   • Alt（Option）キーを押しながらドラッグして複製。
   • 必要な数だけ横にコピーします。
3. 横並びのオートレイアウトを適用
   • 複製した商品要素をすべて選択。
   • 再びオートレイアウト（ Add Auto Layout）を適用。
   • 今度は水平方向（Horizontal）に配置されます。

配置を調整

• 横並び全体の間隔（Gap）を調整して、適切なスペースを確保。
• 必要に応じて左右の余白（Padding）や中央揃えを設定。

商品写真、タイトル、金額が縦に整列します。オートレイアウトを使用すると、要素の追加や調整も簡単に行えます。

• 長方形を描き、レイアウトグリッド内に設定します。
• 角を丸くしたい場合はプロパティパネルの角丸「Corner Radius」を調整。

テキストを追加

• テキストツール（T）を使い、「More」と入力。
• フォントサイズ、中央揃えに調整。

ボタン全体をグループ化（オートレイアウトにする）

• 長方形とテキストをShiftキーで選択し、右パネルのオートレイアウト「+ Add Auto Layout」をクリック。
• ボタン内のテキストが中央に整列します。

商品一覧の下部に、その他の商品一覧に誘導するボタンを設置します。その際UIデザインを考慮して、プレビューで、タップしやすい高さを保持しているか確認します。

ボタンのフレームと上部のフレームの間隔を確認する際は、Alt(command)キーを押しながら確認します。