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つの画像として書き出したいときは、グループ（もしくはフレーム、セクション）を選択してエクスポートの設定を行います。

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

1つの画像として書き出したいものは、1つにまとめてからエクスポートの設定を行って下さい。

複数素材をまとめて書き出す方法

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

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

複数のレイヤーを選択した状態でエクスポート設定を行うと、まとめて書き出しの準備ができます。

ただ、フレームの中などにある画像を、階層を掘り下げて探すのは大変ですよね。
そこで、役立つのがダイレクト選択です。
ダイレクト選択を使うと、フレームやグループ内にあるオブジェクトを直接選択することが出来ます。

CtrlもしくはCommandキーを押しながらクリックすればダイレクト選択になります。

複数選択+ダイレクト選択する場合は以下の方法です。

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

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

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

まとめて書き出し

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

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

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

　　↓

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

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

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

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

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

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