Figmaにおけるレイヤーとは、「画面上に存在するすべての要素を構造的に管理する単位」のことです。
テキスト、画像、図形、ボタンなど、目に見えるものはすべてレイヤーとして扱われます。
レイヤーの本質
レイヤーは単なる“パーツ”ではありません。
「表示順」と「構造」を同時に管理する仕組みです。
例えば、次のような関係になります。
・背景（下のレイヤー）
・画像（その上のレイヤー）
・テキスト（さらに上のレイヤー）
この順番がそのまま画面の見た目に直結します。
つまり、レイヤーの順序＝UIの重なり順です。
レイヤーの種類
Figmaでは主に以下のレイヤーが存在します。
・テキストレイヤー（文字）
・シェイプレイヤー（四角形・円など）
・画像レイヤー
・フレーム（複数のレイヤーをまとめる）
・グループ（一時的なまとめ）
特に重要なのは「フレーム」です。
これは単なるまとめではなく、レイアウトの基準になります。
グループとフレームの違い
ここを理解していないと設計が崩れます。
グループ
→ ただまとめているだけ（位置関係を保持するだけ）
フレーム
→ レイアウトの親（Auto Layoutや制約が使える）
つまり、UI設計では基本的に「フレームを使う」が正解です。
レイヤー構造が重要な理由
レイヤーは見た目以上に重要です。理由は3つあります。
1. 修正しやすさが変わる
構造が整理されていないと、どこを触ればいいのか分からなくなります。
2. コーディング効率に直結する
レイヤー構造がそのままHTML構造に変換されるため、
整理されていないと実装時に迷います。
3. チーム開発で破綻する
他人が見たときに理解できない構造は、それだけでコストになります。
よくあるダメなレイヤー構造
・グループだらけで階層が意味不明
・命名が「Rectangle 123」などのまま
・フレームを使っていない
・不要なレイヤーが大量にある
これは「見た目だけ作って設計していない状態」です。
正しいレイヤーの考え方
レイヤーは「UIの設計図」として扱うべきです。
具体的にはこう考えます。
・1つのまとまり＝1つのフレーム
・意味のある単位で分ける（カード、ボタンなど）
・名前は役割ベースでつける
まとめ
Figmaのレイヤーは単なる要素ではなく、
「UIの構造そのもの」です。
ここを適当に扱うと、あとで必ず破綻します。
逆に、ここをしっかり設計すると、コーディングも運用も一気に楽になります。
見た目を作る前に、構造を設計する。
これがレイヤーを扱う上での本質です。
