Figmaで作成したデザインを書き出す（エクスポート）方法

Figma で作成したデザインを画像として書き出す（エクスポート）する目的は、「デザインの確認」「Webサイトの要素として使用」の大きく2つに分かれます。

目的に応じて書き出しの設定は変える必要があるので、デザインを書き出すための基礎知識と合わせて、それぞれの目的に合わせてエクスポートする際のポイントを紹介します。

フレーム、オブジェクトのどちらも画像としてエクスポートできますので、用途に応じて使い分けてみてください。

デザインを書き出すための基礎知識

最適な画像サイズとは

最適なサイズは、デバイスの画面解像度に依存します。
WEBサイトなどで一般的に用いられるPCモニター画面表示用の解像度は72dpiですが、最近のMacは画面解像度が144dpiなので、2倍のサイズで画像を書き出き出すことで最適な表示となります。2倍で書き出された画像のことを2x（ツーエックス）、3倍で書き出された画像を3x（スリーエックス）と呼びます。

ファイルサイズ

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

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

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

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

複数の画像サイズを設定する

複数の画像サイズを設定する場合は、「Export」の右端にある「+」ボタンを押すことで設定を追加することができでき、同時に複数の形式やサイズでエクスポートすることができます。サイズ「1x」を変更することで、画像の拡大率を変更できます。

また、書き出し時に「Sufix」を付加することで、ファイル名に自動的にテキストを追記することができるので、サイズ管理に便利です。例えば、「Sufix」に「@1x」「@2x」などのテキストを追加すると、「ファイル名@1x.png」などのように、ファイル名の後にSufixに入れた文字列を追加することができます。