Figmaから書き出した画像が想定より粗いとき、倍率の指定を見落としていることが多い。
倍率は形式ごとに使える範囲が違い、書き出したあとの扱いも変わる。
ここでは、2倍で書き出す手順と、倍率がどう解釈されるかを整理する。
内容は2026年9月20日にFigmaのヘルプセンターの記載を確認したものである。
2倍で書き出す手順
書き出しの設定は、右サイドバーのエクスポートセクションで作る。
- 書き出したいレイヤーやフレームを選ぶ
- エクスポートセクションのプラスをクリックして設定を1つ追加する
- スケールの欄で2倍を選ぶか、2xと入力する
- 形式を選ぶ
- エクスポートをクリックする
1つの選択範囲に、必要な数だけ設定を追加できる。
1倍と2倍を同時に登録しておけば、1回の操作で両方を書き出せる。
ページ全体を書き出す場合は、キャンバス上の選択をすべて解除してから設定を追加する。
エクスポートセクションが出ないとき
セクション自体が見当たらない場合、権限か表示位置の問題が考えられる。
| 状況 | エクスポートの場所 |
|---|---|
| 編集可の権限がある | 右サイドバーの下部 |
| 閲覧のみの権限 | 右サイドバーのエクスポートタブ |
| 開発モードを使っている | オブジェクトを選んだときだけ右サイドバーに出る |
それでも出てこない場合は、ページの更新を試す。
更新しても変わらないときは、ファイルの所有者が閲覧者によるコピーと書き出しを制限している可能性がある。
倍率・固定幅・固定高さの書き分け
スケールの欄には、数値のうしろに付ける文字で3通りの指定ができる。
| 書き方 | 意味 | 例 |
|---|---|---|
| 数値のうしろにx | 倍率として使う | 2x |
| 数値のうしろにw | 幅を固定する | 512w |
| 数値のうしろにh | 高さを固定する | 512h |
倍率で指定すると元のサイズに比例し、固定幅や固定高さで指定すると元のサイズに関係なく出力の寸法が決まる。
同じ大きさで書き出したいアイコンが複数あるときは、倍率ではなく固定幅のほうが揃えやすい。
書き出したDPIの決まり方
Figmaから画像として書き出したアセットは、DPIが72を基準にしている。
書き出したDPIは、選んだ倍率に72を掛けて求められると案内されている。
| 倍率 | DPI |
|---|---|
| 1倍 | 72 |
| 2倍 | 144 |
| 3倍 | 216 |
高密度の画面向けに用意する場合は、倍率を上げて書き出すことが勧められている。
2倍で書き出した画像を読み込むと半分になる
2倍で書き出した画像をFigmaへ読み込み直すと、表示サイズが大きくならないことがある。
これはDPIが144の画像を高密度画面向けとみなし、自動的に半分に縮めて適用する動きによる。
書き出しに失敗したわけではないので、書き出し設定を変えても解決しない。
元の大きさで扱いたい場合は、読み込んだあとにサイズを指定し直す。
形式によって倍率が使えない場合がある
倍率はすべての形式で自由に選べるわけではない。
| 形式 | 倍率の指定 | 向いている用途 |
|---|---|---|
| PNG | できる | 透明が要るもの、文字が入る図 |
| JPG | できる | 写真、Webでの読み込みを軽くしたいとき |
| SVG | 等倍のみ | ロゴやアイコン。表示側で拡大する |
| 等倍のみ | 固定レイアウトの共有、iOS向けのアセット |
SVGは数値と座標で図形を持つため、画質を保ったまま表示側で大きさを変えられる。
そのため書き出しの段階で倍率を指定する必要がない。
PDFで別の倍率が必要な場合は、形式そのものを変える必要がある。
ファイル名を倍率ごとに分ける
同じレイヤーから1倍と2倍を書き出すと、ファイル名が重なる。
サフィックスの欄に文字を入れると、書き出したファイル名の末尾に付く。
倍率ごとに設定を追加し、それぞれにサフィックスを入れておくと、レイヤー名を変えずに区別できる。
なお、レイヤー名にスラッシュを使っている場合、その区切りに合わせた入れ子のフォルダーに分けて書き出される。
書き出す前に確かめておくこと
- スケールの欄が、意図した倍率または固定寸法になっているか
- 形式が倍率を扱えるものか(SVGとPDFは等倍のみ)
- 同じ選択範囲に、必要な倍率の設定がすべて並んでいるか
- サフィックスを入れて、書き出したファイルを区別できるか
- プレビューで、狙った範囲が入っているか
複数のオブジェクトを選んでいるときは、プレビューの設定が出てこない。
1つだけ選んだ状態で確かめてから、まとめて書き出すほうが確認しやすい。
まとめ
- 2倍にするには、スケールの欄で2倍を選ぶか2xと入力する
- 数値のうしろにxで倍率、wで幅の固定、hで高さの固定になる
- 書き出したDPIは、倍率に72を掛けた値になる
- 2倍の画像を読み込み直すと、高密度画面向けとみなされて半分に縮む
- SVGとPDFは等倍のみで、倍率を指定できない
この記事は2026年9月20日時点のヘルプセンターの記載に基づいている。
設定の一覧はFigma公式ヘルプのエクスポート形式および設定にまとまっている。
Figmaの操作はFigmaメソッドのまとめにも置いている。
