Figmaで作成した画像をエクスポートする方法
![](https://blogcake.net/wp-content/uploads/2022/09/アイキャッチ 画像エクスポート方法.png)
![](https://blogcake.net/wp-content/uploads/2022/08/ドヤ顔-男.png)
やったー。Figmaでアイキャッチできた!
![](https://blogcake.net/wp-content/uploads/2022/08/笑い.png)
![](https://blogcake.net/wp-content/uploads/2022/08/笑い.png)
![](https://blogcake.net/wp-content/uploads/2022/08/笑い.png)
アイキャッチができたら画像ファイルにエクスポートしましょう。
この記事でわかること!
- Figmaで作成した画像をエクスポートする方法
Figmaで作成した画像のエクスポート方法
画面右側のプロパティパネルの「エクスポート」から行います。
エクスポート手順
![Figma 画像エクスポート(出力)方法](https://blogcake.net/wp-content/uploads/2022/09/tejilabo-124.png)
![Figma 画像エクスポート(出力)方法](https://blogcake.net/wp-content/uploads/2022/09/tejilabo-124.png)
エクスポートしたいフレーム(オブジェクト)を選択します。
![Figma 画像エクスポート(出力)方法](https://blogcake.net/wp-content/uploads/2022/09/amazon-fv.png)
![Figma 画像エクスポート(出力)方法](https://blogcake.net/wp-content/uploads/2022/09/amazon-fv.png)
右側プロパティパネルの中の「エクスポート」プロパティで、サイズとファイルタイプを選択します。
![Figma 画像エクスポート(出力)方法](https://blogcake.net/wp-content/uploads/2022/09/tejilabo-123.png)
![Figma 画像エクスポート(出力)方法](https://blogcake.net/wp-content/uploads/2022/09/tejilabo-123.png)
▲サイズとファイルタイプが決まったら下のエクスポートボタンを押します。
複数画像を同時にエクスポートする方法
![Figma 画像エクスポート(出力)方法](https://blogcake.net/wp-content/uploads/2022/09/tejilabo-129-1024x731.png)
![Figma 画像エクスポート(出力)方法](https://blogcake.net/wp-content/uploads/2022/09/tejilabo-129-1024x731.png)
▲複数のオブジェクトをまとめてエクスポートするには、エクスポートしたいオブジェクトをすべて選択しエクスポートプロパティの「+」ボタンを押します。
![](https://blogcake.net/wp-content/uploads/2022/08/ドヤ顔.png)
![](https://blogcake.net/wp-content/uploads/2022/08/ドヤ顔.png)
![](https://blogcake.net/wp-content/uploads/2022/08/ドヤ顔.png)
複数出力のときは、ファイル名が自動的にオブジェクト名になります。あらかじめ分かりやすい名前を付けておきましょう!
いろんな形式でまとめてエクスポートする方法
「等倍サイズのPNG、0.5xサイズのJPEGをまとめて出力したい」という要望もあるかもしれません。
Figmaはエクスポートオプションを複数追加できるので、こういうことも簡単にできます。手順は下記です。
![Figma 画像エクスポート(出力)方法](https://blogcake.net/wp-content/uploads/2022/09/tejilabo-127.png)
![Figma 画像エクスポート(出力)方法](https://blogcake.net/wp-content/uploads/2022/09/tejilabo-127.png)
![Figma 画像エクスポート(出力)方法](https://blogcake.net/wp-content/uploads/2022/09/tejilabo-128.png)
![Figma 画像エクスポート(出力)方法](https://blogcake.net/wp-content/uploads/2022/09/tejilabo-128.png)
▲エクスポートオプションが1つ追加され、2つになりました。この状態でそれぞれのサイズとファイルタイプを決めて、下のボタンを押します。
上の図の例では「等倍サイズ(1.0x)のPNG、0.5xサイズのJPEG」が同時に出力されます。プラスボタンをもう一回押せばさらに形式を追加することができます。
わかりづらい方は上の動画の後半でも解説していますのであわせてご覧頂ければ幸いです。
Figmaエクスポートオプション
![](https://blogcake.net/wp-content/uploads/2022/09/図解-エクスポートオプション-1024x538.png)
![](https://blogcake.net/wp-content/uploads/2022/09/図解-エクスポートオプション-1024x538.png)
手順で解説したように、Figmaはエクスポートのときにサイズとファイルタイプを選ぶことができます。
画像サイズを変更する
出力サイズは下記のサイズに対応しています。0.5xは縦横サイズ比を変えずに半分のサイズで出力します。4.0xは縦横サイズ比を変えずに4倍のサイズで出力します。
- 0.5x
- 0.75x
- 1x
- 1.5x
- 2.0x
- 3.0x
- 4.0x
- 512w
- 512h
画像ファイルタイプを変更する
画像のファイルタイプ(拡張子)は下記に対応しています。
- PNG
- JPEG
- SVG
ブログのアイキャッチの場合はJPEGかPNGで出力しましょう!
FigmaでWebP形式でエクスポートするには?
「Olive Press」というプラグインを使えばWebPでエクスポートすることもできるようです。
![](https://blogcake.net/wp-content/uploads/2023/02/jojio-profile-small-150x150.jpg)
![](https://blogcake.net/wp-content/uploads/2023/02/jojio-profile-small-150x150.jpg)
![](https://blogcake.net/wp-content/uploads/2023/02/jojio-profile-small-150x150.jpg)
私はWordPressプラグインで自動的にWebP出力しているので、Olive Pressは使ったことないです!
まとめ
![](https://blogcake.net/wp-content/uploads/2022/08/ドヤ顔.png)
![](https://blogcake.net/wp-content/uploads/2022/08/ドヤ顔.png)
![](https://blogcake.net/wp-content/uploads/2022/08/ドヤ顔.png)
Figmaのファイルエクスポート方法でした!
コメント