エクスポート（画像書き出し）の基本
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つの画像として書き出したいときは、グループ（もしくはフレーム、セクション）を選択してエクスポートの設定を行います。
レイヤーを複数選択した状態でエクスポート設定を行うと、レイヤーごとにそれぞれ画像として書き出されます。
1つの画像として書き出したいものは、1つにまとめてからエクスポートの設定を行って下さい。
複数素材をまとめて書き出す方法
画像を複数選択して、エクスポート設定をまとめて行う・書き出しをまとめて行うことも出来ます。
一括で複数画像のエクスポート設定をする
複数のレイヤーを選択した状態でエクスポート設定を行うと、まとめて書き出しの準備ができます。
ただ、フレームの中などにある画像を、階層を掘り下げて探すのは大変ですよね。 そこで、役立つのがダイレクト選択です。 ダイレクト選択を使うと、フレームやグループ内にあるオブジェクトを直接選択することが出来ます。
CtrlもしくはCommandキーを押しながらクリックすればダイレクト選択になります。
複数選択+ダイレクト選択する場合は以下の方法です。
- Windows :Ctrl + Shift + クリック
- Mac OS :⌘ + Shift + クリック
複数選択した状態で、右サイドバーからエクスポートを追加してみましょう。 一括設定の場合は、書き出しボタンがレイヤー数の表記になります。
「5レイヤーをエクスポート」をクリックすると、画像が5枚書き出されます。
まとめて書き出し
エクスポートの設定があれば、エクスポート画面からまとめて書き出すことも出来ます。
最初と同じく全体を囲うフレーム（top_pc）を選択し、エクスポート画面を開きます。
メインメニュー > ファイル > エクスポート、もしくは以下のショートカットキーで開きます。
- Windows : Ctrl + Shift + E
- Mac OS : ⌘ + Shift + E
↓
エクスポートの設定をされているものが一覧で表示されます。 書き出したいものにだけチェックを入れましょう。
右上のエクスポートボタンで書き出します。 ダウンロードファイルを解凍すると、選択した画像がすべて入っています。
スライスツールもある、が…
Figmaにはスライスツールもあります。
スライスツールは、囲った範囲内を1つの画像として書き出せる、というもの。 こちらもエクスポートの設定追加は必要です。
書き出しには使えるのですが、これで全部の画像を囲っていくのは大変。 使用することはほとんどないので、「そう言えば、あったなぁ……」くらいの認識で大丈夫です。