Figmaで画像を圧縮したりwebp形式で保存する方法
今回はFigmaで画像をエクスポート（画像出力）する際に、ファイル形式をwebp形式を指定できるプラグイン「Olive Press」を紹介します。webpの他に、PNG・JPG・SVGでの出力に対応し、圧縮率も1~100%で指定できるのでファイルサイズを調整したい時に便利です。
この記事のターゲット
Figmaの初心者
Figmaでwebp形式の画像をエクスポートしたい方
Figmaで画像の圧縮率を指定してエクスポートしたい方
1. 「Olive Press」をインストールする
Figma Community の「Olive Press」のページからインストールします。
プラグインに関する説明と詳しいインストール方法はこちらの記事を参考にしてください。
Figmaのプラグインのインストール方法と使い方
今回はFigmaでプラグインをインストールする方法と使い方を解説します。あわせて、当サイトで紹介している便利なプラグインと使い方を解説したプラグイン集もまとめていますので、参考にしてみてください。 ...
2. プラグインを起動してwebp形式で出力する
早速、インストールしたプラグインを起動してファイルを出力してみます。手順は次の通りです。
エクスポートしたいオブジェクト（レイヤー）を選択
右クリックメニューを開き「Plugin」から「Olive Press」をクリック
開い たポップアップメニューの左下のセレクトボタンをクリックし、「webp」を選択する
その隣の「＋」ボタンを押して出力するレイヤーをリストに追加
「Compress」をクリックして名前をつけて保存
これでwebpで出力できました。
出力時に残りのエクスポート回数？が表示されますが、少なくとも10000回まで無料で出力できるようです。それ以上エクスポートするにはライセンスが必要かもしれませんが、特に説明がないので詳しいことは不明です。ご存知の方は教えてください🙏
「＋」ボタンを押してレイヤーを追加するときの操作は、FigmaのExportの操作と同様に、解像度の倍率とSuffixを設定できます。詳しくは以下の記事も参考にしてください。
Figmaでファイル形式を指定して画像に書き出す方法
Figmaで作成した画像やイラストなどのオブジェクトを、ファイルサイズを指定したり、PNGやSVGなどのファイル形式を指定して書き出し・エクスポートする方法の紹介です。 ...
3. 出力したいファイル形式と圧縮率を調節する
Olive Pressでは出力するファイルの圧縮率を調節することでファイルサイズをある程度コントロールすることができます。
ポップアップウィンドウの右上の「Medium⚙」の部分をクリックすると、ファイル形式ごとの圧縮率を1~100%の数値で設定できます。
この画像が標準のPNG出力と比べて、webp形式でどのくらいのサイズになるのかを比較してみましたので参考まで。
FigmaのExportでPNG形式で出力した画像：475KB
プラグインでLight（100%）でwebp形式で出力した画像：66KB
プラグインでMedium（50%）でwebp形式で出力した画像：12KB
プラグインでHeavy（20%）で出力したwebpファイル：8KB
以下がMediumで実際に出力した画像です（12KBのwebp）。ちなみに、当サイトでは画像ファイルはブラウザに応じて最適なファイル形式で表示・圧縮されるよう最適化されていますので、実際に出力された画像が表示されるわけではありませんので悪しからず。
▼ webp/Mediumで出力した画像（元ソースは12KB）
▼ Figmaの標準ExportでPNGで出力した画像（元ソースは475KB）
いかがだったでしょうか。
モダンな開発環境だとコンパイル時にwebpに自動的に変換してくれるツールなどもありますが、手元でwebpが必要になった時にFigmaから直接出力できる手段はあると便利なユースケースもありそうです。
この記事を読んだ方におすすめの記事
Figmaで画像をドット絵のようなモザイクに変換する方法
今回は画像をモザイク化し、ピクセルドットを個別に分解したベクターデータに変換できるプラグイン「Pixels」を紹介します。画像を8bitドットアート風に変換したり、プライバシーに配慮したような画像を作成でき、どんな画像でも簡単にモザイク加工できるので、ぜひ試してみてください。 ...
