Figma で画像をまとめて書き出す方法 — 一括エクスポート・画質設定・PNG/SVG/PDF の使い分け

「Figma で 20 枚以上のフレームを画像として一気に書き出したい」「書き出した PNG がなぜかぼやける」「PNG・SVG・PDF のどれで書き出すのが正解かわからない」— Figma でデザインの制作を進めると、最終的に成果物を書き出す段階で手が止まることがあります。

Figma の書き出し（Export）は、一度設定を覚えれば複数要素をまとめて出力できる強力な仕組みですが、スケールや形式の選び方を間違えると画質トラブルや作り直しの原因になります。

本記事では、Export 設定パネルの基本 → 複数要素のまとめて書き出し → 画質が悪いときの原因の切り分け → PNG/SVG/PDF/JPG の使い分け → XD から移行したファイルの注意点を、実務でそのまま使える順序で整理しました。Pixel Fine Converter の開発で XD → Figma 変換を扱ってきた立場から、移行後のファイルを書き出すときに引っかかりやすいポイントも合わせてまとめます。

この記事で得られること

Figma の Export 設定パネルの基本操作（形式・スケール・サフィックス）
複数フレーム / 複数要素を一括で書き出す手順
書き出した画像がぼやける・画質が悪いときの原因の切り分けと対処
PNG / SVG / PDF / JPG をどの場面で選ぶべきかの判断基準
XD から移行したファイルを書き出すとき特有の注意点

📝 はじめに — 書き出しで困りやすい 3 つの場面

Figma で書き出しに困る場面は、大きく次の 3 つに分かれます。それぞれ対処が違うので、まず自分のケースを特定してから読み進めてください。

場面 A: 1 つの要素を、決まった形式で書き出したい

アイコン 1 つを SVG で、バナー 1 枚を PNG で書き出す、というケース。要素を選んで Export 設定を追加すれば終わるので、基本操作だけで完結します。

場面 B: 大量のフレームや要素を、まとめて一気に書き出したい

20 画面分のフレームを全部 PNG にする、アイコンを 50 個まとめて SVG にする、というケース。1 枚ずつ書き出すのは非効率なので、複数選択 + 一括書き出しを使います。「まとめて書き出したい」というニーズはここに集中します。

場面 C: 書き出した画像の画質が悪い・ぼやける

「Retina ディスプレイで見るとぼやける」「拡大すると粗い」というケース。多くはスケール設定か元画像の解像度が原因で、形式の選び直しで解決することもあります。

以下では、A（基本）→ B（まとめて）→ C（画質）の順に解説します。

🧭 Figma の書き出しの基本 — Export 設定パネル

Figma の書き出しは、要素を選択した状態で右サイドバー（Design タブ）下部の Export セクションから設定します。書き出しは無料プランでも利用可能で、特別な権限は必要ありません。

Export 設定の追加

書き出したい要素（フレーム / グループ / レイヤー）を選択
右サイドバー下部の Export の＋ボタンをクリック
スケール・形式・サフィックスを設定
Export [要素名] ボタンで書き出し

設定できる 3 項目

項目	内容	例
スケール	出力倍率。`1x` / `2x` / `3x` のほか、固定幅（`512w`）・固定高さ（`512h`）も指定可能	`2x`
サフィックス	ファイル名末尾に付く文字列。スケール違いを区別するのに便利	`@2x`
形式	PNG / JPG / SVG / PDF から選択	`PNG`

なお SVG と PDF はスケール指定が効かず、常に 1x で書き出されます（ベクター形式は解像度に依存しないため）。拡大用に高解像度のラスター画像が欲しい場合は、PNG を 2x / 3x で書き出してください。

1 つの要素に複数の Export 設定を重ねて追加できます。たとえば同じアイコンに「1x PNG」「2x PNG」「SVG」を登録しておけば、1 回の書き出しで 3 ファイルが同時に出力されます。

Slice（スライス）ツール

特定の要素ではなく、任意の矩形範囲を書き出したいときは Slice ツール（ショートカット S）を使います。レイヤー構造に関係なく、指定した範囲だけを切り出して書き出せます。バナーの一部だけを切り出すといった用途に向きます。なお、ショートカットキーはキーボード配列やカスタム設定によって異なる場合があります。

プレビューで確認してから書き出す

Export セクションでは、設定したスケール・形式でのプレビューが確認できます。大量に書き出す前に 1 枚だけプレビューで仕上がりを確認しておくと、形式やスケールの選び間違いによる作り直しを防げます。

📦 複数の要素をまとめて書き出す

ここが「まとめて書き出したい」という検索ニーズに直結する部分です。Figma では複数の要素を選択した状態で一括書き出しができます。

手順

書き出したい要素を複数選択（Shift + クリック、または範囲ドラッグ）
右サイドバー下部の Export で＋を押し、形式・スケールを設定
Export [N] layers ボタン（N = 選択数）をクリック
選択したすべての要素が、それぞれのファイルとして書き出される

