Figma初心者がつまずくポイント10選とその解決法

Posted on by

はじめに：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）で構成を再確認

それでも消えない場合は、一度ファイルを複製して開き直すとリセットされます。

つまずき⑩：完成したデザインを画像で書き出せない

よくある現象

「エクスポートできない」「画像が切れる」「サイズが変」など。

原因

フレームごとにエクスポート設定をしないと、書き出し対象にならないからです。

解決法

  1. 書き出したいフレームを選択
  2. 右パネルの下部「Export」→「+」をクリック
  3. PNG / JPG / SVG / PDF 形式を選択
  4. 「Export Frame」をクリック

Figmaはフレーム単位での出力が基本です。アートボード感覚で使いましょう。

まとめ：Figmaは“つまずき”の数だけ上達する

初心者が最初に戸惑うポイントは、誰もが通る道です。
でも、その一つひとつに共通するのは「概念を理解すれば解決する」ということ。

本記事のまとめ（つまずきTOP3）

よくある問題原因解決法
図形や文字が思った通りに動かないグループ・制約設定の理解不足ダブルクリック・Constraintsを設定
画像やフォントがズレるFill設定・Webフォント問題Fit/Crop調整・Google Fontsを使用
チーム作業で混乱する同時編集による競合コメントと複製で安全に作業

Figmaは“触って覚えるタイプのツール”。
最初の10個の壁を越えた頃には、もう中級者への入口に立っています。

焦らず、一歩ずつ“デザインの思考”を育てていきましょう。