Figmaで画像をエクスポート(書き出し)する方法を知りたい
この記事は上記の課題に向けて作成しています。
Figmaでは他のデザインツールと同様に画像をエクスポート出来ます。
まだ実践したことの無い方はこの記事を読んでみてください。
この記事を読むメリット
- Figmaで画像をエクスポート(書き出し)する方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
Figmaで画像をエクスポート(書き出し)する方法
早速Figmaで画像をエクスポートする方法を紹介します。
手順は下記の通りになります。
Figmaで画像をエクスポートする手順
- エクスポートしたい画像を選択する
- 「エクスポート」を選択する
- 拡張子やサイズを調整しエクスポートする
上記の手順で画像を書き出すことが出来ます。
エクスポートする際Figmaでは下記の書き出し設定が出来ます。
Figmaで出来る書き出し設定
- 書き出し倍率
- 拡張子
- サフィックス
- カラープロファイル
書き出し倍率
書き出す画像の倍率を設定することが出来ます。
デフォルトでは「1x」となっており、1倍サイズで書き出されます。
「2x」にすると2倍サイズで書き出されます。
※web制作ではRetinaディスプレイを考慮して2倍サイズで書き出すことが多いです
サイズは0.5xから4xまで選択することが出来ます。
「512w」は横幅を512pxに固定、「512h」は高さを512pxに固定で書き出す設定です。
拡張子
Figmaでは書き出す際下記の拡張子を選ぶことが出来ます。
Figmaで書き出す際に選べる拡張子
- PNG
- JPG
- SVG
サフィックス
サフィックスは、入力ボックスに記入した文言がファイル名として書き出される設定になります。
※例えばサフィックスに「image」と入力し拡張子が「JPG」の場合、書き出される画像は「image.jpg」になります。
カラープロファイル
カラープロファイルは「sRGB」と「Display P3」から選ぶ事が出来ます。
「sRGB」は現在主流とされている色空間です。
「Display P3」はディスプレイに使用される色空間で、「sRGB」より色の表現に長けているものです。
web制作の場合は「Display P3」が今後主流になっていくかもしれません。
Figmaでアートボード全体をエクスポートする方法
続いてアートボード全体をエクスポートする方法を紹介します。
デザインをPDFに書き出す際などに使用します。
Figmaでアートボード全体をエクスポートする手順
- エクスポートしたいアートボードを選択する
- 「エクスポート」を選択する
- 拡張子やサイズを調整しエクスポートする
アートボード全体を書き出す手順は画像とほとんど同じです。
また、画像と同様に拡張子やサイズも選ぶことが出来ます。
Figmaでは簡単にエクスポート出来る
この記事ではFigmaで画像やアートボードをエクスポートする方法を紹介しました。
知らなかった方は試してみてください。
Figmaに関する他の記事はこちら
