デザイン未経験者にとって、Figmaはとても便利で高機能なツールです。
しかし、その自由度の高さから「どこから触ればいいのか分からない」
「気づいたら画面がめちゃくちゃになっている」といった挫折ポイントも多いのが現実。

この記事では、Figma初心者がつまずきやすい10のポイントをわかりやすく解説しながら、
すぐに実践できる解決方法を紹介します。

Figma学習で迷子になっている方は、ぜひ参考にしてください。

① フレームとグループの違いが分からない

● つまずきポイント

デザインをまとめようとして「グループ」を使い続けてしまい、気づいたらレイアウトが崩れたり、サイズ変更に対応できなくなったりする問題。

● 原因

• フレーム（Frame）が“入れ物”でありレイアウトの基礎であることを理解していない
• グループは整理用であり、レイアウト調整には向いていない

● 解決策

• レイアウトを作る際は必ず Frame を使う
• グループは “複数要素を一時的にまとめたいとき” のみに使う
• Frame を作るショートカット：Fキー

② オートレイアウトの使い方が難しい

● つまずきポイント

ボタンやカードを作るとき、Spacing や Padding を理解していないため意図しない動作になる。

● 原因

• オートレイアウトを「強制的に揃える機能」程度に思っている
• 方向（縦／横）と間隔（gap）を正しく設定できていない

● 解決策

• ボタン・リスト・カードは必ずオートレイアウトで構築
• 重要なのは以下の3つだけ
  1. 方向（Horizontal/Vertical）
  2. 間隔（Gap）
  3. 内側余白（Padding）
• 最初は「一般的なUIコンポーネントを真似る」のが近道

③ テキストの行間がバラバラになる

● つまずきポイント

デザインによって行間が違ってしまい、統一感がなくなる。

● 原因

• Line height（行間）が “Auto” と “Fixed” の違いを分かっていない
• テキストスタイルを設定していない

● 解決策

• 行間は Auto（推奨） を使用
• サイト内で使う文字スタイルを最初に決め、Text Style として登録しておく
• 見出し（H1〜H3）、本文、小見出しなどを統一するだけでプロ感UP

④ コンポーネントとインスタンスの仕組みが理解できない

● つまずきポイント

コンポーネントを更新したら他の部分も勝手に変わり混乱する。

● 原因

• コンポーネント（原本）とインスタンス（コピー）の関係を理解していない
• “どこを編集すると全体に影響するか” が曖昧

● 解決策

• よく使う UI は必ずコンポーネント化
• インスタンス内で編集できる部分・できない部分の違いを把握
• コンポーネントの編集は「原本を編集する感覚」で扱うと理解しやすい

⑤ 配置がずれて、揃わない

● つまずきポイント

目視で揃えようとして、微妙なズレが残りプロっぽく見えない。

● 原因

• 並べ方をショートカットや “整列ツール” に任せていない
• グリッドやレイアウトガイドを使っていない

● 解決策

• 整列ツールを使うショートカット：Shift + A（オートレイアウト化で揃う）
• グリッドを設定して、ブロック単位で揃えるクセをつける
• 完全に揃うと、UIの品質は一気に向上する

⑥ ファイルがぐちゃぐちゃになる（レイヤー地獄）

● つまずきポイント

気づけば Frame の中に Frame が入りすぎて、どこが何かわからなくなる。

● 原因

• レイヤー名を付けていない
• Frame の構造を理解しないまま作業している
• 整理するタイミングを設けていない

● 解決策

• レイヤー名は「必ず」付ける
• Frame の中に “意味ごとにまとめたFrame” を入れる（セクション化）
• 1画面作ったら必ず “レイヤー整理タイム” を3分つくる

⑦ 画像の扱い方が分からない（切り抜き・フィット・塗りつぶし）

● つまずきポイント

画像のサイズ調整がうまくいかず、横伸び・縦伸びしてしまう。

● 原因

• Fill / Fit / Crop の違いが分かっていない
• Frame に画像を入れる操作を理解していない

● 解決策

• 「Fill」は“切り抜いてフィットさせる”
• 「Fit」は“収まるように縮小”
• トリミングは Crop を使用
• 画像は “Frameの背景として入れる” とレイアウトが崩れにくい

⑧ 画面全体の統一感が出せない

● つまずきポイント

作った画面の印象がチグハグになる。

● 原因

• カラールールが曖昧
• マージン・余白の規則性がない
• タイポグラフィが統一されていない

● 解決策

• 使う色は 3〜5色に限定
• 余白は一定（8px / 16px / 24px など倍数）にする
• Text Style や Color Style を作成しておく
  → これだけでプロレベルの統一感が出る

⑨ スマホ・PCのレスポンシブを理解していない

● つまずきポイント

PCで作ったのにスマホになると崩れる。

● 原因

• ブレークポイントを理解していない
• Auto Layout のレスポンシブ設定を使っていない

● 解決策

• 最低限覚えるべき幅：
  • スマホ：375px
  • タブレット：768px
  • PC：1440px
• 制約（Constraints）を設定して、左右中央配置を正しく設定する

⑩ とりあえず触って余計に混乱する（学習の順番問題）

● つまずきポイント

がむしゃらに触って覚えようとするが、逆に混乱して挫折。

● 原因

• Figmaは機能が多いので、順番を間違えると難易度が跳ね上がる
• 「デザインの型」を知らないまま作業してしまう

● 解決策

Figma初心者が学ぶべき順番はこれだけでOK：

1. Frame と Auto Layout を理解する
2. テキスト・色・余白のルールを決める
3. ボタン・カードなどのUIを作って練習
4. コンポーネント化して再利用を覚える
5. 実際のサイトを真似して1ページ作る

最初に“学習の地図”をつくるだけで、挫折率が大幅に下がります。

まとめ

Figmaは自由度が高い分、初心者がつまずきやすいポイントも多くあります。
しかし、今回紹介したように 原因と対策を知っておくことで、迷わず効率的に上達する ことができます。

挫折せず続けるために大切なのは、
✔ 使う機能を絞る
✔ Figmaの“型”を理解する
✔ ルール化して統一する

この3つです。

#Figma #フィグマ #Figma初心者 #Webデザイン勉強中#デザイン初心者 #UIデザイン #UXデザイン #デザイン独学#駆け出しデザイナー #今日の積み上げ

Favorite