目次
Figmaで作成したデザインを「画像として保存したいけどやり方が分からない…」と悩んでいませんか？
この記事では、Figmaの画像書き出し方法を初心者でも分かるように徹底解説します。
- 基本の手順
- 失敗しないためのチェックポイント
- 画像形式の違い
- 書き出しできない時の対処法
この記事を読めば、誰でも迷わず画像を書き出せるようになります。
Figmaの画像書き出しとは？
Figmaの画像書き出しとは、作成したデザインをPNGやJPGなどの画像形式に変換して保存することです。
画像にすることで、以下のメリットがあります。
- 誰でも同じ見た目で確認できる
- クライアントやチームに共有しやすい
- Webや資料にそのまま使える
デザイン完成後には必須の作業です。
Figmaで画像を書き出す基本手順【3ステップ】
① フレームまたはレイヤーを選択する
書き出したい範囲をクリックして選択します。
選択ミスが最も多い失敗原因なので要注意です。
② Export設定を追加する
右側パネルの「Export」から「＋」をクリックします。
ここで以下を設定します。
- 形式（PNG / JPG / SVG / PDF）
- サイズ（1x / 2x / 3x）
③ Exportボタンをクリックする
「Export」を押せば画像が保存されます。
通常はダウンロードフォルダに保存されます。
画像書き出し前に確認すべき4つのポイント
✔ 正しいフレームが選択されているか
間違った範囲を選択すると、意図しない画像が出力されます。
✔ 不要なレイヤーが表示されていないか
ガイドやメモがそのまま書き出されるケースが多いです。
✔ サイズ・倍率が適切か
小さいと画質が荒くなり、大きすぎると容量が重くなります。
✔ 書き出し形式が適切か
用途に応じて形式を選びましょう。
書き出し形式（PNG・JPG・SVG・PDF）の違い
PNG（おすすめ）
- 高画質
- 背景透過が可能
→ ロゴやUIデザインに最適
JPG
- ファイルサイズが軽い
- 写真向き
→ サムネイルや背景画像におすすめ
SVG
- 拡大しても劣化しない
→ アイコンやWeb制作向け
- 印刷や資料に最適
→ 提案資料・共有用に便利
画像サイズ・解像度の最適設定
- 1x：そのままサイズ
- 2x：高画質（推奨）
- 3x：さらに高精細
スマホやWeb用なら「2x」が最適です。
※注意
- 大きすぎる → 重い
- 小さすぎる → 画質が荒い
Figmaで画像を書き出しできない時の原因と対処法
原因①：何も選択していない
→ フレームをクリックすれば解決
原因②：Export設定がない
→ 「＋」を押して追加する
原因③：Figmaの不具合
→ 再読み込み or アプリ版を使う
原因④：ネット接続が不安定
→ 安定した回線で作業する
複数の画像を一括で書き出す方法
- Shiftキーで複数選択
- Export設定を追加
- 一括でExport
大量の画像を書き出す時に必須のテクニックです。
よくある質問
背景を透明にしたい
→ PNG形式＋背景を非表示にする
画質が荒い
→ 2x以上で書き出す
スマホ用のサイズは？
→ 750px / 1125pxなど（2x基準）
保存先はどこ？
→ ダウンロードフォルダ
まとめ
Figmaの画像書き出しは、以下の3ステップで簡単に行えます。
- 選択
- 設定
- 書き出し
そして最も重要なのは、用途に応じて形式とサイズを選ぶことです。
このポイントを押さえれば、誰でも高品質な画像を書き出せるようになります。
コメント