― 手戻りが前提でも、少し楽に作るために ―
Figmaでデザインをしていると、「後から要素を足したら、フレームの外に出てしまった」「並び順がぐちゃぐちゃになって、整理だけで時間がかかる」
そんな場面に何度も出くわします。
私自身、“ちゃんと作ろうとするほど、整理が大変になる”という状況に、よく悩んでいます。
この記事では、同じように手戻りや整理でつまずいている方向けに、少し作業が楽になった方法をお伝えしようと思います。
手戻りが起きるのは、自然なこと
LPやWebデザインでは、最初からすべてが決まっていることの方が少ないです。
・途中で要素が増える
・文言が変わる
・構成を見直す
これは失敗というより、デザインが前に進んでいるサインなのだと思います。
なので、「手戻りをなくそう」とするよりも、手戻りが起きたときに困らない作り方をしようと思い至りました。
なぜ、整理に時間がかかってしまうのか
振り返ってみると、整理が大変になるときには、だいたい以下の２点が原因です。
・Auto Layoutの外に要素を置いてしまっている
・親フレームが、後から増えた要素を受け止めきれていない
どちらも、作業中は仕方がない場面が多いです。
だからこそ、起きる前提で備えておくのが現実的だと感じました。
「仮で置く場所」があるだけで、かなり違う
私が一番助けられたのは、仮置き専用のエリアを最初から用意することです。
section
├ content（Auto Layout）
└ draft（Auto Layoutなし）
・まだ確定していない要素
・後で整理するつもりのパーツ
とりあえず draft に入れる。
それだけで、「どこ行った？」が減りました。
並び順が崩れたときは、画面を見なくていい
Auto Layoutを使っていると、見た目と順番が合わなくなることがあります。
そんなときは、無理に画面上で直そうとせず、レイヤーパネルだけを見るようにしています。
レイヤーの上下を入れ替えるだけで、意外とあっさり整うことも多いです。
Auto Layoutは、外しても大丈夫
ぐちゃっとなってしまったとき、私は一度Auto Layoutを外すこともよくあります。
- 親フレームを複製しておく
- Auto Layoutをオフにする
- 順番を整える
- もう一度Auto Layoutをかける
「壊してしまったらどうしよう」と思っていましたが、外して戻す方が早い場面も結構ありました。
フレーム外に出た要素は、レイヤーから戻す
要素が見当たらないときほど、焦ってしまいがちですが、そんなときはレイヤーパネルを頼るようにしています。
入れたい親フレームの直下にドラッグする。
必要であれば、Absolute positionをオフにする。
画面上で探すより、落ち着いて対応できます。
「後で整理する前提」を名前に残す
仮置きの要素は、自分が後で見返して分かる名前で十分です。
draft_text
draft_img
draft_icon
完璧じゃなくていい、「これは後で片付けるもの」と分かればOKです。
整理に時間がかかるのは、悪いことではない
最後に、これは自分にも言い聞かせていることです。
整理に時間がかかるのは、いい加減に作っているからではなく、考えながら丁寧に作っているからだと思います。
だから、崩れないように無理をするよりも、崩れても戻しやすい形にしておく。
それだけで、Figmaとの向き合い方が少し楽になる気がしています。
最後に小ネタです。
レイヤーで整理といっても、折りたたまれていたグループやフレームが展開していて、見づらいということがFigmaを使い始めた頃あるあるでした。なんてことはありませんが、プチ感動したショートカットキーの一つをご紹介します。
◆選択中のレイヤー配下をすべて折りたたむ
Mac
⌥（Option） + LWindows
Alt + Lでは良きデザインライフを！
ここまで読んでいただき、ありがとうございます。もしこの記事の技術や考え方に少しでも興味を持っていただけたら、ネクストのエンジニアと気軽に話してみませんか。
- 選考ではありません
- 履歴書不要
- 技術の話が中心
- 所要時間30分程度
- オンラインOK
