▶ 3日で初案件PR
この記事でわかること
FigmaのPNG書き出しは右サイドバーのExportパネルから3ステップで完了します。透過背景・2x高解像度・複数一括出力まで、フリーランス納品で必要な設定を本記事でまとめて解説します。
FigmaのPNG書き出しは、対象を選択してExportパネルに追加し、倍率を設定してエクスポートボタンを押す3ステップが基本です。透過背景が必要な場合はFillレイヤーの「Show in exports」チェックを外すことで実現でき、複数オブジェクトはShiftキーで同時選択して一括書き出しできます。この3点を押さえれば、フリーランス案件の納品データとして通用するPNGを迷いなく出力できます。
今の仕事について、一番近いものは？
この記事の結論
今日やるべき1つ
試しに任意のフレームを1つ選択し、右サイドバー最下部のExportパネルに「+」でPNGを追加してエクスポートボタンを押してください（所要時間：2分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 基本の書き出し手順を知りたい | FigmaのPNG書き出しは3ステップで完了 | 3分 |
| 透過背景にしたい | 透過PNGは「Show in exports」で設定 | 2分 |
| 倍率・解像度に迷っている | PNG倍率は用途で1x・2x・3xを選ぶ | 2分 |
| 自分の状況に合った設定を診断したい | 書き出し設定を3分で診断 | 3分 |
| まとめて大量出力したい | 複数PNG一括書き出しは5手順で完了 | 3分 |
| JPG・SVGとの使い分けを知りたい | PNG書き出しは5つの仕組みで効率化 | 4分 |
FigmaのPNG書き出しは3ステップで完了
書き出し対象の選択からエクスポートボタンのクリックまで、操作の流れを一度把握すれば3分以内に最初の書き出しを完了できます。
書き出し対象はフレームかオブジェクトを先に選ぶ
書き出し前にどのレイヤーを選択するかが最初の判断ポイントです。キャンバス上でクリックするか、左サイドバーのレイヤーパネルでフレーム名をクリックして選択します。複数を同時に選ぶ場合はShiftキーを押しながらクリックします。フレームを選ぶと、そのフレーム全体がひとつのPNGファイルとして書き出されます。個々のアイコンやパーツだけを出力したい場合は、フレームではなく該当のオブジェクトレイヤーを選択してください。「どのレイヤーを選べばよいか分からない」という悩みの多くは、フレームとオブジェクトの区別を意識するだけで解消します。
ExportパネルはデザインタブのパネルEmptyを開く
右サイドバー上部に「デザイン」タブと「プロトタイプ」タブがあります。「デザイン」タブを選択した状態で、パネルを一番下までスクロールするとExportセクションが現れます。初期状態では何も設定されていないため、「+」ボタンをクリックしてエクスポート設定を追加します。この「+」を押した段階で1x・PNGがデフォルト値として設定されるため、そのままエクスポートボタンを押すだけで基本的な書き出しが完了します。エクスポートボタンが見当たらないときは、必ずオブジェクトを選択した状態で右サイドバーを確認してください。選択がない状態ではExportパネルにボタンが表示されません。
書き出しはExportボタンで実行、保存先を確認する
「+」追加後、右サイドバーに青いエクスポートボタンが表示されます。ボタンをクリックするとOS標準のダイアログが開くので、保存先フォルダとファイル名を確認してから保存します（Figma公式ヘルプ：エクスポート）。フリーランス案件での納品時は「client_logo_2x.png」のようにプロジェクト名・用途・倍率を組み合わせた命名ルールを事前に決めておくと、再書き出しの際に上書き先を迷いません。ショートカットキーでエクスポートモーダルを開くことも可能で、MacはCommand+Shift+E、WindowsはCtrl+Shift+Eです。
CHECK
▶ 今すぐやること: 任意のフレームを選択してExportパネルの「+」をクリックし、PNG設定が追加されたことを確認する（2分）
Q: エクスポートボタンが表示されない場合はどうすれば良いですか？
A： フレームまたはオブジェクトを選択した状態で右サイドバーを確認してください。何も選択されていないとExportパネルのボタンが表示されません。選択後にパネルを下までスクロールするとExportセクションが現れます。
Q： FigmaブラウザとデスクトップアプリでPNG書き出しの手順は異なりますか？
A： 基本的な手順は同じです。ブラウザ版ではOSのダイアログではなくブラウザの保存ダイアログが使われるため、保存先の指定方法が若干異なります。デスクトップアプリの方が保存先を柔軟に指定しやすいです。
透過PNGは「Show in exports」で設定
透過背景の設定は1か所の確認で解決できます。白背景が入ってしまう原因と対処法を順番に解説します。
透過がうまくいかない原因はFillレイヤーにある
FigmaのフレームにFill（塗りつぶし）が設定されていると、書き出し時にその背景色がそのまま出力されます。白い背景が入ってしまう場合、フレームのFillセクションに白や任意の色が設定されていることがほとんどです。まず対象フレームを選択し、右サイドバーのFillセクションを確認します。「Show in exports」のチェックボックスを外すことで書き出し時に背景色が含まれなくなります（Figma公式ヘルプ：エクスポート）。フレーム自体にFillが設定されていない場合は、初めから透過状態で出力されます。
透過PNG書き出しでやらなくてよいこと
フレームを削除してオブジェクト単体にする操作は不要です。フレームを維持したままFillの「Show in exports」チェックを外すだけで透過背景は実現できます。フレームをグループに変換する操作も同様に不要です。多くの人がフレームとグループを混同してグループに変換しようとしますが、設定を変えるだけで対応できます。画像の背景を透過したい場合、まずはFillの設定確認から始めると効率的です。
書き出し後に余白が生じる場合はフレームサイズを確認する
透過背景にしたにもかかわらず、書き出したPNGに想定外の余白が入ることがあります。これはフレームサイズがオブジェクトより大きいことが原因です。フレームを選択してから上部ツールバーの幅・高さを確認し、コンテンツにぴったり合わせる場合はフレームを右クリックして「コンテンツに合わせてサイズ変更」を選ぶと自動調整できます。余白問題の多くはフレームサイズの過剰余白が原因であり、透過設定自体が間違っているわけではありません。
CHECK
▶ 今すぐやること: 対象フレームを選択してFillセクションの「Show in exports」チェックを外し、PNGを書き出して透過を確認する（3分）
Q: SVGでも透過背景で書き出せますか？
A： SVGはベクター形式のため、Figma上でFillがなければ透過状態でそのまま書き出されます。ロゴやアイコンをコードで扱う場合はSVGが適していますが、ピクセル表示が前提の素材ではPNGを選んでください。
Q： PNGで書き出したファイルをPhotoshopで開いたら背景が白になっていました。
A: Photoshop側の設定で「背景を白で塗りつぶす」オプションが有効になっている可能性があります。新規ドキュメントとして開く際は「背景コンテンツ：透明」を選択してください。Figma側の書き出し設定に問題がないかは、ブラウザでPNGを開いて格子柄が表示されるかどうかで確認できます。
PNG倍率は用途で1x・2x・3xを選ぶ
用途を3パターンに分けるだけで、倍率の判断を即座に下せるようになります。
1x・2x・3xの使い分けは出力先で決まる
倍率の考え方は「Figma上の1pxが実際の出力で何pxになるか」です。1xはFigma上のサイズそのまま、2xは2倍、3xは3倍のピクセル数で書き出されます。Webサイト向けの画像素材であれば2xが標準です。これはRetinaディスプレイ（高解像度ディスプレイ）での表示に対応するためで、1xのみ書き出すと高解像度ディスプレイでぼやけて表示される場合があります。印刷物向けの場合は高解像度を確保するために3xを選ぶケースもありますが、最適な設定は印刷会社の指定に従ってください。スマートフォンアプリのアイコン素材では1x・2x・3xの3種類をまとめて書き出すことが多く、後述の複数倍率追加機能が役立ちます。画像圧縮で画質を落とさない方法も書き出し後の工程として覚えておくと納品品質の管理に役立ちます。
複数倍率を一度に書き出す方法
ExportパネルでPNGを追加した後、さらに「+」ボタンをクリックすると同じオブジェクトに対して別の倍率設定を追加できます。たとえば1x・2x・3xをすべて追加しておくと、1回のエクスポート操作で3種類のファイルが同時に書き出されます。ファイル名は自動的に「name@2x.png」「name@3x.png」のようにサフィックスが付与されるため、後から識別する手間もかかりません。フリーランス案件でスマホアプリのアセットを納品する場合、この複数倍率同時書き出しで書き出し作業を大幅に削減できます。
納品前にファイルサイズと解像度を確認する
書き出したPNGのファイルサイズが想定より大きい場合、倍率を下げるか画像圧縮ツールを別途使う判断が必要です。3x書き出しは品質が高い反面、ファイルサイズが1xと比べて大幅に増加します。Webサイトのパフォーマンスを重視する案件では、書き出し後にTinyPNGなどの圧縮サービスを通す方法が現場では主流です。Figmaで2x書き出しした後にTinyPNGで圧縮するフローが、品質とファイルサイズのバランスとして安定しています。
CHECK
▶ 今すぐやること: ExportパネルでPNGを追加し、倍率を「2x」に変更してからエクスポートを実行する（2分）
Q: 印刷物に使う場合は何倍で書き出せばよいですか？
A： 印刷はdpi（dots per inch）で解像度が決まります。Figmaのデザインが72ppiベースで作成されている場合、印刷用の高解像度に近づけるには高い倍率が必要になりますが、最適な設定は印刷会社の指定によって変わります。印刷入稿ではPDFで書き出す方法が適していることも多いため、事前に印刷会社の指定を確認してください。
Q： Figmaのデザインを1920×1080pxで作ったのに、1xで書き出すと小さくなります。
A: Figmaのキャンバスは1x基準で設計されているため、1920×1080のフレームを1xで書き出すと1920×1080pxのPNGが出力されます。サイズが小さく見える場合はフレームサイズ自体を確認し、必要であれば倍率を上げて書き出してください。
PR提供: 日本デザインスクール（デザスク）
書き出し設定を3分で診断
どの設定を選ぶべきか、自分の状況を3つの質問で整理できます。
Q1: 出力するデータの用途はどれですか？
WebサイトやWebアプリ向けならQ2へ進んでください。印刷・印刷入稿向けならResult Cへ、スマートフォンアプリのアセットならResult Dへ進んでください。
Q2: 背景を透明にする必要がありますか？
Yesの場合はResult A、Noの場合はResult Bへ進んでください。
Result A: 透過PNG 2x書き出し
フレームのFill「Show in exports」チェックを外してから2xのPNGでエクスポートします。アイコンやロゴなど背景なしで配置するUI素材に最も適した設定です。
Result B: 不透過PNG 2x書き出し
FillはそのままでPNG 2xを書き出します。画像バナーや背景付きのUIコンポーネントに適しています。WebPに変換することでさらにファイルサイズを削減できます。
Result C: PDF書き出しを検討
印刷入稿の場合、PNGより印刷会社が指定するPDFやEPS形式が適していることが多いです。PNG指定の場合は高い倍率を選択し、印刷会社に最終解像度を確認してください。
Result D: 1x・2x・3xを3種類同時書き出し
スマートフォンアプリのアセットは1x・2x・3xすべてを一度に書き出します。ExportパネルでPNG設定を3行追加し、各行の倍率を1x・2x・3xにそれぞれ変更してエクスポートします。
CHECK
▶ 今すぐやること: 診断結果に対応する倍率をExportパネルで設定してエクスポートを実行する（3分）
Q: WebPで書き出せますか？
A： 2025年時点のFigmaのExportパネルでは、PNG・JPG・SVG・PDFが選択肢として用意されています。WebP直接書き出しは標準機能では対応していないため、PNGで書き出した後にオンラインコンバーターやImageMagickで変換する方法が現場では一般的です。
Q： 自分のFigmaのバージョンで診断結果の手順が異なる場合は？
A： FigmaはWebアプリのため、自動的に最新バージョンが適用されます。UIが変更されている場合はFigma公式ヘルプで最新の操作手順を確認してください。
複数PNG一括書き出しは5手順で完了
複数のフレームやオブジェクトをまとめて書き出す際、1枚ずつ繰り返す操作をShiftキーとショートカットに切り替えることで作業時間を大幅に短縮できます。
Shiftキーで複数フレームを同時選択する
キャンバス上でShiftキーを押しながら書き出したいフレームを順番にクリックします。左サイドバーのレイヤーパネルでも同様にShiftクリックで複数選択できます。選択後、右サイドバーのExportパネルに「+」を追加すると、選択した全フレームに共通のエクスポート設定が適用されます。この方法で複数のフレームに一括して2x・PNG設定を追加し、1回のエクスポート操作でまとめて書き出せます（Figma公式ヘルプ：エクスポート）。
ショートカットでエクスポートモーダルを開く方法
複数フレームを選択した状態でMacはCommand+Shift+E、WindowsはCtrl+Shift+Eを入力するとエクスポートモーダルが開きます。選択中の全フレームが一覧表示され、個別のチェックボックスで書き出す対象を取捨選択できます。一括書き出し時でも特定のフレームだけ除外したい場合に便利な機能です。フリーランス案件で「このスクリーンだけ今回は不要」という微調整にも対応できます。作業効率を上げるには、このようなショートカットの積み重ねが月単位で大きな差を生みます。
書き出しファイル名のルールを事前に決める
一括書き出しでは、フレーム名がそのままファイル名になります。Figmaのレイヤーパネルでフレーム名を整理しておくことが、書き出し後のファイル管理で大きな差を生みます。「section/component_状態_倍率」という形式（例: header/logo_default_2x）を命名ルールとして採用するのが実務では安定しています。再書き出し時に上書き対象のファイルが即座に特定でき、クライアントへの納品時にもファイル名から内容が把握しやすくなります。
CHECK
▶ 今すぐやること: Shiftキーで書き出したいフレームを2つ以上選択し、ExportパネルにPNG 2xを追加してエクスポートを実行する（5分）
Q: 選択していないフレームも書き出しに含まれてしまいます。
A: エクスポートモーダル（Command+Shift+E / Ctrl+Shift+E）を開くと、既にExportパネルに設定が追加されているフレームが全件一覧に表示されます。選択外のフレームにもExport設定が残っている場合は、そのフレームのExportパネルから設定を削除するかチェックボックスで除外してください。
Q： ページをまたいでフレームを一括書き出しできますか？
A： Figmaの標準機能では、書き出しは現在開いているページの選択オブジェクトが対象です。複数ページをまたいだ一括書き出しは、各ページに移動して個別に実行する必要があります。
PNG書き出しは5つの仕組みで効率化
FigmaのPNG書き出しで時間がかかっている原因の多くは、毎回同じ設定を手動で行っていることと、形式の使い分けを迷うことです。以下の5つの仕組みを導入することで、書き出し作業の効率を大幅に向上できます。
ポイント1: フレーム命名ルールで書き出し後のファイル整理を自動化
【対象】: フリーランス案件で複数クライアントのFigmaファイルを管理している方
【手順】: Figmaのレイヤーパネルで全フレーム名を「プロジェクト名_用途_状態」の形式に統一します（例: lp_hero_default）（所要時間：初回設定10分）。書き出し時の倍率を「2x」に固定する運用ルールをメモに残します。エクスポート後は同一フォルダに保存し、フォルダ名でプロジェクトを識別します。
【コツと理由】: 「書き出し後のファイル名がそのままフレーム名になる」ため、デザインとファイル管理を同時に設計する意識が必要です。命名ルールを先に決めることで、納品直前に「このPNGはどの画面のものか」という確認作業が減ります。
【注意点】: フレーム名にスペースや日本語を使う必要はありません。スペースはファイル名では「%20」に変換されるなど扱いにくくなる場合があり、アルファベットとアンダースコアだけで命名するのが最も安全です。
ポイント2: ExportプリセットをComponents化して再利用
【対象】: 同じ倍率設定を繰り返し使うWebデザインを担当しているフリーランスの方
【手順】: 書き出し設定を頻繁に使うフレームをコンポーネント化します（所要時間：5分）。コンポーネントにExport設定（PNG 2x）を追加しておくと、そのコンポーネントを複製するだけで書き出し設定が引き継がれます。新規フレームへの設定追加が不要になるため、繰り返し案件のセットアップ時間が短縮されます。
【コツと理由】: 「コンポーネントにExport設定を埋め込んで複製する」アプローチを取ることで、設定追加の手間を最初のセットアップだけに圧縮できます。
【注意点】: コンポーネントのExport設定はインスタンス側でも編集できますが、マスターコンポーネントを更新すると全インスタンスの設定が上書きされます。インスタンスごとに倍率を変えたい場合は、インスタンスでデタッチ（切り離し）してから変更してください。デタッチ後はマスターの更新が反映されなくなる点も意識が必要です。
ポイント3: 透過PNG書き出しチェックを3項目で完結させる
【対象】: 透過PNGの設定ミスで再書き出しを繰り返している方
【手順】: 書き出し前に3項目を順番に確認します（所要時間：1分）。第1に対象フレームのFillセクションを開き、「Show in exports」チェックが外れているか確認します。第2にフレームサイズが余白なしでコンテンツにぴったり合っているか確認します。第3にExportパネルの形式がPNGになっているか確認します（JPGは透過非対応のため）。
【コツと理由】: 実務では「フレームサイズの余白」「形式の誤選択（JPG）」も透過ミスの原因になります。3項目のチェックを習慣化することで、透過PNG関連の再書き出しを大幅に減らせます。画像モザイク加工など他のビジュアル処理と同様、前処理の確認を習慣化することがミス防止の鍵です。
【注意点】: JPGは仕様上、透過を扱えません。「JPGで書き出してるのに透過にならない」という場合は形式の誤選択が原因のため、透過が必要な場合は必ずPNGを選択してください。
ポイント4: ショートカットで書き出し作業を毎回15秒短縮
【対象】: 1日に10回以上書き出し作業を行うデザイン業務の多いフリーランスの方
【手順】: MacはCommand+Shift+E、WindowsはCtrl+Shift+Eを覚えます（所要時間：1分）。フレームを選択した状態でショートカットを入力するとエクスポートモーダルが直接開きます。ExportパネルをスクロールしてExportボタンを探す手順が省けるため、1回の書き出しあたり約15秒短縮できます。
【コツと理由】: 1日10回の書き出しでショートカットに切り替えると、積み重なることで無視できない時間の節約になります。
【注意点】: ショートカットはFigmaのUI更新で変更されることがあります。効かないと感じたら、Figmaのメニューバーから「Help」→「Keyboard Shortcuts」で現在のショートカット一覧を確認してください。
ポイント5: PNG・JPG・SVG・PDFの使い分けを4条件で即判断
【対象】: 書き出し形式の選択で迷い、クライアントや実装担当者への確認が都度必要な方
【手順】: 4条件で形式を選びます（所要時間：30秒）。透過が必要なピクセル素材ならPNG、写真・グラデーションで透過不要ならJPG、アイコン・ロゴなどコードで扱うベクター素材ならSVG、レイアウト全体・印刷入稿ならPDFを選択します。画像フリーアイコン選びの基準と同様、形式の目的を明確にすることで迷いがなくなります。
【コツと理由】: SVGの方が適しているアイコン素材をPNGで納品するとファイルサイズが大きくなり、Webパフォーマンスに影響する場合があります。4条件を事前に決めておくことで、案件ごとに形式を迷う時間がなくなり、実装担当者からの差し戻しも減ります。
【注意点】: SVGはブラウザで表示するテキストやフォント埋め込みに制限がある場合があります。テキストを含むデザインをSVGで書き出す際は、テキストをアウトライン化してからエクスポートするか、PNGに切り替えてください。
CHECK
▶ 今すぐやること: 今の案件で使う書き出し形式と倍率をポイント5の4条件で確認し、ExportパネルにPNG 2xを設定してエクスポートを実行する（5分）
Q: フレームの書き出し設定を保存しておく機能はありますか？
A： Figmaには書き出しプリセットを保存する専用機能は現時点では搭載されていません。ただしコンポーネントにExport設定を埋め込む方法（ポイント2）で実質的に設定を再利用できます。
Q： 書き出したPNGをFigmaに再インポートすることはできますか？
A： できます。メニューバーの「File」→「Place image」またはキャンバスへのドラッグ&ドロップで画像をFigmaに取り込めます。書き出した素材をそのまま別のFigmaファイルで再利用する場合に活用してください。
Figma PNG書き出しを習得する：3ステップと5つのポイントのまとめ
FigmaのPNG書き出しは、対象選択・Exportパネルへの追加・エクスポート実行の3ステップが基本です。透過が必要な場合はFillの「Show in exports」チェックを外し、Web素材なら2x・アプリアセットなら1x/2x/3x同時書き出しを選ぶことで、納品に通用するPNGを迷いなく出力できます。フリーランスとして案件を重ねるほど、フレーム命名ルールとショートカットの組み合わせが作業効率に大きく効いてきます。
設定ミスによる再書き出しは時間と信頼の両方を消耗します。本記事の3ステップと透過チェックを体で覚えてしまえば、以降は迷いなく作業を進められます。
| 状況 | 次の一歩 | 所要時間 |
| 初めて書き出す | 任意フレームを選んでPNG 1xでエクスポートを試す | 2分 |
| 透過PNGが必要 | FillのShow in exportsを外して再エクスポート | 3分 |
| Web向け高解像度が必要 | ExportパネルでPNG 2xに変更してエクスポート | 2分 |
| 複数フレームをまとめて出力 | Shiftで複数選択してCommand+Shift+Eで書き出し | 5分 |
| 形式選択に迷っている | ポイント5の4条件で30秒以内に判断 | 30秒 |
Figma PNG書き出しに関するよくある質問
Q: Figmaで書き出したPNGが粗く見えます。原因は何ですか？
A： 倍率が1xになっている可能性があります。WebサイトやRetina対応が必要な場合は2xを選択してください。また、フレームサイズが元々小さい場合は2x書き出しでも実寸が小さくなるため、デザイン時のフレームサイズ自体を見直してください。
Q： 書き出したPNGのファイルサイズを小さくしたいです。
A: TinyPNGやSquooshなどの無料圧縮ツールを書き出し後に使う方法が最も手軽です。Figma側でできることとしては、不必要に大きな倍率を下げること、または書き出し対象を最小限のフレームサイズに収めることで対応できます。
Q： Figma無料プランでもPNG書き出しは使えますか？
A： 基本的なPNG書き出し機能は無料プランでも利用できます。プランによって機能制限が変わることがあるため、最新のプラン比較はFigma公式サイトでご確認ください。
【出典・参照元】
Figmaからのエクスポート – Figma公式ヘルプ – エクスポートの基本手順・透過設定・一括書き出しの公式情報
Figmaのエクスポート機能解説 – note – PNG/JPG/SVG/PDFの書き出し方法と倍率設定の解説
Figma書き出しの疑問解決ガイド – フレーム選択と一括書き出しの実務解説
Figma入門：書き出し・エクスポートの設定方法 – 右サイドバーでの書き出し設定フローの解説