Figmaのスマホ設計手法 ①
（こちらはQiitaに以前投稿した記事のお引越しです）
今回は、自分なりのFigmaの設計手法について4日ほど悩みまくって決めました。長いですが最後まで読んでいただけると嬉しいです。
対象の人
Auto layout, Variantsを理解している人
Figmaでモバイルアプリ画面を作る際に、Auto layoutをノリで適用している人
この記事で目指す設計手法
モバイルのレイアウトに特化
Figma編集者にとって、構造変更が容易（エンジニアにとってどうかは別問題）
操作の手順が少ない
曖昧な項目が少なく、シンプル
レイアウトによって適用するルールを変える必要がない
省略します
この記事ではAuto layoutの長い機能名を次のように省略して表記します。
Spacing between items (要素同士の間隔）→ Spacing between
Padding around items (要素から親のFrameまでの間隔） → Padding around
では、作成手順を見ていきましょう！
1. スマホの土台Frameとfix要素を作成
構造
Frame-1
- fix 要素1 (status bar)
- fix 要素2 (bottom navigation)解説
まず、デバイスサイズのFrameを作ります（白いFrame）。これを「Frame-1」と今後呼びます。
Auto layout中にfixは含められないので、Frame-1にはAuto layoutを適用しません。
今後要素がはみ出ることを考えてFrame-1のClip content: offにします。
その後にfixしたい要素（青いやつ）を配置し、それらのFix posotion when scrollingをonにします。
2. Auto layoutの入れ物を作成
構造
Frame-1
- fix 要素1 (status bar)
- fix 要素2 (bottom navigation)
- Frame-2 (Auto layout)解説
Frame-1にAuto layoutを適用できないので、代わりにAuto layoutを適用させるためだけの透明なオブジェクトを作成します。以降、これを「Frame-2」と呼びます。
下記の設定通りに行えば、入れた子要素を横に中央揃えで、上からどんどん敷き詰めるFrame-2ができます。
Frame-2の詳細
Frame-2のPadding aroundで左右に余白を作らない理由
仮にFrame-2のPadding around: 0でない場合を考えてみましょう。
上の画像のように、青いボタンのみの場合は、Frame-2にPadding aroundを設定し、青い要素をWidth: Fill conteinerにすれば左右を揃えてくれていい感じです。
次に、黒いブロックようなWidthが大きいものを入れるとどうでしょうか？
Frame-2のAlignment: Vertical centerの場合はなぜかすっぽり入ってしまいますが、左右のPadding aroundを無視しているので気持ち悪いし、CSSの構造的にも良くないです。
さらに、緑色の長さが異なるボタンを配置したとします。ここまで左右の余白がずれていると、Frame-2に一定の余白の値を決める意味が無くなってきます。
このようにPadding aroundの左右に余白を作ると問題が起こりやすくなり、画面によってPadding aroundの値を決める必要も出てくるため面倒です。よって、どの要素のサイズにも対応できるPadding around: 0に統一します。
Frame-2が縦にFrame-1をはみ出したら？
Frame-2に多くの要素を入れていくと、Frame-2がFrame-1を縦にはみ出すことがあります。その場合、特に何もする必要はありません。
Frame-2は背景ありで自動で伸びてくるので見栄えを調整する必要はないです。
また、Frame-1が画面のHeightを維持しているため次のメリットが生まれます。
PrototypeでDeviceを指定していない場合にも、Frame-1のサイズでPrototypeが表示される
Frame-1のClip contentで、はみ出た要素を簡単に非表示にできる
Adobe税を払うために使わせていただきます