Figma：フィグマで作成したものを画像で書き出し！エクスポート
| 所要時間 1分 | 難易度 ★☆☆☆☆ | 製作者 ざき |
目次
1_ 書き出しできるもの
2_ 画像の書き出し方
3_ 書き出し設定
制作
1_ 書き出しできるもの
・デザイン内にある画像など個別のもの
・複数のオブジェクトを使用したデザイン
・完成したデザイン全体
Webサイトのデザインを画像として書き出したり、コーディングに使うための画像を書き出したりなど、ウェブサイトを作る時などに便利です。
2_ 画像の書き出し方
① 書き出したいものの選択
最初の手順だけ書き出したいものによって変わってきます。
個別のものを書き出す場合 / 書き出したいものを一つ選択（デザイン上のものを選択または左のレイヤーから選択）
個別のものを複数書き出す場合 / 書き出したい複数のものを選択（デザイン上のものを選択または左のレイヤーから選択）
複数のオブジェクトを使用したデザインの場合 / 複数のものを一つの画像として書き出す場合は、グループやセクション、フレームのどれでも良いのでまとめてからでないと書き出すことができないので注意してください。まとめたものを選択します。（デザイン上のものを選択または左のレイヤーから選択）
フレーム全体の場合 / フレームを選択します。（フレームの名前をクリックまたは左のレイヤーからフレームを選択）
② 右下にあるエクスポートのところの「+」マークを押します。
③ 1x（←おそらく最初の設定）になっているところからサイズ設定ができます。下矢印を押すとサイズが出てくるので選択して設定してください。基本的には1xで良いと思いますが、用途によってサイズを変えてみてください。（単位については3_書き出し設定の書き出しサイズを参照してください）
④ PNG（←おそらく最初の設定）になっているところからファイル形式の設定ができます。下矢印を押すとファイル形式が出てくるので用途に合わせて選択して設定してください。（種類については3_書き出し設定のファイル形式の設定を参照してください）
⑤ プレビューをクリックすると書き出す画像の確認をすることができます。
⑥ ○○をエクスポートというボタンを押すと画像を書き出すことができます。
⑦ 名前を変更する場合は名前を入力し、保存したい場所を決め、保存ボタンを押せば保存することができます。
3_ 書き出し設定
●書き出しサイズ
書き出しサイズの単位について
・x：倍率で指定して画像を書き出す（2Xなら2倍）
・w：指定した横幅に合わせて画像を書き出す
・h：指定した高さに合わせて画像を書き出す
●ファイル形式の設定
PNG、JPEG、SVG、PDFがあります。
| PNG | JPEG | SVG | ||
| データ量 | 中程度 | 小さい | 小さい | 大きい（小さくできる） |
| 透明 | ○ | × | ○ | × |
| 使い道 | ウェブ画像やロゴ、アイコン。背景が透明な画像。 | 写真や画像の保存や共有。一般的なウェブ画像。 | イラストやグラフィック、ウェブサイトのアイコンやロゴ。 | 文書や印刷、資料の整理やメールなどでの共有。 |
| 特徴 | 画像を圧縮しても画質が劣化しない。 | 詳細なグラデーションが含まれる画像に適している。圧縮の度合いによっては画質が劣化する。 | 拡大・縮小しても画質が劣化しないベクター形式の画像。 | どの環境でも同じ表示を再現できる。 |
