Press」を紹介します。webpの他に、PNG・JPG・SVGでの出力に対応し、圧縮率も1~100%で指定できるのでファイルサイズを調整したい時に便利です。Press」のページからインストールします。プラグインに関する説明と詳しいインストール方法はこちらの記事を参考にしてください。今回はFigmaでプラグインをインストールする方法と使い方を解説します。あわせて、当サイトで紹介している便利なプラグインと使い方を解説したプラグイン集もまとめていますので、参考にしてみてください。プラグインを起動してwebp形式で出力する早速、インストールしたプラグインを起動してファイルを出力してみます。「Compress」をクリックして名前をつけて保存これでwebpで出力できました。出力時に残りのエクスポート回数?が表示されますが、少なくとも10000回まで無料で出力できるようです。それ以上エクスポートするにはライセンスが必要かもしれませんが、特に説明がないので詳しいことは不明です。「+」ボタンを押してレイヤーを追加するときの操作は、FigmaのExportの操作と同様に、解像度の倍率とSuffixを設定できます。詳しくは以下の記事も参考にしてください。Figmaでファイル形式を指定して画像に書き出す方法Figmaで作成した画像やイラストなどのオブジェクトを、ファイルサイズを指定したり、PNGやSVGなどのファイル形式を指定して書き出し・エクスポートする方法の紹介です。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)。ちなみに、当サイトでは画像ファイルはブラウザに応じて最適なファイル形式で表示・圧縮されるよう最適化されていますので、実際に出力された画像が表示されるわけではありませんので悪しからず。Figmaの標準ExportでPNGで出力した画像(元ソースは475KB)いかがだったでしょうか。モダンな開発環境だとコンパイル時にwebpに自動的に変換してくれるツールなどもありますが、手元でwebpが必要になった時にFigmaから直接出力できる手段はあると便利なユースケースもありそうです。今回は画像をモザイク化し、ピクセルドットを個別に分解したベクターデータに変換できるプラグイン「Pixels」を紹介します。画像を8bitドットアート風に変換したり、プライバシーに配慮したような画像を作成でき、どんな画像でも簡単にモザイク加工できるので、ぜひ試してみてください。ような多様なエフェクト(写真効果)を利用できるプラグイン「Filter」を紹介します。セピアやモノクロといったオーソドックスなものや、ズーム風のぼかしやドットスクリーンといったリッチなエフェクトも利用できるのでおすすめです。今回は、Figmaで簡単にハイクオリティなエフェクトを適用できるプラグイン「Morph」の紹介です。サムネイルのような様々な種類のエフェクトが、たった一つのプラグインで再現できるので、ちょっとした素材を作るのに大変便利ですのでおすすめです。続きを読むお気に入りのSNSでこの記事をシェア!最新の記事を見る広告この記事を書いた人うえんつTwitterB2B領域のSaaS・アプリケーション開発などを組織で取り組むことが得意なプロダクトデザイナーで、このブログのオーナーです。