生徒ログ｜Figmaのレイヤー構造化をハンズオンで整理した日
この記事でわかること
- バリアントで詰まったら、いったん置いてOK
- Figmaファイルの共有方法（編集者権限）
- レイヤーがぐちゃぐちゃになる原因
- ピックアップセクションの構造化手順
- 1. 不要なレイヤーを削除する
- 2. オートレイアウトでグルーピング
Figmaの教科書を進めていた生徒さん（Tさん）と、レイヤーがぐちゃぐちゃになってしまったFigmaファイルを一緒に整理したときの記録です。
バリアントで詰まったら、いったん置いてOK
教科書の128ページ、バリアントの章で詰まっていました。
バリアントはコンポーネントの種類を増やす機能で、便利ではあるのですが、最初からしっかり理解しようとすると手が止まりやすい箇所です。
今回の判断は「次に進んで、2章を一通り終えてからもう一周する」。
詰まったところで止まり続けるよりも、全体の流れを一度つかんでから戻った方が理解しやすくなることが多いです。
Figmaファイルの共有方法（編集者権限）
まず先生（casio）をTさんのFigmaプロジェクトに招待しました。
手順はシンプルです。
- Figmaのプロジェクトを開く
- 右上の「共有」ボタンをクリック
- 招待したいメールアドレスを入力
- 権限を「編集者」に設定して送信
招待を受けた側はメールから「承諾」するだけで、相手のファイルを直接操作できるようになります。
レイヤーがぐちゃぐちゃになる原因
今回のFigmaファイルは、別ページからコピーしてきた要素がアートボードの外に残っていたり、グループの中に不要なレイヤーが混在していたりしていました。
よくある原因はこの2つです。
- アートボード外にレイヤーが残っている：コピペのときに意図せず外に出てしまう
- グループの入れ子がずれている：別のフレームに属すべき要素が混入している
レイヤーパネルを開いて、どのフレームの中に何が入っているかを確認するのが整理の第一歩です。
ピックアップセクションの構造化手順
今回は「ピックアップ」という商品一覧セクションを例に、構造化の手順を実演しました。
1. 不要なレイヤーを削除する
まずぐちゃぐちゃの原因になっている不要なフレーム・グループを削除します。1つだけきれいな状態のアイテムを残して、他は消してしまった方が早いです。
2. オートレイアウトでグルーピング
三角アイコンと商品タイトルのテキストをまとめて選択し、Shift + A でオートレイアウトを適用します。横並びにしたい場合は、オートレイアウトの方向を「横」に変更します。
3. レイヤーに名前をつける
整理したフレームには必ず名前をつけます。
- 1件分のアイテム →
PickupItemやPickupTTL - アイテムの一覧 →
PickupList
名前をつけておくと、後からコーディングに渡すときにも迷いません。
4. 複製してリストを完成させる
1件分ができたら Command + D で複製し、4件分を横に並べます。4件を選択してからオートレイアウトを適用すると、間隔を統一したリストが完成します。
コーディング経験が構造化の理解を助ける
Tさんはコーディングをある程度経験していたため、「フレームの入れ子＝HTMLのネスト構造」として直感的に理解できていました。
Figmaの構造化とHTMLの構造は考え方がほぼ同じです。
- フレーム →
div - オートレイアウト →
flexbox - コンポーネント → 再利用可能なパーツ
コーディングを学んでいる人がFigmaを学ぶ場合、この対応関係を意識すると理解が早くなります。
次回の課題
パソコン版のデザインを自分で構造化して持ってきてもらうことになりました。
崩れたり迷ったりしたときはLINEで共有してもらい、なぜ崩れているかをフィードバックする流れです。
ゴールは、Figmaで構造化できる → コーディングに落とせる、という一連の流れを自分でまわせるようになることです。
