FigmaからPNG・JPGを2倍の寸法で書き出すには、対象のレイヤーやフレームを選び、Exportのスケールに 2x を指定します。幅300px・高さ200pxの範囲なら、計算上の出力寸法は600×400pxです。
表示したい大きさと、書き出す画像のピクセル数を分けて考えると倍率を選びやすくなります。この記事は2026年10月3日に確認したFigma公式の書き出し仕様に基づいています。
PNG・JPGを2倍で書き出す手順
- 書き出したいレイヤー、フレーム、コンポーネントなどを選びます。
- 右サイドバーのExportセクションで
＋を押します。 - 形式をPNGまたはJPGにします。
- スケールを
2xに設定します。 - 対象を1つ選んだ状態でPreviewを確認し、Exportを押します。
1つの選択範囲に複数の書き出し設定を追加できます。1xと2xの両方が必要なら行を追加し、ファイル名の末尾に @1x、@2x などを指定して区別します。Figma公式：書き出しの操作
Exportが見つからない場合
| ファイルの状態 | 確認する場所・条件 |
|---|---|
| 編集権限があるDesign Mode | 右サイドバーの下部 |
| 閲覧権限のDesign Mode | 右サイドバーのPropertiesタブ |
| Dev Mode | オブジェクトを選択した状態の右サイドバー |
| 閲覧できるのに書き出せない | 所有者がコピー・書き出しを制限していないか |
表示されない場合は再読み込みも試します。ページ全体のキャンバスを書き出す場合は選択を解除して設定を追加します。特定の範囲だけが必要なら、フレームを選ぶか、編集権限がある場合はSliceを使います。
2x・固定幅w・固定高さhの違い
スケール欄では、倍率のほかに出力する幅または高さを指定できます。以下は元の範囲が300×200pxの場合の寸法計算です。
| 指定 | 意味 | 計算上の出力寸法 |
|---|---|---|
1x | 元の寸法と同じ | 300×200px |
2x | 幅と高さをそれぞれ2倍 | 600×400px |
3x | 幅と高さをそれぞれ3倍 | 900×600px |
900w | 幅を900pxに固定 | 900×600px |
400h | 高さを400pxに固定 | 600×400px |
w と h はもう一方の寸法を縦横比に従って調整します。書き出し範囲に端数やエフェクトがある場合は、出力ファイルの寸法も確認してください。Figma公式：スケールの指定
2xは幅と高さが2倍なので、ピクセルの総数は4倍になります。ファイル容量が必ず4倍になるとは限りません。容量は内容・形式・圧縮にも左右されます。
2xを選ぶ用途と画像が粗い場合の確認
幅300pxで表示する画像に600px幅の画像を用意する、といった高密度画面向けの用途では2xが候補になります。納品仕様にピクセル寸法の指定がある場合は、その寸法から倍率や固定幅を決めます。
元の写真や画像が小さい場合、書き出し倍率を上げても元に存在しない細部が復元されるわけではありません。粗い画像では、書き出し倍率、元画像の解像度、配置した画像の拡大率、表示先の寸法を順に確認します。
DPIとピクセル寸法を区別する
Figma公式では、画像書き出しのDPIは72を基準とし、倍率を掛けた値になると説明しています。1xは72、2xは144、3xは216です。
Webで幅300pxの画像を表示する場面では、まず出力画像のピクセル寸法と表示寸法を確認します。DPIの数字だけでは、実際の画面で必要なピクセル数は決まりません。
2xで書き出した画像をFigmaへ再度取り込んでも、見た目の大きさが2倍にならない場合があります。公式資料では、144DPIの画像を高密度画面用として扱い、半分に縮小して配置すると案内しています。出力の失敗と判断する前に、画像ファイル自体のピクセル寸法を確認してください。
SVG・PDFで2xを指定できない理由
| 形式 | Figmaの書き出し倍率 | 選ぶ場面 |
|---|---|---|
| PNG | 倍率・固定寸法を指定 | 透過や文字を含む画像 |
| JPG | 倍率・固定寸法を指定 | 写真などの画像 |
| SVG | 1xのみ | ベクターのロゴ・アイコン |
| 1xのみ | レイアウトの共有 |
SVGは表示側で幅や高さを変えられるベクター形式です。ただし内部に画像を含む場合は、画像部分の解像度も確認します。SVGの文字や線の扱いは、SVG書き出しの設定記事で説明しています。
PDFを別の倍率で画像化する必要がある場合は、PNG・JPGなどの形式を選び直します。編集可能なFigmaデータを渡したい場合は、画像の書き出しと .fig の保存を区別してください。.figファイルの読み込み方
一括書き出しの名前と範囲を確認する
複数の素材はレイヤー名とサフィックスで区別します。同じ名前が重なる場合は、名前を分けた上で出力結果を確認してください。レイヤー名に / を含めると、フォルダー階層として書き出されます。
Previewは複数オブジェクトを選択していると表示されません。1つずつ対象範囲を確認し、必要な倍率の行があることを確かめてからまとめて書き出します。画像の色味や重なりが異なる場合は、公式資料のカラープロファイルとIgnore overlapping layersの設定も確認してください。
よくある質問：Figmaの2倍書き出しで迷ったときのチェックリスト
Figmaで画像を2倍の寸法で書き出すには？
対象のレイヤーやフレームを選び、右サイドバーのExportセクションで＋を押して、形式をPNGまたはJPGにし、スケールを2xに設定します。幅300px・高さ200pxの範囲なら、計算上の出力寸法は600×400pxです。
1xと2xの両方を書き出すには？
1つの選択範囲に、複数の書き出し設定を追加できます。行を追加し、ファイル名の末尾に@1x、@2xなどを指定して区別します。
2xと、900wのような指定は、何が違いますか？
2xは幅と高さをそれぞれ2倍にします。900wは幅を900pxに固定し、400hは高さを400pxに固定します。wとhは、もう一方の寸法を縦横比に従って調整します。
Exportが見つからないときは？
ファイルの状態によって、確認する場所が異なります。編集権限があるDesign Modeでは右サイドバーの下部、閲覧権限のDesign Modeでは右サイドバーのPropertiesタブです。閲覧できるのに書き出せない場合は、所有者がコピー・書き出しを制限していないか確認します。
SVGやPDFで、2xを指定できないのは、なぜですか？
記事の表では、SVGとPDFの書き出し倍率は、1xのみと説明しています。PNGとJPGは、倍率・固定寸法を指定できます。
書き出した画像が粗いときは、どうしますか？
書き出し倍率、元画像の解像度、配置した画像の拡大率、表示先の寸法を、順に確認します。元の写真や画像が小さい場合、書き出し倍率を上げても、元に存在しない細部が復元されるわけではありません。