はじめに：Figmaは“簡単そうで奥が深い”ツール
Figmaは直感的に操作できる反面、初めて触ると「思った通りに動かない！」という壁にぶつかります。
特に、PhotoshopやCanvaのような感覚で触ると「同じつもりでやったのに全然違う…」というケースが多いです。
でも安心してください。
Figma初心者がつまずく原因の多くは「概念の違い」と「設定の見落とし」。
それを理解すれば、操作のストレスが一気に減ります。
ここでは、初心者がよくハマる10の落とし穴とその解決法を紹介します。
つまずき①：選択したつもりが「グループ全体」だった
よくある現象
ボタンの文字だけを動かしたいのに、背景の四角ごとズレてしまう。
原因
Figmaはレイヤー構造になっており、グループ化された要素をクリックすると全体が選択されるからです。
解決法
- 要素をダブルクリックして、文字だけを直接選択する。
- もしくは左サイドのレイヤーパネルから直接選ぶ。
ワンポイント
慣れてきたら「グループ」より「オートレイアウト」で整理する方が管理しやすくなります。
つまずき②：図形を動かしたら“ずれる” or “変形する”
よくある現象
サイズを変えようとドラッグしたら、縦横比が崩れる。
原因
Figmaは「固定」ではなく「柔軟なレイアウト」が前提。
ドラッグ時の比率ロック（Shiftキー）や制約設定（Constraints）が関係します。
解決法
- Shiftキーを押しながらドラッグ → 比率固定
- 右パネル → Constraints → 固定位置を「Top / Left」などに設定
つまずき③：文字が思った位置に置けない
よくある現象
テキストが中央に見えない、上下にズレる。
原因
テキストボックスの「高さ」が原因。
Canvaなどと違い、Figmaではボックスサイズを自由に調整できるため、
見た目の位置がズレやすくなります。
解決法
- 右パネルの「Align text」から中央揃えを選択。
- テキストボックスをオートレイアウトの中に入れると自動で整います。
つまずき④：画像を貼ってもサイズが合わない
よくある現象
画像を挿入したら、枠からはみ出したり、歪んだりする。
原因
Figmaは画像を「Fill（塗りつぶし）」として扱うことが多いため、フレームサイズと比率が違うとズレます。
解決法
- 画像を選択 → 右パネル「Fill」→ 「Fit」または「Crop」を選ぶ。
- 背景として使うなら「Fill」モード、「素材」として使うなら「Image」として配置。
コツ
ショートカットでドラッグ挿入するより、右クリック → Place image で挿入するとコントロールしやすいです。
つまずき⑤：ズーム・スクロールがうまくできない
よくある現象
キャンバスが広すぎて、要素がどこに行ったかわからなくなる。
原因
Figmaのキャンバスは“無限に広い”ので、ズーム・スクロール操作を覚えるのが必須です。
解決法
| 操作 | ショートカット |
|---|---|
| ズームイン | Ctrl（⌘） + + |
| ズームアウト | Ctrl（⌘） + – |
| 全体表示 | Shift + 1 |
| 選択部分にズーム | Shift + 2 |
| 手のひらツール | スペースキーを押しながらドラッグ |
「Shift + 1」で全体表示する癖をつけておくと、迷子になりません。
つまずき⑥：フォントが反映されない or 表示崩れ
よくある現象
ブラウザで開いたら文字が違うフォントになっている。
原因
ローカルフォント（PCにインストールしたフォント）は、Web版Figmaでは認識されないことがあります。
解決法
- できるだけGoogle Fontsを使用（例：Noto Sans JP, Inter, Roboto）
- どうしてもローカルフォントを使いたい場合：
→ Figma Desktopアプリを使用
つまずき⑦：チームで編集したら勝手に変わる
よくある現象
同時編集中に誰かが修正して、自分の作業が消える。
原因
Figmaはクラウド同期型。全員が同じファイルに同時アクセスしているため、更新がリアルタイム反映されます。
解決法
- 重要なデザインは複製（Duplicate）して別ファイルで作業。
- 修正前にコメント機能（Cキー）で相談する。
チーム運用では、Figmaの「Version history（履歴）」機能も活用しましょう。
つまずき⑧：線や影が“ぼやける”
よくある現象
枠線がにじんだり、微妙にズレて見える。
原因
ピクセル単位で要素が「中途半端な位置（例：100.5px）」に置かれているため。
これはFigma特有の“サブピクセル問題”です。
解決法
- 上部バーの「Snap to pixel grid（Ctrl+Shift+’）」をON
- 座標を整数値に修正（例：100px, 200px）
つまずき⑨：要素を削除したのに残像がある（バグ？）
よくある現象
消したはずのオブジェクトがプレビューで残る。
原因
削除した後にキャッシュ（表示履歴）が残っている場合があります。
解決法
- ブラウザを更新（⌘ + R / Ctrl + R）
- または「Outline」モード（Shift + O）で構成を再確認
それでも消えない場合は、一度ファイルを複製して開き直すとリセットされます。
つまずき⑩：完成したデザインを画像で書き出せない
よくある現象
「エクスポートできない」「画像が切れる」「サイズが変」など。
原因
フレームごとにエクスポート設定をしないと、書き出し対象にならないからです。
解決法
- 書き出したいフレームを選択
- 右パネルの下部「Export」→「+」をクリック
- PNG / JPG / SVG / PDF 形式を選択
- 「Export Frame」をクリック
Figmaはフレーム単位での出力が基本です。アートボード感覚で使いましょう。
まとめ：Figmaは“つまずき”の数だけ上達する
初心者が最初に戸惑うポイントは、誰もが通る道です。
でも、その一つひとつに共通するのは「概念を理解すれば解決する」ということ。
本記事のまとめ（つまずきTOP3）
| よくある問題 | 原因 | 解決法 |
|---|---|---|
| 図形や文字が思った通りに動かない | グループ・制約設定の理解不足 | ダブルクリック・Constraintsを設定 |
| 画像やフォントがズレる | Fill設定・Webフォント問題 | Fit/Crop調整・Google Fontsを使用 |
| チーム作業で混乱する | 同時編集による競合 | コメントと複製で安全に作業 |
Figmaは“触って覚えるタイプのツール”。
最初の10個の壁を越えた頃には、もう中級者への入口に立っています。
焦らず、一歩ずつ“デザインの思考”を育てていきましょう。