Figma書き出しの方法｜PNG・SVG・PDFと納品ファイルの確認

※本記事にはPRを含む場合があります。

こんにちは。『脱会社員』脱サラを応援し続けるブログ、運営者の『なかびー』です。

Figmaで作ったバナーやアイコンを書き出したいのに、余白が大きい、背景が白い、文字の見え方が違う。書き出しボタンは押せても、受け取った人がそのまま使えるファイルにするところで迷うことがあります。形式を選ぶ前に、どの範囲を、どの大きさで、何に使うために渡すかを整理することが大切です。

この記事ではFigma Designの静的なデザインを対象に、PNG・JPG・SVG・PDFの使い分け、フレームとレイヤーの選び方、倍率、背景、ファイル名、保存後の確認を順に説明します。動くプロトタイプや動画の書き出し、Webサイトの公開は別の作業です。まずは一つのカード画像を正しく出力するところから始めましょう。

2026年10月に確認したFigma公式情報に基づく説明です。画面や表示される設定は、アクセス権、利用モード、更新状況によって異なる場合があります。本文の寸法は練習用の計算例で、実際のFigmaファイルから出力した検証結果ではありません。各画像は制作工程を表すイメージで、操作画面を再現したものではありません。

Figmaで書き出す形式を、用途と編集の必要性から選ぶ

画像、ベクター、資料は用途が違う

PNGやJPGは、デザインをピクセルの集まりとして保存する画像形式です。Webサイトへ貼るバナー、資料に挿入する完成画像などに使います。SVGは線や形を扱うベクターの形式で、アイコンやロゴなどを拡大縮小して使う場面に向いています。PDFは固定されたレイアウトを配布する資料として使う場合に候補になります。

どの形式でも同じ状態が保たれるわけではありません。写真中心の画像と、細い線と文字を含むアイコンでは確認するところが違います。相手から「画像でください」とだけ言われた場合は、Web用なのか印刷用なのか、透明な背景が必要か、どの大きさで使うかを先に確認します。

編集できる元データが必要なのか、完成した見た目だけが必要なのかも分けます。PNGを渡した相手が、Figma内と同じように文字を個別に修正できるとは限りません。PDFやSVGも、Figmaのレイヤー構造や編集のしやすさをそのまま保証する形式ではありません。納品物の役割をはっきりさせてから書き出します。

※表は横にスクロールできます。

透明な背景が必要なら形式と中身を両方確認する

PNGとSVGは透明を扱えますが、透明対応の形式を選んだだけで、デザイン内の白い長方形が自動で消えるわけではありません。フレームの塗り、背景用の図形、写真そのものの背景がそれぞれ含まれる可能性があります。透明にしたい範囲と、白いまま残したい部分を区別します。

JPGは透明を保持しません。ロゴを写真の上へ重ねたい場合にJPGを渡すと、周囲に背景色の四角が付いて使いにくくなることがあります。相手がJPG指定なのに透明も求めている場合は、どちらが必要かを確認し、PNGなど別の形式を相談してください。拡張子を書き換えるだけでは解決しません。

透明な画像は、ビューアーによって白や黒の背景で表示されることがあります。白く見えるだけで失敗と決めつけず、異なる色の背景の上へ置いて確認します。白いロゴは白い画面では見えなくなるため、内容が空なのか、透明背景の上に白い形があるのかを分けて考えましょう。

SVGなら写真まで無限に鮮明になるわけではない

SVGはベクターで作られた形の拡大縮小に向いていますが、デザイン内へ配置した写真がすべてベクターへ変換されるわけではありません。小さな写真を含む素材をSVGで保存しただけで、大きく使っても鮮明になると考えないようにします。写真の品質は元画像と使用する大きさを確認します。

細い線、影、ぼかし、文字などは、保存先のアプリやブラウザで見え方が異なることがあります。SVGの形式を選んだら完成とせず、実際に使用する環境で表示を確認してください。表示に差がある場合は、どの効果や要素が影響しているかを分け、必要なら別形式での提供も相談します。

形式と設定の確認先：Figma公式の静的デザインの書き出し形式

書き出す範囲をフレーム・レイヤー・スライスで決める

完成した一枚を渡すなら外側のフレームを確認する

カードの背景、写真、見出し、補足を一枚の画像にしたいときは、それらを含むフレームを選びます。見出しの文字レイヤーだけを選ぶと、文字だけが出力されることがあります。キャンバス上で見た目をクリックするだけでは、どの階層を選んでいるか分かりにくい場合があるため、レイヤーパネルの選択名も確認します。

