Figmaの画像書き出し方法

作ったデザインをコーディングで実装していくときに必要な、Figmaでの画像エクスポートに関してまとめておきます。

基本の書き出し方

基本的には書き出したいオブジェクトを選択して、右下にある「Export」をクリックします。

あとは書き出し画像の設定をして「Export ○○」をクリックするだけです。

複数の設定で書き出しをしたい場合は「＋」アイコンを押してそれぞれ設定していきます。

ちなみに、複数ファイルを選択して、一気に書き出し設定 → 書き出しもできます。

ファイルサイズ

1番左側にある設定がファイルサイズで、「1x」が等倍のサイズで書き出されますが、他のサイズに指定して書き出しも可能です。

• 1x：等倍で書き出し
• ○x：○倍で書き出し
• ○○w：横幅を○○px固定で書き出す（高さは横幅に比率を合わせて自動）
• ○○h：高さを○○px固定で書き出す（横幅は高さに比率を合わせて自動）

「Sufix」にテキストを追加すると、書き出し時にファイル名の最後にそのテキストが追加されます。

「2x」の場合は「@2x」と書くのが一般的で書き出すと「ファイル名@2x.png」となります。

ファイル形式

ファイル形式は一番右で設定できます。

• PNG
• JPG
• SVG
• PDF

塗りを無視して書き出し

コンポーネントのFillパネルにある「Show in exports」のチェックボックスを外すと、書き出し時にFillが無視されるようになります。

Exportパネルの「Preview」を見るとちゃんとFillが反映されていないことがわかります。

正直使いどころがよく分からないので、基本はデフォルトのチェックを入れたままにして触らないようにしつつ、なにかの拍子に外れてしまっていた場合はチェックをつけるようにしましょう。

背景も一緒に書き出すかどうか

Exportパネルの画像設定で、一番右にある「…」をクリックすると、さらに詳細な設定が出てきます。

「Ignore overlapping layers」にチェックが入っていない場合は、レイヤー後ろの要素も一緒に書き出されます。

チェックが入っていると、選択した要素のみが書き出されます。

バウンディングボックス内を書き出す

ボックスシャドウをつけていたり、テキストがFixed sizeになっている場合、バウンディングボックス内を書き出すかどうか設定できます。

「Include bounding box」にチェックが入っていないと、下の画像のようにドロップシャドウも含めて書き出しになります。

チェックを入れると、ドロップシャドウ部分は無視されて、書き出されます。

このあたりは最初わかりにくいので、「Preview」を見ながら意図した通りになっているか確認して書き出すようにしましょう。

フレームのPDF書き出し

デザインをクライアントにPDFで渡したいときなどは、メニューの［File］→［Export frames to PDF…］とすると、デザイン上のフレーム全てがPDFにまとまって書き出されます。

ただ、PDFの並び順は、Figmaのデザイン内で左上から右下に向かって順序付けされる（レイヤーは関係ない）ので、デザインを作るときにそこは意識する必要があります。