Figmaで画像を書き出す方法
Figmaはブラウザベースのデザインツールです。
現在のWeb制作では、デザインデータをFigmaで共有されるケースが一般的になっています。
その中で「デザインの一部を画像として書き出したい」という場面は多くあります。
この記事では、Figma内の画像を個別に書き出す方法を初心者向けにわかりやすく解説します。
Figmaで画像を書き出す基本手順
Figmaで画像を書き出す手順は非常にシンプルです。
- 書き出したいレイヤーまたはフレームを選択
- 右側パネルの「Export（書き出し）」を確認
- ファイル形式を選択（PNG / JPG / SVG / PDF）
- 「Export」ボタンをクリック
これだけで画像を書き出すことができます。
ポイント
- フレーム単位で書き出すとレイアウトが崩れにくい
- レイヤー単体だと余白や位置がズレることがある
書き出し形式の違い
Figmaでは複数の形式で画像を書き出すことができます。用途に応じて使い分けましょう。
PNG
- 高画質で書き出し可能
- 背景透過に対応
- UIデザインや素材に最適
JPG
- ファイルサイズが軽い
- 写真や背景画像向き
- 透過は不可
SVG
- ベクター形式
- 拡大しても劣化しない
- ロゴやアイコンに最適
- 資料や印刷用途向け
Web用途なら基本は「PNG」、軽量化したい場合は「JPG」がおすすめです。
倍率（1x / 2x / 3x）について
Export設定では倍率を選択できます。
- 1x：通常サイズ
- 2x：高解像度（Retina対応）
- 3x：さらに高精細
どれを選べばいい？
- Web素材 → 2xがおすすめ
- スマホUI → 2x〜3x
- 軽さ重視 → 1x
画像がぼやける場合は、倍率を上げることで改善できます。
複数画像をまとめて書き出す方法
複数の画像を一括で書き出すことも可能です。
- 複数のレイヤーを選択（Shift + クリック）
- Export設定を追加
- 一括でExport
UIパーツやバナーをまとめて書き出す際に便利です。
画像がうまく書き出せないときの対処法
うまく書き出せない場合は、以下を確認してください。
Exportが表示されない
→ レイヤーまたはフレームが選択されていない可能性があります
画像がぼやける
→ 倍率（1x）になっている可能性があります → 2x以上に変更
余白がついてしまう
→ フレームで囲っていない場合に起きやすいです
まとめ
Figmaの画像書き出しは、Export機能を使えば簡単に行えます。 用途に応じて形式（PNG / JPG / SVG）や倍率（1x / 2x）を使い分けることで、最適なデータを書き出すことができます。