フレームの幅と高さは、想定する書き出し範囲の基準になります。練習では、幅320、高さ180のカード用フレームを考えます。中に写真と文字を置き、背景を含めて一枚で渡す例です。後で二倍の画像を出すとしても、まず320×180の範囲に必要な内容が収まっているかを見ます。

フレームの外へ影や装飾が伸びている場合、どこまで必要かを確認します。カード本体の寸法を固定したいのか、影を含む余白まで渡したいのかで、調整する範囲が変わります。見た目が近いからと、異なる範囲のファイルを混ぜて納品しないようにしましょう。

部品だけを渡す場合は必要なレイヤーを選ぶ

アイコンだけ、ボタンだけ、背景模様だけが必要な場合は、その要素またはまとまりを選びます。同じアイコンに複数の線や図形があるなら、一部だけ選んでいないか確認します。片方の線が欠けていても小さなプレビューでは気づきにくいので、出力後の全体の形を見ます。

複数の候補が重なっている作業用ファイルでは、古いアイコンや非採用の案が近くに残っていることがあります。書き出し対象の名前と見た目を対応させ、今回の採用版かを確認してください。レイヤー名が「Group 12」のようなままなら、少なくとも納品対象は役割の分かる名前へ整理すると確認しやすくなります。

文字や写真を含むグループを選んだ場合、フレームとは範囲の取り方が違うことがあります。決まった余白をそろえたい素材では、同じサイズのフレームへ配置してから出力する方法を検討します。中身の大きさが違うアイコンを、そのままバラバラの外形で渡すと、実装時の位置合わせに手間がかかる場合があります。

スライスは切り出す範囲を明示したいときに使う

Figmaのスライスは、キャンバス上の指定した範囲を書き出すための機能です。公式では編集権限がある場合に利用できると案内されています。複数の要素を含む一部分だけを切り出したいときや、一定の範囲を指定したいときに候補になります。画像編集ソフトでファイルを後から切り取る操作とは、作業する場所が違います。

スライスの境界へ必要な文字や線がかかっていないかを確認します。小さな影や装飾も含めたいなら、その部分まで範囲に入っているかを見ます。範囲を広げすぎると、別案や作業メモが混ざる可能性があります。切り出し範囲を決めたら、周辺の不要な内容もあわせて点検してください。

スライスは中身が変わっても指定範囲を意識して管理する必要があります。後からアイコンを大きくした場合、以前のスライスの中へ収まらなくなるかもしれません。素材を修正したら書き出し範囲も再確認し、前回の設定が今回も正しいと決めつけないことが大切です。

何も選んでいないときの対象にも注意する

Figma公式では、現在のページのキャンバス全体を書き出す場合は選択を外して設定する流れが説明されています。小さなカードを一枚だけ出したいのに何も選択していないと、意図しない広い範囲を対象にする可能性があります。書き出しボタンの対象名とプレビューを見て、目的の要素になっているかを確認します。

作業用キャンバスには、下書き、比較案、メモ、未公開の写真などが並んでいることがあります。ページ全体の出力は便利ですが、配布してよい範囲かを確認してから使います。相手に見せたい完成版だけを専用のページやフレームへ整理しておくと、選択違いを防ぎやすくなります。

基本手順の確認先：Figma公式の静的デザインの書き出し

Exportで形式・倍率・背景を設定し、名前を整理して保存する

Export欄の場所は権限やモードで変わる

対象を選択したら、右側のパネルにあるExportの項目を探します。編集権限があるDesignモードでは右側の下部、閲覧権限ではProperties側など、表示場所が異なる場合があります。Dev Modeでも選択状態が関係します。古い画面の位置だけを頼りに探さず、選択対象と現在のモードを確認してください。

Exportへ設定を追加し、形式と倍率を選びます。一つの対象に複数の設定を付けることもできますが、初回は一つのPNGから始めると確認しやすくなります。設定を増やす前に、想定する範囲と寸法で一枚出せるかを確かめ、不要な形式や倍率を残さないようにします。

プレビューが使える場合は、背景、余白、文字の欠けを見ます。ただし、複数の対象を選んでいるとプレビューが表示されない場合があります。確認できないまま大量に出すより、一つずつ選んで確かめるか、少数のテスト出力を開いてからまとめて出力します。

