Figmaで画像をエクスポート(書き出し)する方法を知りたい
この記事は上記の課題に向けて作成しています。
Figmaでは他のデザインツールと同様に画像をエクスポート出来ます。
まだ実践したことの無い方はこの記事を読んでみてください。
この記事を読むメリット
- Figmaから画像をエクスポート(書き出し)する方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
Figmaから画像をエクスポート(書き出し)する方法
早速Figmaから画像をエクスポートする方法を紹介します。
画像のエクスポートは2つの内容があります。
Figmaから画像をエクスポートする2つの内容
- アートボード全体を画像としてエクスポート
- 一部の素材を画像としてエクスポート
それぞれの方法を紹介します。
アートボード全体を画像としてエクスポート
まずはアートボード全体を画像としてエクスポートする方法を紹介します。
アートボード全体をエクスポートする手順は下記の通りです。
アートボード全体をエクスポートする手順
- アートボード全体を選択する
- 「エクスポート」から書き出し設定を行う
- 実際に書き出す
①アートボード全体を選択する
始めにアートボード全体を選択します。
左上にあるアートボード名を選択するとアートボード全体が選択されます。
②「エクスポート」から書き出し設定を行う
続いて右側のツールから書き出し設定を行います。
「デザイン」→「エクスポート」から書き出しの設定を行います。
書き出しの設定内容については次の章で詳しく説明しております。
③実際に書き出す
最後に書き出します。
「（アートボード名）をエクスポート」をクリックします。
書き出し先フォルダの選択をしたらエクスポート完了です。
アートボード全体を書き出す一連の流れの動画はこちら
一部の素材を画像としてエクスポート
続いては一部の素材をエクスポートする方法の紹介です。
手順は下記の通りになります。
一部の素材をエクスポートする手順
- エクスポートしたい素材を選択
- 「エクスポート」から書き出し設定を行う
- 実際に書き出す
①エクスポートしたい素材を選択
始めに書き出したい素材を選択します。
②「エクスポート」から書き出し設定を行う
続いて書き出し設定を行います。やり方は先ほどと同じです。
③実際に書き出す
最後に書き出しを行います。こちらも先ほどと同じやり方です。
一部素材を書き出す一連の流れの動画はこちら
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では簡単にエクスポート出来る
この記事ではFigmaで画像をエクスポートする方法を紹介しました。
Figmaでは簡単に画像をエクスポートすることは出来ます。
知らなかった方は試してみてください。
Figmaに関する他の記事はこちら
