Figmaに画像を入れる方法は4つあり、どれを使うかで後の作業しやすさが変わります。また、知らないと画質を落としてしまう仕様がひとつあります。4096ピクセルを超える画像は、警告なしに自動で縮小されます。この記事では挿入とトリミングの手順に加えて、こうした仕様を押さえておきます。

Figmaの画像は「塗り」です

最初にこれを理解しておくと、あとの操作がすべて腑に落ちます。

Figmaでは画像が独立したオブジェクトではありません。長方形などの図形に対する塗りとして扱われます。CSSでいう背景画像に近い考え方です。

キャンバスに直接ドラッグした場合も、内部では画像の塗りを持った長方形が作られています。だから差し替えが簡単で、トリミングしても元の画像が失われません。

画像を入れる4つの方法

状況によって使い分けます。

配置は3つの挙動があります

ショートカットで画像を配置するとき、選ぶ状態によって結果が変わります。

• キャンバスをクリックすると、元の寸法で1枚ずつ新しいレイヤーになる
• 既存のオブジェクトを選んでいると、その塗りが置き換わる
• すべて配置を選ぶと、全部まとめて1か所に置かれる

ドラッグ＆ドロップで複数枚を入れた場合は、10枚ずつの行に整列して並びます。

枠が決まっているなら塗りから入れる

角丸や円形など、形とサイズが先に決まっている場合は、その図形を選んでから右サイドバーの塗りをクリックし、画像を選ぶほうが早いです。

塗りの種類は5つあります。単色、グラデーション、パターン、画像、動画です。パターンは比較的新しく追加されたもので、キャンバス上の別のオブジェクトを参照します。参照元を直すと使っている場所がすべて更新されます。

動画を扱えるのは有料プランのみです。画像はすべてのプランで使えます。

4096ピクセルを超えると縮みます

これは知らないと損をする仕様です。

アップロードした画像が4096×4096ピクセルを超えている場合、Figmaは長辺が4096ピクセル以下になるよう自動で縮小します。エラーも警告も出ません。黙って縮みます。

一眼で撮った写真やスマホの高画素の写真は、たいていこの上限を超えています。大きな画面用のキービジュアルを作るときに、思ったより粗いと感じる原因がここにあります。

公式は、この縮小でファイルのメタデータが失われることがあるとも注記しています。あらかじめ長辺4096ピクセル以内に整えてから入れるほうが、意図した画質を保てます。

対応している形式

JPG、PNG、HEIC、WebP、GIFに対応しています。TIFFはSafariでのみ使えます。

iPhoneで撮ったHEICはそのまま入ります。変換の必要はありません。

SVGは画像になりません

ここは仕様として押さえておいてください。SVGを読み込むと、Figmaは画像として扱わず、編集できるベクターレイヤーに変換します。

そのため、画像としてトリミングしたり明るさを調整したりはできません。ロゴを図形として編集したいならSVGのままで正解ですが、写真のように扱いたいならPNGなどで用意してください。

トリミングの操作

Figmaのトリミングは非破壊です。切り取った部分は削除されず、あとから何度でもやり直せます。

入り口は3つ

• 画像をダブルクリックする
• 右サイドバーの画像セクションにあるトリミングを押す
• 塗りのスウォッチを開いて、フィルモードをトリミングに変える

古い解説記事には、Optionキーを押しながらダブルクリックする方法だけが載っていることがあります。現在のUIは刷新されていて、8個の青いハンドルと縦横比のピッカーが使えます。

トリミング中の修飾キー

既定では縦横比が維持されます。確定はキャンバスの何もない場所をクリックするか、Enterです。

Fill・Fit・Crop・Tileの違い

4つのフィルモードは、名前が似ているわりに結果がまったく違います。

画像が勝手に伸びて見えるという相談は、たいていFillのまま枠の縦横比と画像の縦横比が合っていない状態です。全体を見せたいならFit、構図を決めたいならCropに切り替えます。

Tileはパーセンテージでタイルの大きさを調整します。元画像の寸法が100%です。背景の柄を作るときに使います。

縦横比を保つ方法

意図せず歪むのを防ぐ設定が3つあります。

縦横比を固定する

右サイドバーのレイアウトにある縦横比の固定を押すと、幅を変えたときに高さが自動で追従します。

固定していない状態でも、Shiftを押しながらドラッグすれば一時的に比率が保たれます。逆に固定しているときに一時解除したい場合は、Controlを押しながらドラッグします。

拡大にはScaleツールを使う

Kキーで起動するScaleツールは、幅と高さの数値を直接変えるのとは挙動が違います。入れ子のレイヤーの制約を無視して、線の太さや角丸まで含めて比例して拡大縮小します。

ボタンやカードをまるごと1.5倍にしたいときは、こちらを使ってください。

制約の設定を確認する

親フレームをリサイズしたときに画像が歪む場合は、制約がScaleになっている可能性があります。Scaleはフレームに対する割合を維持する設定なので、フレームの縦横比が変わると画像も変形します。