1x・2x・3xは縦横それぞれの倍率

幅320、高さ180のフレームをPNGで出す練習では、1xなら320×180、2xなら640×360、3xなら960×540となる計算です。二倍は面積が二倍という意味ではなく、幅と高さがそれぞれ二倍です。ピクセル数の合計は1xの57,600に対し、2xは230,400で四倍になります。

ただし、ピクセル数が四倍だからファイル容量も必ず四倍になるわけではありません。画像の内容、圧縮、透明部分などによって容量は変わります。高密度の画面向けに大きな画像が必要か、容量を抑える必要があるかを提出先と合わせ、なんとなく最大の倍率を選ばないようにします。

公式では倍率のほか、幅や高さを指定する書き方も案内されています。固定幅や固定高を使う場合は、縦横比を保った結果としてもう一方がどうなるかを確認します。数値を入れた後の寸法表示と保存後のファイル情報を見比べると、思っていたサイズとの違いを見つけやすくなります。

※表は横にスクロールできます。

SVGとPDFについては、公式で1xのみ対応と案内されています。PNGと同じ感覚で二倍、三倍の設定を探し続けないようにします。SVGは利用先で表示寸法を指定する考え方があり、PDFは資料の寸法や用途を確認する必要があります。形式ごとの役割に合わせて判断してください。

背景の塗りと重なりの設定を確かめる

フレームの塗りを出力へ含めたくない場合、公式ではFillのShow in exportsを外す方法が案内されています。ただし、別の白い図形がフレーム内にある場合や、写真に背景が含まれている場合は、それぞれ別に確認します。設定一つで不要な背景がすべて消えると考えないことが大切です。

選択した対象にほかのレイヤーが重なっている場合、重なりを無視する設定が出力へ影響します。必要なロゴやマスクが含まれるか、逆に無関係な要素が混ざらないかをプレビューと実ファイルで確認します。スライスでは範囲や含まれるコンテナも関係するため、対象を変えたら前の設定をそのまま信頼しないようにします。

同じカードを白背景用と濃色背景用に渡す場合は、文字や輪郭がそれぞれの背景で見えるかを確認します。透明なアイコンの黒い線は黒背景で見えなくなることがあります。形式の問題と配色の問題を分け、必要なら白版と黒版を明確な名前で用意します。

ファイル名と接尾辞で用途を区別する

書き出し時の名前は、受け取る人が何の素材か分かるものにします。たとえばcard-main.png、card-main@2x.pngのように基本名と倍率をそろえる方法があります。接尾辞を設定した場合は、実際のファイル名がどうなるかを確認してください。名前に二倍と書いていても、設定が1xなら中身は二倍になりません。

Figmaではスラッシュで区切ったレイヤー名が、書き出し後のフォルダー階層に使われる場合があります。button/pill/defaultという名前なら、その区切りに対応したフォルダーの中へファイルが整理される仕組みです。意図せず深いフォルダーにならないよう、納品先の命名ルールと合わせます。

同じ名前の別案をまとめて出すと、ファイルの区別が難しくなることがあります。採用案、色違い、状態違い、倍率違いをどう区別するかを決め、重複や取り違えを確認します。日付だけに頼らず、内容を識別できる名前にしておくと、後日の修正にも役立ちます。

SVGとPDFは文字・効果・編集可能性を別に確認する

SVGの文字はアウトライン設定を確認する

FigmaのSVG出力では、文字を形として扱う設定が標準で有効になる場合があります。見た目を保ちやすい一方、書き出した先で通常の文字として修正することはできなくなります。文字編集を残す必要がある場合はOutline textの設定を確認し、相手の利用環境でどう表示されるかを試してください。

アウトライン化を外しても、どの環境でも同じフォントで表示されるとは限りません。フォントが使えるか、置き換えが起きないか、文字の幅や改行が変わらないかを確認します。見た目を固定したいのか、文字として扱う必要があるのかによって判断が変わるため、一律にどちらが正しいとは言えません。

ロゴや見出しの文字を形にした場合、スペルや数字の修正は元のデザインへ戻って行うほうが管理しやすくなります。出力したファイルだけを直し、Figma側の元データを古いままにすると、次の書き出しで修正が失われる可能性があります。元と納品物を同じ内容へ保ちましょう。

線、影、ぼかしは表示先で見比べる

