【Figma入門⑦】画像の書き出し・エクスポートの設定方法を解説

Figmaのエクスポート機能について解説します。
Figmaで作ったデザインの書き出し、Figmaで制作されたデザインから画像素材を書き出せるようになりましょう。

• エクスポート（画像書き出し）の基本
• 1. 書き出すものを選ぶ
• 2. 書き出し設定をする
• 3. 書き出し実行
• 画像素材の書き出し方法
• 画像を個別に書き出す
• 複数素材をまとめて書き出し
• スライスツールもある、が…

エクスポート（画像書き出し）の基本

Figmaでデザインからの画像書き出し（エクスポート）には、大きく2つの目的があります。

• デザイン（フレーム）を1つの画像として書き出す
• デザイン内で使われている画像を個別に書き出す

デザイン全体を画像として書き出すのは、Webデザインだと完成図を出したい時。
Figmaを使ってアイキャッチやサムネイルを作っている場合も、こちらの方法を使うことが多いでしょう。

もう一つは、デザイン・フレーム内にあるオブジェクトを、個別に画像として書き出す方法。
コーディングに使う画像が欲しい、とか、自作したアイコンセットをそれぞれSVGにしたい、などの場面で使います。

画像の書き出しに使うエクスポートの設定方法は、どちらも同じです。まずはエクスポートの基本について、全体を1つの画像として書き出す方法で見ていきましょう。

1. 書き出すものを選ぶ

Figmaで画像を書き出す際には、書き出したいレイヤーやグループ、フレームを選択する必要があります。

デザイン全体を囲う、アートボード的な役割のフレームを選択してみましょう。
今回だとtop_pcと名前をつけたフレームです。

右サイドバーの下部にあるエクスポートをクリック。
エクスポートの設定が追加されます。

2. 書き出し設定をする

右サイドバー、エクスポートの部分で画像の書き出し設定を行います。

書き出しサイズ

書き出しサイズの単位は以下のようになっています。

• ｘ：倍率で指定（2xなら2倍サイズ）
• ｗ：指定した横幅に合わせたサイズで書き出す
• ｈ：指定した高さに合わせたサイズで書き出す

サフィックス

サフィックスの欄に入力した文字は、ファイル名の最後尾・拡張子の前に入ります。
その画像の拡大縮小率を示すために、2倍なら「@2x」、0.5倍なら「@3x」と入れたりします。
設定は任意なので、必要なければ空のままでも構いません。

ファイル形式

Figma単体では以下4種類から選ぶことが出来ます。

• PNG（可逆圧縮・透明部分をそのまま書き出せる）
• JPG（非可逆圧縮でファイル容量が軽め）
• SVG（拡大縮小しても劣化しないベクター形式）
• PDF（印刷に向いた電子文書ファイル形式）

写真などの画像はJPGかPNG、ロゴやアイコンなどベクターイラストはSVGを使って書き出すことが多いです。Webデザインの場合、PDFはあまり使いません。

その他

詳細設定は、基本的にデフォルトのままでOKです。
設定可能な項目・役割はFigma公式サイトでも説明されていますので、気になる方は下記ページをご確認下さい。

右サイドバーの一番下にある▶ プレビューをクリックして展開すると、書き出す画像の確認ができます。

3. 書き出し実行

右サイドバーにある、〇〇をエクスポートのボタンを押すと画像が書き出されます。
Web版のFigmaでは、自動でファイルのダウンロードが開始します。

画像素材の書き出し方法

デザインの中の一部を画像として書き出したい場合は、その対象を選択し、個別にエクスポートの設定を行います。

画像を個別に書き出す

背景・塗りに設定した画像

例えば、ファーストビューの背景画像を書き出したい場合。塗りに画像が設定されている長方形シェイプを選択して、右サイドバーからエクスポート設定を追加します。

上の階層、firstviewフレームを選択した場合は、フレーム内にあるテキストなども全て1つの画像として書き出されます。背景画像を書き出したい時には、文字は余計ですね。
プレビューを見ると、backgroundを選択したときとの違いが分かりやすいです。

このままエクスポートボタンを押せば、画像の書き出しが行われます。

他にも書き出したい画像があれば、まとめて書き出すことも可能。
その場合もエクスポートの設定は必要なので、エクスポート欄に最低一つは設定を入れておきましょう。

複数オブジェクトで出来た画像

いくつかのアイテムを組み合わせて1つの画像としたい場合。
例えば、下図のロゴ+サイト名を1つの画像として書き出したいときは、グループ（もしくはフレーム、セクション）を選択してエクスポートの設定を行います。

レイヤーを複数選択しただけの状態でエクスポート設定を行うと、レイヤーごとにそれぞれ画像として書き出されます。

グループ、セクション、フレーム、どれでも良いので、まとめてからエクスポートの設定を行って下さい。

複数素材をまとめて書き出し

画像を複数選択して、エクスポート設定をまとめて行う・書き出しをまとめて行うことも出来ます。

一括で複数画像のエクスポート設定をする

書き出す画像を複数選択するときに便利なのが“ダイレクト選択”。
ダイレクト選択を使うと、フレームやグループ内にあるオブジェクトを直接選択することが出来ます。CtrlもしくはCommandキーを押しながらクリックすればダイレクト選択になりますよ。

複数選択+ダイレクト選択する場合は以下のようになります。

• Windows :Ctrl + Shift + クリック
• Mac OS :⌘ + Shift + クリック

複数選択した状態で、右サイドバーからエクスポートを追加してみましょう。
一括設定の場合は、書き出しボタンがレイヤー数の表記になります。

「5レイヤーをエクスポート」をクリックすると、画像が5枚書き出されます。

まとめて書き出し

エクスポートの設定があれば、エクスポート画面からまとめて書き出すことも出来ます。

最初と同じく全体を囲うフレーム（top_pc）を選択し、エクスポート画面を開きます。
メインメニュー > ファイル > エクスポート、もしくは以下のショートカットキーで開きます。

• Windows : Ctrl + Shift + E
• Mac OS : ⌘ + Shift + E

　　↓

エクスポートの設定をされているものが一覧で表示されます。
書き出したいものにだけチェックを入れましょう。

右上のエクスポートボタンで書き出します。
ダウンロードファイルを解凍すると、選択した画像がすべて入っています。

スライスツールもある、が…

Figmaにはスライスツールもあります。

スライスツールは、囲った範囲内を1つの画像として書き出せる、というもの。
こちらもエクスポートの設定追加は必要です。

書き出しには使えるのですが、これで全部の画像を囲っていくのは大変。
使用することはほとんどないので、「そう言えば、あったなぁ……」くらいの認識で大丈夫です。