Figmaは直感的に使えるデザインツールですが、実際に作業を始めると…
- 「あれ？勝手に動いた…」
- 「なぜかレイアウトが崩れた！」
- 「さっきまでのデザインに戻らない…」
こんな“操作ミスあるある”に必ず遭遇します。
ただし、これらのほとんどは 仕組みを理解すれば一瞬で解決できるもの です。
この記事では、初心者がつまずきやすい操作ミスを 原因→正しい対処法 の順で分かりやすく解説していきます。
Auto Layout が「勝手に動く」「崩れる」問題
【あるあるミス】
・Auto Layoutを入れたら、突然要素が寄ってしまう
・ボタンが意図せず横に伸びる／縦に伸びる
・テキストを変えたらレイアウトがズレた
【原因】
- Gap（間隔）と Padding（内側余白）の設定が曖昧
- コンテンツの幅を「Hug contents」にしていない
- 子要素に余計な幅が入っている
【正しい対処法】
① ボタンやカードは「Hug Contents」基本
② Gap と Padding を明確に設定する
③ 子要素の幅を一度「Hug」でリセットする
④ 崩れたら「Resize to fit」（Shift + Cmd + R）➡ Auto Layoutは「設定がすべて」。意図を明確にすると暴れません。
フレームの中にフレームが入りすぎて“レイヤー地獄”に陥る
【あるあるミス】
・クリックしても選択したい要素が選べない
・同じ名前のFrameだらけでどれがどれか不明
・グループとFrameを混同してしまう
【原因】
- Frame を“とりあえず囲む箱”として使っている
- 構造（Hierarchy）を意識しないまま作成
- グループとFrameの役割の違いを理解していない
【正しい対処法】
① セクション（大枠）→ Frame（コンポーネント）→ 要素 の3階層で作る
② グループは「一時的にまとめる時だけ」使う
③ Cmd + クリックで下のレイヤーを正確に選択
④ レイヤー名は「UI_カード」「BTN_Primary」など一目で分かる名前に➡ レイヤーを“意味でまとめる”クセをつけると劇的に整理されます。
画像が伸びる・潰れる問題（Fill / Fit の理解不足）
【あるあるミス】
・写真が横につぶれる
・縦が切れたり、必要な部分が見えない
・トリミングしたはずが戻ってしまう
【原因】
- Fill（塗りつぶし）と Fit（枠内に収める）の違いを知らない
- トリミング後の設定を保持していない
- Frameの比率が固定されていない
【正しい対処法】
① トリミングしたい → Crop
② 枠内に縮小したい → Fit
③ 見た目優先したい → Fill
④ Frameの比率（16:9 / 4:3 / 1:1）を先に決める➡ 画像はまず「何を見せたいか」を決めて操作すると失敗しません。
コンポーネントを編集したら“全部崩れた”問題
【あるあるミス】
・ボタンの文字サイズを変えたら全画面で崩れた
・なぜかインスタンスが勝手に変わる
・Variant の編集が理解できない
【原因】
- 元のコンポーネント（Main）を理解していない
- インスタンスで直接編集すべきでない部分を触っている
- Variant の設計が曖昧
【正しい対処法】
① 変更したい時は Main Component を編集
② インスタンスでは「テキスト」と「色」だけ変更するのが基本
③ Variant は「状態別のボタン」「サイズ違いのカード」など明確に➡ コンポーネント設計は「原本を触る」という意識が大切。
スマホデザインが“勝手に崩れる”問題（Constraintsの理解不足）
【あるあるミス】
・左右中央に置いたはずなのにズレる
・画面サイズを変えると要素が伸びる
・スマホとPCで揃わない
【原因】
- Constraints（制約）が正しく設定されていない
- Auto Layoutを使わず配置している
- Frameの幅を固定にしている
【正しい対処法】
① 中央配置 → Center / Center
② ボタンや画像 → Left / Right（幅固定）
③ セクション単位でAuto Layoutを使う➡ スマホデザインは「どこを基準に固定するか」が最重要ポイント。
カラーや文字スタイルがバラバラになる問題
【あるあるミス】
・見出しのサイズが画面ごとに違う
・微妙に色がズレて統一感がない
・同じボタンなのにサイズがバラバラ
【原因】
- Text Style を作っていない
- Color Style を使っていない
- コンポーネント化していない
【正しい対処法】
① H1, H2, H3, Bodyのスタイルを作る
② Primary / Secondary / Grayなどカラー役割を決める
③ UIパーツは必ずコンポーネント化して統一➡ 統一感は“スタイル設計”が9割。
Undo（戻る）が異常に多い＝作業の流れが悪い
【あるあるミス】
・1つ直すだけで10回戻る
・操作が行ったり来たりして迷走する
【原因】
- UIを作る順番が悪い
- Auto Layout を後付けにしている
- 目的が曖昧なまま作業を開始している
【正しい対処法】
① 先に「構造」を決める（Wireframeがあると最強）
② Auto Layout → コンポーネント → デザインの順に作る
③ Undoの回数＝“作業の無駄”の数 → 反省ポイントにする選択できない／思った要素が動かない問題
【あるあるミス】
・クリックしても選べない
・何かが固定されて動かない
・Auto Layout内で意図しない場所に入る
【原因】
- Lock（ロック）がかかっている
- Layer構造が複雑
- Auto Layoutの階層に無理がある
【正しい対処法】
① Lock解除（Cmd + Shift + L）
② Cmd + Click で深いレイヤーを選択
③ 無理な階層になっていないか構造を見直すまとめ：Figmaの操作ミスは“理解すれば一瞬で解決”できる
初心者がつまずく Figma の操作ミスは、実は 原因がほぼ決まっています。
- Auto Layout の設定ミス
- Frame / Group の使い分け
- コンポーネントの構造理解不足
- Constraints の設定ミス
- スタイル統一の欠如
これらを理解していくと、作業スピードが上がるだけでなく、
「Figmaが楽しい！」と思える瞬間が必ず訪れます。
#Figma #フィグマ #デザイン初心者 #Webデザイン勉強中 #UIデザイン #今日の積み上げ #Webデザイン学習 #デザインTips