なお制約は、フレームの外にあるレイヤーとオートレイアウト内のレイヤーには効きません。

画像の差し替え

ここがFigmaの便利なところです。

差し替えたい画像のファイルを、右サイドバーの塗りのスウォッチへ直接ドラッグします。カラーピッカーを開いて、その中のプレビュー部分に落とす方法もあります。

重要なのは、どちらの方法でもフィルモードとトリミングの設定が保持される点です。構図を決めたあとに写真を差し替えても、同じ切り取り方が引き継がれます。

デザインカンプで仮の写真を置いておき、後から本番の写真に入れ替える運用がやりやすいのは、この仕様のおかげです。

同じ設定を他のレイヤーへ渡す

プロパティのコピーが使えます。Option+Command+C（WindowsはCtrl+Alt+C）でコピーし、Option+Command+V（WindowsはCtrl+Alt+V）で貼り付けます。塗りや線、効果がまとめて移ります。

なお、複数のレイヤーをそれぞれ別の画像へ一度に差し替える機能は、公式のヘルプに記載がありません。1つずつ行うか、プラグインを使うことになります。

マスクとクリップの使い分け

どちらも見える範囲を制限しますが、性格が違います。

フレームのクリップは、はみ出した部分を単純に隠すプロパティです。レイアウトのチェックボックスで切り替えます。四角い枠に収めるだけならこれで足ります。

マスクは任意の形で抜く仕組みです。マスクにする図形を対象より下に置き、両方を選んでマスクとして使用を選びます。ショートカットはControl+Command+M（WindowsはCtrl+Alt+M）です。

マスクには3種類あります。既定は透明度で判定するアルファ、図形の輪郭で判定するベクター、明るさで判定する輝度です。文字の形で写真を抜きたいときはマスクを使います。

書き出しで気をつけること

書き出しは右サイドバーの一番下にあります。ショートカットはShift+Command+E（WindowsはShift+Ctrl+E）です。

対応形式はPNG、JPG、SVG、PDFの4つです。WebPでの書き出しには標準では対応していません。

SVGとPDFは等倍のみ

倍率を指定できるのはPNGとJPGだけです。SVGとPDFは1倍に固定されています。2倍で書き出したいときは形式を変えてください。

倍率は数値を直接入力できます。2xのように書けば倍率、wを付ければ幅の固定、hを付ければ高さの固定になります。

書き出した2倍画像を戻すと半分になります

知らないと混乱する挙動です。2倍で書き出した画像はDPIが144になっていて、Figmaはこれを高密度ディスプレイ向けの画像だと判断します。読み込むと自動的に半分のサイズで配置されます。

不具合ではなく仕様です。元のサイズで置きたい場合は、等倍で書き出した画像を使ってください。

画像がぼやけて見えるとき

原因は2つに分かれます。

読み込み中でぼやけている

Figmaは512ピクセルを超える画像について、高解像度版と低解像度版の両方を保持しています。画面の外にあるものは低解像度で読み込むため、開いた直後はぼやけて見えます。

しばらく見ていれば高解像度に切り替わります。直らない場合はファイルを開き直すか、他のFigmaのタブを閉じてみてください。デスクトップアプリならタブを右クリックして再読み込みできます。

アップロード時に縮んでいる

先に触れた4096ピクセルの上限です。こちらは待っても直りません。元の画像を適切なサイズにしてから入れ直してください。

よくある質問（FAQ）

写真の向きがおかしくなります

スマホで撮った写真によくある症状で、EXIFの回転情報が原因です。公式のトラブルシューティングにも項目があります。事前に画像を開いて正しい向きで保存し直すと解決します。

プロトタイプで画像が表示されません

ブラウザの拡張機能が原因のことがあります。広告ブロック系や動画ダウンロード系の拡張が名指しされています。無効にするか、Figmaのドメインを許可リストに入れてください。

ファイルが重くて動きません

公式が挙げている対処は、高解像度画像の圧縮、ファイルの分割、複雑なSVGを分けて読み込むことの3つです。画像を入れる前にサイズを整えておくのが、いちばん効きます。

背景を消す機能はありますか

あります。加えて2025年12月に、不要なものを消すツール、特定のオブジェクトだけを取り出すツール、背景を歪めずに広げるツールが追加されました。いずれも有料プランと編集権限が必要で、AIのクレジットを消費します。

まとめ｜先に画像を整えておく

Figmaの画像は図形の塗りとして扱われます。この構造を知っていると、差し替えやトリミングの挙動が理解しやすくなります。

実務でいちばん効くのは、入れる前に長辺を4096ピクセル以内に整えておくことです。警告が出ないまま縮小されるので、気づかずに画質を落としているケースが少なくありません。

あとは画像が歪んだらフィルモードと制約を見る、差し替えは塗りのスウォッチへドラッグする。この2つを覚えておけば、日々の作業で止まることはほとんどなくなります。

弊社ではFigmaで設計したデザインをそのまま実装まで行っています。デザインデータの受け渡しや、社内でFigmaを使えるようにする支援もお請けしていますので、気になることがあればお気軽にご相談ください。