各要素は個別のファイルとして出力され、ファイル名には要素（レイヤー / フレーム）の名前が使われます。書き出し前にレイヤー名を整理しておくと、出力されたファイルの管理が楽になります。

ページ全体のフレームをまとめて書き出す

1 ページに並んだフレームを全部書き出したいときは、フレームをまとめて選択して Export [N] layers で出力できます。フレームごとに名前が付いていれば、画面名がそのままファイル名になります。

あらかじめ Export 設定を仕込んでおく運用

「最終的に書き出すフレーム」に最初から Export 設定（例: 2x PNG）を登録しておくと、書き出しのたびに設定し直す必要がなくなります。複数フレームに同じ設定を一括で適用したい場合は、フレームをまとめて選択してから Export 設定を追加すれば、選択中の全要素に同じ設定が入ります。

大量書き出し時のファイル名の重複に注意

複数要素を一括書き出しすると、同名のレイヤーは連番付きで出力されたり、意図しない上書きが起きることがあります。書き出し前にレイヤー名がユニークになっているかを確認してください。特に XD やほかのツールから移行した直後は、Rectangle 1 のような汎用名が大量に残っていることがあります。

🔍 書き出しがぼやける・画質が悪いときの対処

書き出した画像がぼやける・画質が悪いのは、実際によく検索されるトラブルです。原因はいくつかに切り分けられます。

原因 1: スケールが 1x のまま（最も多い）

高解像度（Retina / 高 DPI）ディスプレイで見ると、1x で書き出した PNG はぼやけて見えます。Web 表示や資料で「くっきり」見せたいなら、2x 以上で書き出すのが基本です。

Web 用途: 2x を基準に
印刷・拡大表示: 3x 以上、またはベクター形式（SVG / PDF）

原因 2: 元画像（画像 fill）の解像度が低い

Figma に配置した写真やビットマップ画像そのものが低解像度の場合、書き出しのスケールを上げても元の粗さは改善しません。引き伸ばしたぶんだけ粗く見えます。この場合は元画像を高解像度のものに差し替える必要があります。

原因 3: ベクターを PNG で書き出している

アイコンやロゴのようにベクターで作られた要素は、PNG（ラスター）で書き出すと特定の解像度に固定され、拡大するとぼやけます。SVG で書き出せば解像度に依存せず常にくっきりします。

原因 4: JPG の圧縮

JPG は圧縮形式のため、グラデーションやテキストのエッジにノイズ（モスキートノイズ）が出ることがあります。ロゴ・UI・テキストを含む画像は PNG、写真は JPG、という使い分けが基本です。

画質トラブルの切り分け順序

ぼやける原因の切り分けは「① スケールを 2x/3x に上げて改善するか → ② しないなら元画像が低解像度（差し替えが必要）→ ③ ベクター要素なら SVG に変える」の順で確認すると早いです。スケールを上げても改善しない場合は、Figma の書き出し設定ではなく素材そのものに原因があります。

🎨 PNG / SVG / PDF / JPG の使い分け

形式選びは「ラスター（PNG/JPG）かベクター（SVG/PDF）か」「用途は Web か印刷か」で決まります。

形式	種類	向いている用途	注意点
PNG	ラスター	UI スクショ、透過が必要な画像、Web 表示	拡大に弱い。スケール設定が重要
JPG	ラスター	写真、透過不要で軽くしたい画像	圧縮ノイズ。テキスト・ロゴには不向き
SVG	ベクター	アイコン、ロゴ、エンジニアなどに渡すベクター素材	複雑なエフェクトは再現が崩れることがある
PDF	ベクター	印刷入稿、複数ページのまとめ出力、レビュー共有	フォント埋め込み・色空間の確認が必要

複数フレームを 1 つの PDF にまとめる

ページ上の全フレームを 1 つの PDF にまとめたいときは、メインメニュー（左上の Figma ロゴ）→ File → Export frames to PDF を使います。現在のページにあるフレームがそれぞれ 1 ページとして、画面上の左→右・上→下の順で 1 つの PDF に書き出されます。レビュー用の資料や印刷入稿で「全画面を 1 ファイルで渡したい」という場面に向くため、書き出し前にフレームの並び順・命名を整えておくと、できあがる PDF の構成が安定します。

一方、特定のフレームだけを選んで 1 つの PDF にまとめるのは標準機能では行えません。Export 設定で PDF を選んで書き出すと、フレームごとに別々の PDF として出力されます。選択したフレームだけを 1 ファイルにまとめたい場合は、専用のプラグインを使います。

エンジニアなどのチームメンバーに渡すならベクターを意識する

エンジニアにアイコンを渡すなら、PNG ではなく SVG が基本です。SVG はコードとして扱え、色やサイズを CSS 側で調整できます。SVG の書き出し設定では、id 属性の付与やテキストのアウトライン化などのオプションを調整できます。

🔄 XD から移行したファイルを書き出すときの注意

Adobe XD から Figma に移行した直後のファイルを書き出す場合、移行に起因した次のような点に注意すると、書き出しトラブルを避けられます。

画像 fill は「XD に配置したときの解像度」を引き継ぐ

