# Figmaの画像書き出し方法

URL: https://webrandum.net/figma-image-export/
公開日: 2022-01-01
更新日: 2022-01-01
カテゴリー: デザイン
タグ: Figma
出典: Webrandum（著者: サイトウ マサカズ）

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

## 基本の書き出し方

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

![Exportパネル](https://webrandum.net/mskz/wp-content/uploads/2022/01/image_1.png)

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

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

![複数設定で一気に書き出し](https://webrandum.net/mskz/wp-content/uploads/2022/01/image_2.png)

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

### ファイルサイズ

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

![画像サイズの設定](https://webrandum.net/mskz/wp-content/uploads/2022/01/image_3.png)

- 1x：等倍で書き出し

- ○x：○倍で書き出し

- ○○w：横幅を○○px固定で書き出す（高さは横幅に比率を合わせて自動）

- ○○h：高さを○○px固定で書き出す（横幅は高さに比率を合わせて自動）

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

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

### ファイル形式

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

![ファイル書き出し形式の選択](https://webrandum.net/mskz/wp-content/uploads/2022/01/image_4.png)

- PNG

- JPG

- SVG

- PDF

### 塗りを無視して書き出し

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

![Fillを無視して書き出し](https://webrandum.net/mskz/wp-content/uploads/2022/01/image_5.png)

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

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

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

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

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

![背景を透過するかどうか](https://webrandum.net/mskz/wp-content/uploads/2022/01/image_6.png)

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

![背景の要素を無視する](https://webrandum.net/mskz/wp-content/uploads/2022/01/image_7.png)

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

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

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

![背景の要素を無視する](https://webrandum.net/mskz/wp-content/uploads/2022/01/image_7.png)

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

![バウンディングボックスを無視する](https://webrandum.net/mskz/wp-content/uploads/2022/01/image_8.png)

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

## フレームのPDF書き出し

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

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