figma-how-to-export-webp
公開日: 2021.11.26  | 更新日: 2021.12.04

Figmaで画像を圧縮したりwebp形式で保存する方法

今回はFigmaで画像をエクスポート(画像出力)する際に、ファイル形式をwebp形式を指定できるプラグイン「Olive Press」を紹介します。webpの他に、PNG・JPG・SVGでの出力に対応し、圧縮率も1~100%で指定できるのでファイルサイズを調整したい時に便利です。

この記事のターゲット

  • Figmaの初心者

  • Figmaでwebp形式の画像をエクスポートしたい方

  • Figmaで画像の圧縮率を指定してエクスポートしたい方


1. 「Olive Press」をインストールする

figma-plugin-Olive-Press-Image-Compression

Figma Community の「Olive Press」のページからインストールします。

プラグインに関する説明と詳しいインストール方法はこちらの記事を参考にしてください。

Figmaのプラグインのインストール方法と使い方

今回はFigmaでプラグインをインストールする方法と使い方を解説します。あわせて、当サイトで紹介している便利なプラグインと使い方を解説したプラグイン集もまとめていますので、参考にしてみてください。 ... 続きを読む

figma-how-to-use-plugins

2. プラグインを起動してwebp形式で出力する

早速、インストールしたプラグインを起動してファイルを出力してみます。手順は次の通りです。

  1. エクスポートしたいオブジェクト(レイヤー)を選択

  2. 右クリックメニューを開き「Plugin」から「Olive Press」をクリック

  3. 開いたポップアップメニューの左下のセレクトボタンをクリックし、「webp」を選択する

  4. その隣の「+」ボタンを押して出力するレイヤーをリストに追加

  5. 「Compress」をクリックして名前をつけて保存

webp1

これでwebpで出力できました。

出力時に残りのエクスポート回数?が表示されますが、少なくとも10000回まで無料で出力できるようです。それ以上エクスポートするにはライセンスが必要かもしれませんが、特に説明がないので詳しいことは不明です。ご存知の方は教えてください🙏

「+」ボタンを押してレイヤーを追加するときの操作は、FigmaのExportの操作と同様に、解像度の倍率とSuffixを設定できます。詳しくは以下の記事も参考にしてください。

Figmaでファイル形式を指定して画像に書き出す方法

Figmaで作成した画像やイラストなどのオブジェクトを、ファイルサイズを指定したり、PNGやSVGなどのファイル形式を指定して書き出し・エクスポートする方法の紹介です。 ... 続きを読む

figma-how-to-export

3. 出力したいファイル形式と圧縮率を調節する

Olive Pressでは出力するファイルの圧縮率を調節することでファイルサイズをある程度コントロールすることができます。

ポップアップウィンドウの右上の「Medium⚙」の部分をクリックすると、ファイル形式ごとの圧縮率を1~100%の数値で設定できます。

webp2

この画像が標準のPNG出力と比べて、webp形式でどのくらいのサイズになるのかを比較してみましたので参考まで。

  • FigmaのExportでPNG形式で出力した画像:475KB

  • プラグインでLight(100%)でwebp形式で出力した画像:66KB

  • プラグインでMedium(50%)でwebp形式で出力した画像:12KB

  • プラグインでHeavy(20%)で出力したwebpファイル:8KB

以下がMediumで実際に出力した画像です(12KBのwebp)。ちなみに、当サイトでは画像ファイルはブラウザに応じて最適なファイル形式で表示・圧縮されるよう最適化されていますので、実際に出力された画像が表示されるわけではありませんので悪しからず。

▼ webp/Mediumで出力した画像(元ソースは12KB)

webp-medium-png

▼ Figmaの標準ExportでPNGで出力した画像(元ソースは475KB)

png-export-under-the-sea


いかがだったでしょうか。

モダンな開発環境だとコンパイル時にwebpに自動的に変換してくれるツールなどもありますが、手元でwebpが必要になった時にFigmaから直接出力できる手段はあると便利なユースケースもありそうです。

この記事を読んだ方におすすめの記事

Figmaで画像をドット絵のようなモザイクに変換する方法

今回は画像をモザイク化し、ピクセルドットを個別に分解したベクターデータに変換できるプラグイン「Pixels」を紹介します。画像を8bitドットアート風に変換したり、プライバシーに配慮したような画像を作成でき、どんな画像でも簡単にモザイク加工できるので、ぜひ試してみてください。 ... 続きを読む

figma-pixels-plugin

Figmaのプラグイン「Filter」でPhotoshopのようなエフェクトを使う方法

今回は、Figma で Photoshop のような多様なエフェクト(写真効果)を利用できるプラグイン「Filter」を紹介します。セピアやモノクロといったオーソドックスなものや、ズーム風のぼかしやドットスクリーンといったリッチなエフェクトも利用できるのでおすすめです。 ... 続きを読む

figma-filter-plugin

Figmaでネオンやガラスの質感を手軽に使えるプラグイン「Morph」の紹介

今回は、Figmaで簡単にハイクオリティなエフェクトを適用できるプラグイン「Morph」の紹介です。サムネイルのような様々な種類のエフェクトが、たった一つのプラグインで再現できるので、ちょっとした素材を作るのに大変便利ですのでおすすめです。 ... 続きを読む

figma-morph-plugin

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告