XD で配置していた画像が低解像度だった場合、Figma に移行してもその解像度のままです。書き出しのスケールを上げても粗さは改善しないため（前述の原因 2）、重要な画像は移行後に高解像度のものへ差し替えるのが確実です。

フォントのフォールバックは書き出しにも反映される

移行時にフォントが見つからずフォールバック（代替フォント）に置き換わっていると、書き出した画像にもそのフォールバック表示が出ます。テキストを含む画像を書き出す前に、フォントが正しく適用されているかを確認してください。フォント周りのトラブルは Figma でフォントが反映されない時の対処法を参照してください。

ベクター図形は SVG でクリーンに書き出せる

XD から変換されたベクター図形（シェイプ・パス）は、Figma 上でベクターとして扱えるため、SVG で書き出せば解像度非依存でくっきりします。XD の図形が Figma でどう変換されるかは Figma で XD の図形を変換するプラグインで詳しく扱っています。

書き出しは Figma 標準機能 — 移行は変換ツールの役割

Figma の書き出し（Export）は Figma 標準機能で完結します。書き出しのために特別なプラグインは不要です。一方、まだ XD ファイルが手元にある場合は、まず Figma に取り込む（変換する）工程が必要です。Pixel Fine Converter は XD → Figma の取り込み（変換）を担うプラグインで、書き出しそのものは Figma 側で行います。「XD のデータを Figma に持ち込んでから、Figma で書き出す」という 2 段構えになります。

まだ移行していない XD ファイルがあるなら、まず Pixel Fine Converter で Figma に変換し、そのうえで本記事の書き出し手順を使ってください。

XD ファイルを Figma に変換 Figma Community で無料インストール

Figma Communityから1クリックで追加できます

❓ よくある質問

Q: 複数のフレームを一度に書き出せますか？

はい。フレームを複数選択して Export 設定を追加し、Export [N] layers ボタンを押せば、選択したすべてのフレームがそれぞれのファイルとして一括で書き出されます。

Q: 書き出した画像がぼやけます。どうすれば？

まずスケールを 2x / 3x に上げてください。それでも改善しない場合は、元画像（画像 fill）が低解像度であるか、ベクター要素を PNG で書き出している可能性があります。ベクターは SVG で書き出すと解像度に依存せずくっきりします。

Q: PNG と SVG はどう使い分ければいいですか？

写真や透過 PNG が必要な画像は PNG、アイコン・ロゴ・エンジニアなどに渡すベクター素材は SVG が基本です。拡大表示やコード連携が必要なら SVG を選びます。

Q: 複数の画面を 1 つの PDF にまとめられますか？

ページ上の全フレームを 1 つの PDF にまとめるには、メインメニュー（左上の Figma ロゴ）→ File → Export frames to PDF を使います（各フレームが 1 ページになります）。ただし、特定のフレームだけを選んで 1 つにまとめる標準機能はありません — Export 設定で PDF を選ぶとフレームごとに別ファイルになるため、選択分だけまとめたい場合はプラグインを使います。

Q: 書き出しは無料プランでも使えますか？

はい。Figma の書き出し（Export）は無料プランでも利用できます。特別な権限やアップグレードは不要です。

Q: XD から移行したファイルを書き出すと画質が落ちます

XD に配置していた画像が低解像度だった場合、移行後もその解像度を引き継ぐため、スケールを上げても粗さは改善しません。重要な画像は移行後に高解像度のものへ差し替えてください。ベクター図形であれば SVG でくっきり書き出せます。

Q: 書き出すたびに設定し直すのが面倒です

書き出す要素にあらかじめ Export 設定を登録しておけば、次回以降は設定済みの状態で書き出せます。複数フレームに同じ設定を入れたい場合は、まとめて選択してから Export 設定を追加してください。

🎯 まとめ

Figma の書き出しは、用途に合った形式とスケールを選べているかで仕上がりが決まります。

記事のポイント

書き出しは右サイドバーの Export セクションから設定。無料プランでも利用可能
まとめて書き出し は複数選択 → Export [N] layers で完結
画質が悪い・ぼやける は ① スケール 1x → 2x/3x、② 元画像の解像度、③ ベクターは SVG、の順で切り分ける
形式の使い分け は「ラスター（PNG/JPG）かベクター（SVG/PDF）か」「Web か印刷か」で決まる
複数フレームを 1 つの PDF にまとめる出力も可能
XD から移行したファイル は、画像 fill の解像度・フォントのフォールバックが書き出しに反映される点に注意
書き出しは Figma 標準機能 で完結。XD からの取り込み（変換）は別工程で、Pixel Fine Converter が担う

最も時間を節約できるのは、最終的に書き出す要素にあらかじめ Export 設定を仕込んでおくことです。書き出しのたびに設定し直す手間がなくなり、複数フレームの一括書き出しも一瞬で終わります。

まだ Figma に移行していない XD ファイルがあるなら、まず Pixel Fine Converter で変換し、そのうえで本記事の書き出し手順を活用してください。