【学習記録】Figmaのオートレイアウトでヘッダー、フッターを作る
記録のきっかけ
Figmaで制作する際はマテリアルデザインKitを使用しているのですが、見てみると様々なパーツにオートレイアウトが設定されているのが気になったため、調べてみました。
そうすると、下記のメリットがあることが分かりました。
コンテンツが増えたり減ったりした際の修正が容易になる（いちいち配置を組み直す手間が省ける）
Figma上で正しい組み方が出来ていると、コーディングが容易になる（コード表示させた時にそれっぽいコードが吐き出される）
完成したもの
ポートフォリオ用に作成しているHP／UI画面で使用する予定のヘッダーとフッターを、オートレイアウトを使って作成しました。
作業memo
隣り合うコンテンツ同士をグルーピングした後、オートレイアウトを設定（はじめはグルーピングせずに、それぞれオートレイアウトした要素をただ並べてしまったため、コンテンツが増減して高さが変わった場合に可変になってくれず苦戦…。）
それぞれのコンテンツに余白を設定。上下に並ぶフッターの場合は、基本はtopに余白を設定
使用したショートカットキー
Shift+A：オートレイアウト設定
F：フレーム作成
Option＋Command＋L：文字左揃え
Option+H：左右に対して中央揃え
Option+V：上下に対して中央揃え
Command+[ or ]：レイヤー階層変更
余談：marginとpaddingの使い分けと、隣り合うコンテンツに設定するルールについて
学校ではmarginとpaddingについての厳密な説明はなかったのですが、実際に自分でコードを書いているうちに「あれ、ここはmarginのほうが良いか？paddingのほうが良いか？」といった迷いや、
また、コンテンツが並び合う際に「margin(padding)-topだけ設定すればよいか？それともそれぞれのコンテンツで余白を折半するのか…？」といった迷いが多々生じました。
自分がコードを書くときの指針がほしいな、と思うので、調べたこと・習ったことをまとめてみます。
margin
マージン領域は、マージン境界に囲まれた領域で、境界領域に、隣の要素と分離するために使用する空の領域を含めて拡張したものです。この領域の寸法は、マージンボックスの幅とマージンボックスの高さになります。
マージン領域の寸法は、 margin-top、margin-right、margin-bottom、margin-left の各プロパティおよび一括指定プロパティである margin で決定されます。マージンの相殺が発生したときは、マージンがボックス間で共有されるため、マージン領域が明確に定義されません。
∴ 同じ領域内の隣の要素と分離する＝兄弟間（同一コンテンツ内の別要素）の余白に使用
padding
要素のパディング領域とは、コンテンツと境界との間の領域のことです。
∴ コンテンツとそれ以外＝親子間の余白に使用する
所感など
これまでデザイン案の要素が増減した際、いちいち余白を組み直して…コンテンツ背景を変更して…と、各画面ごとに変更していたのですが、オートレイアウトを覚えたらそんな作業をしていたことがアホらしくなりました。泣
グルーピングせずにオートレイアウトを設定していたが故に、はじめは横幅や高さが可変にならず苦戦したものの、何度か解説動画を見返して覚えることが出来ました。
マテリアルデザインキットの中には「バリアント」というものが設定されているものもあるため、次はこの機能について調べて実践してみます。
参考にしたもの
この記事が気に入ったらサポートをしてみませんか？