細い線や複雑な影を使ったアイコンでは、保存後に太さや端の見え方が変わることがあります。デザイン画面の拡大表示だけでなく、実際に使う小さな大きさで確認します。24ピクセル程度で使う想定のアイコンを、画面いっぱいに拡大した見た目だけで判断しないことが大切です。

SVGの中にぼかしや画像を含む場合、表示先がその表現を期待どおり扱うかを確認します。Figma公式でもSVGやPDFには形式ごとの制限が案内されています。必要な見た目が保てない場合は、効果を調整する、別の素材構成へ変える、PNGを併せて用意するなど、用途に合う方法を相談します。

数値上は同じ色でも、ファイルのカラープロファイルや表示環境によって印象が違う場合があります。Figmaの出力にはsRGBやDisplay P3などの設定が関係するため、提出先が指定するプロファイルがあれば確認します。複数のファイルで条件をそろえ、色が変わったように見える原因を分けて調べます。

PDFは見た目の配布と元データの納品を分ける

PDFは固定レイアウトを確認してもらう資料に使えますが、Figmaの編集データそのものではありません。公式ではPDFの文字はグリフとして出力され、通常のテキスト編集はできない一方、対応する表示ソフトでは選択やコピーが可能と説明されています。「文字を編集できないから、内容も取り出せない」と考えないようにします。

閲覧用のPDFでよいのか、印刷会社へ入稿するデータなのかでも条件が違います。印刷では仕上がり寸法、色、塗り足し、フォントなどの指定を確認します。FigmaからPDFを出せることだけを理由に、どの印刷先でもそのまま受け付けられると保証しないようにしてください。

資料が複数ページになる場合は、必要なページの有無、順番、余白、文字の切れを確認します。一枚ずつのPDFで渡すのか、一つにまとめた資料が必要なのかも確認事項です。まとめ方を変える場合、最終ファイルを開き直し、ページの抜けや重複がないかを見てから渡します。

元データを渡す範囲は書き出しとは別に決める

編集用のFigmaファイルやローカルコピーが必要な場合は、完成画像とは別の納品物として確認します。作業途中の案、コメント、使わなかった写真などが含まれていないかも見ます。相手が必要としていない内部の検討材料まで、便利だからとまとめて渡さないようにします。

公式では、ローカルコピーにはバージョン履歴とコメントが含まれず、再読み込みすると元と別の新しいファイルになると説明されています。元ファイルへの共有リンクと、ローカルコピーの納品は同じ状態を渡す方法ではありません。コメントで決めた仕様を伝える必要があるなら、合意した内容を別の納品メモへまとめます。

再読み込みしたファイル内のコンポーネントも新しいものとして扱われ、元のコンポーネントからの更新を受け続ける前提にはできません。共同で継続更新する用途なら、コピーを渡せば元の仕組みまでそのまま続くと考えず、どのファイルを管理するかを相手と確認してください。

ローカルコピーについては、Figma公式のファイル保存の説明を確認してください。画像を出力する機能と、編集データを保存・共有する機能は同じではありません。フォントや素材の利用条件も含め、渡してよい範囲を確認します。

※表は横にスクロールできます。

書き出したファイルを照合し、権限や失敗の原因を切り分ける

複数の素材は設定済みの対象を一覧で確認する

Figmaでは、現在のページにある書き出し設定付きの対象を、FileのExportからまとめて確認できます。表示される一覧で形式、倍率、寸法、名前を見て、不要な対象を外してから書き出します。作業中に試した旧版の設定が残っている場合もあるため、一括出力は選択漏れと同時に余計な出力も点検する工程と考えます。

たとえば三つのアイコンのうち一つだけSVGの設定が抜けていれば、PNGはそろっていてもSVGが一枚足りなくなります。形式ごとの必要数を先に決め、一覧と照合してから出力すると、保存後に不足を探す時間を減らせます。初めての案件では、代表の一つを先に相手の用途で確認し、設定が固まってから残りへ展開する方法も役立ちます。

保存ファイルの数、名前、寸法を確認する

書き出し後は保存先を開き、必要なファイルがそろっているか確認します。ブラウザ版ではブラウザのダウンロード先、デスクトップ版では保存時に指定した場所が関係します。別のフォルダーに古い同名ファイルがある場合もあるため、今出力したものを見ているかを確かめます。

三種類のアイコンを1xと2xで渡すなら、予定する画像は六枚です。一部だけ2xがない、同じアイコンが二つある、未採用案が混ざるなどの取り違えを一覧で確認します。元のレイヤー名、形式、倍率、保存名、寸法を対応させておくと、数が増えても確認しやすくなります。

