「パディングが反映されない」といったトラブルの多くは、無意識に作った「不要なフレーム」が原因です。本記事では、グラフィックデザイナー出身の筆者が、Figmaのレイヤー構造を整理し、自分もコーダーも迷わないデータを作る方法を解説します。
なぜFigmaで「謎のフレーム」が量産されるのか？
ところで、figma初心者あるあるなのかもしれませんが、せっかく作ったフレームも、いじってると「あれ？パディングを直したくて選択して入力してるのに、パディング変わらないな？」みたいなことありません？
それはたぶん、要らんframeが二重三重に残ってる可能性が高いです。
私もやっと最近、それが犯人だと気づきました。
犯人扱いしていますが、全部自分が作ってきたものです。
気づかず自分でごんごん要らないframeを量産し、必要のない箱を重ねて、自分で迷子になっているのです。
特に私はグラフィックデザインを主にやっていたので、figmaの平面キャンバスに要素を置いているだけの気分で置いていると、こんな風に痛い目に遭います。（人はそれを自業自得という）
平面じゃなくて、厚み（レイヤー構造）も見る。それが大事ですね。
ですから、左サイドバーのレイヤー表示は必要不可欠な地図なのです。
意味のない入れ子入れ子入れ子で無駄に構造を深くしていくと自分も迷子だし、きっとコーダーさんにも迷惑をかけます。それを防ぐためにも、左サイドのレイヤー表示はちょこちょこ見ながら進めましょう。
そうは言っても左サイドのレイヤー構造なんて見方が分からない。
そんな初心者さんもいるでしょう。かくいう私も最初は見ないふりしてました。とにかくオブジェクトを並べたりオートレイアウトとかパディングを把握するのに必死すぎて。
しかし、特にオートレイアウトは左サイドを把握するようになると、ものすごくわかりやすくなるのです。
前置きが長くなったのでとっととレイヤーの話に入りましょう。
実例で解説！不要なレイヤーの見極めと整理術
前回『Figmaオートレイアウト攻略｜要素を横に移動できない時の解決法』（オートレイアウトが分かっている人は読む必要がありません）の記事で使ったこのデザイン、ちょっと左のレイヤーを見ていましょう。
…そもそもが何が何のframeなのか分かりにくい。
本番はこういうフレームが更にずらずらと並ぶのです。
こんなんで、ぱっと探したい時に探せるか？ 無理。
frameごとに名前を付けましょう。
私の場合、この作業のコツは、一番小さいframeから名付けていくことです。
順当に名前を付けていくと、なんだかおかしなことに気づきました。
↑この「画像予定地」と名付けたフレームと、
↓その上のレイヤーにある「Frame5」、役目が被ってない？ 何のためにあるのだ？
オートレイアウト変更時に残る「抜け殻」の正体
そもそもどうしてこんなことが起こったかというと、要素を外から足したり移動したりした時に、変更したために不要になったオートレイアウト用のフレームが抜け殻になって残ってる、という状況らしい。
つまり、要らない。
無駄にレイヤーを積んでいる邪魔者です。後々間違ってこいつにオートレイアウトやパディングをかけちゃうとややこしいことになります。
こういう場合は、消しましょう。（もちろん本当に消すべき確認してから）
親フレームから子要素を救出！「自立」の手順
しかし早まるな！ ここでFrame5をいきなり消すんじゃない！！
Frame5は「画像予定地」Frameの親フレームです。
親フレームをそのまま消すと下の子の要素まで消えちゃう。
この場合、「画像予定地」Frameも無くなってしまいます。
そうなる前に、親フレームであるところのFrame5から、「画像予定地」を出します。さあ、自立の時だ。
まずは、抜き出したい子フレームをクリック＆ドラッグでググっと上に持っていきます。
親の頭上を飛び越えろ！ 親フレームより上に行け！
どういう風に飛び越えているのかは、黒い太めのバーで表示されます。下図のように。
これは今、選択されている（水色背景部分）「画像予定地」である子フレームが、親フレームであるところの「Frame5」より上に来てる状態です。
クリックを放してみましょう。
↑かつては親だったFrame5が、「画像予定地」と同じレイヤーにいます。
つまり、かつて親子だったFrame5と「画像予定地」は兄弟になったのです。地獄の家系図。
不要なフレームを削除してスッキリさせる
メイン画面でようわからんところに青線でフレームの位置があります。
これは、Frame5のレイヤーが下がったことで、親になったばかりのFrame4の元でオートレイアウトの並びが「水平」になってるからです。たった今誕生した兄弟要素が水平に並んでる状態です。
Frame5は不要になりました。
内側に何も抱えてませんし、これが消えても何もダメージはありません。
念のため、レイヤー名の横にある目の玉マーク（レイヤー表示の切り替え）をクリックして、目を閉じさせてみましょう。
↑この目のマークをクリックして、非表示にしてみます↓
Frame5が非表示になっても何の影響もないです。つまり、消しても問題はない。
Frame5を選択して消しましょう。
続けてFrame４に名前を…とクリックして気づく。
Frame４、お前もか。
というわけで無の境地で消す作業をしましょう。
不要なフレームを消したものを、最初と見比べてみましょう。
まず下図がbefore↓（レイヤーにご注目）
こちらがAfter↓
まとめ：レイヤー整理は未来の自分とコーダーさんへの思いやり
随分スッキリしました。
右のメイン画像には見た目の変化がないのに、無駄なレイヤーは減っています。(不要なフレームを2つ削った）
これなら自分でも後で構造が分かりやすい。
ちなみに何故こんなことが起こっているかというと、
この記事で例に出している図ですと、今までの記事で「ここに画像のタイトル」を四角グレーの上から右側に移動させたために、「四角」と「ここに画像のタイトル」が上下垂直オートレイアウトがかかっていたのに、「ここに画像のタイトル」を右テキストの上下垂直オートレイアウトに変更したから出来た、という経緯です。……文字だけだと何言ってるのかわからない状態ですね。
追記：ちなみに、複数のフレームを選択して『Cmd (Ctrl) + R』のショートカットを押すと一気に名前を変えられるそうです。
でも私はこういうレイヤー整理のためにもちょこちょこ変換していくかな。
コメント