フレーム320×180の2xなら640×360という計算と、保存画像の実寸法を照合します。余白や影の扱いによって想定と違う場合は、選択対象と出力範囲を確認します。名前だけを正しい寸法へ書き換えるのではなく、必要な範囲と設定を直してから再出力してください。

白背景、濃色背景、実際の表示サイズで見る

透明な素材は、白と濃い色の両方へ重ねると輪郭の残りや欠けを見つけやすくなります。文字入りのバナーは、実際の使用サイズで読めるかを確認します。拡大表示では気にならなかった細い文字や、小さな注記が見えなくなることがあります。納品先の表示条件に近づけて確認してください。

SVGとPNGを両方出した場合、内容が同じかも確認します。片方だけ古い文字のまま、片方だけ背景付きという状態では、相手がどちらを正しいとすべきか迷います。必要なら比較用のプレビューを作りますが、プレビューと実装用の素材は役割が違うと説明して渡します。

色や影の違いが出たときは、すぐに元デザインを変更する前に、形式、プロファイル、表示ソフト、重なりの設定を確認します。一つずつ条件を変えて比べると、原因を絞りやすくなります。別のソフトで未確認なら、その環境で同じ表示になると断言せず、確認範囲を相手と共有します。

Exportが見つからないときはアクセス権を確認する

Figmaの静的書き出しはすべてのプランで利用でき、閲覧権限でも、所有者がコピーや共有を制限していなければ書き出せると公式で案内されています。編集権限がないから必ず不可能と決めつける必要はありませんが、制限されているファイルでは書き出せません。現在の選択とパネルを確認してから、権限の状態を調べます。

所有者が書き出しを制限している場合は、必要な用途を説明し、許可された素材を受け取る方法を相談します。画面を別の手段で抜き出して制限を回避することを解決策にしないようにしましょう。閲覧できることと、素材を自由に持ち出して使えることは別です。

権限の確認先：Figma公式のコピー・共有・書き出し制限

出力が違うときは対象、設定、保存先の順に確認する

余白が大きいなら、グループの外形、フレームの寸法、スライスの範囲、文字の境界が関係していないかを見ます。一部が欠けるなら、必要なレイヤーを選び忘れていないか、境界の外へ出ていないかを確認します。背景が付くなら、フレームの塗り、背景図形、写真内の背景を分けて調べます。

保存できない場合は、最初に小さな対象を一つだけ出力して比較します。全体の大きな出力だけが失敗するなら、対象を分け、必要な素材だけで試す方法があります。すぐにファイルを削ったり、大量の設定を変えたりせず、元データを残して原因を絞ります。表示されたエラーも記録してください。

※表は横にスクロールできます。

納品一覧に用途と確認範囲を添える

納品時には、ファイルの種類、数、用途を短く説明します。「カード画像はPNGの1xと2x、アイコンはSVGです。PNGは透明背景で、指定寸法を確認しています」のように、相手が使うときに必要な情報をそろえます。実際には未確認の環境や、依頼に含まれていない対応まで確認済みと書かないようにします。

修正依頼を受けたら、元データのどの要素を直したかを残し、関連する形式や倍率もまとめて再出力します。PNGだけ修正し、SVGが古いままでは納品物が食い違います。更新したファイルを一覧と照合し、相手が旧版を使わないように版の違いを伝えます。

素材制作を仕事として扱う場合は、完成画像、編集データ、形式違い、倍率違いをどこまで含むかを決めておくと説明しやすくなります。サービス範囲の整理には、ココナラ出品と初回納品の進め方も参考になります。書き出しだけの依頼に、無制限のデザイン修正まで含むと考えないよう、最初に範囲を合わせましょう。

Figmaでの制作を学びたい方は、レイヤーやフレームの整理、文字と余白の設計もあわせて学ぶと、書き出し時の確認が楽になります。学習方法を比較するなら、Webデザインスクールの比較ガイドで制作課題と支援の内容を確認してみてください。まずは一つの素材を、必要な形式と寸法で完成させるところからで十分です。

Figmaの書き出しは、形式を選んで終わる作業ではありません。対象の範囲を決め、用途に合う形式と倍率を選び、背景や文字を確認し、保存した実ファイルを照合する流れが重要です。この順番を習慣にすると、渡した後で使えない、寸法が違うといった手戻りを減らせます。