Figmaでデザインデータ上の画像を圧縮してファイルサイズを軽くする「Downsize」

デザインデータは画像を大量に配置していくと、ファイルサイズが重くなったり、ファイルの読み込み速度やメモリ使用量に影響が出てきます。

素材サイトからダウンロードした画像はファイルサイズがかなり大きいので、コピーしてリサイズしてから貼り付けた方が無難です。

ただ、配置前に毎回リサイズしたり圧縮したりは地味に面倒だったり、他の人がそのまま配置している場合もあります。
というわけで、今回はFigma上で画像の圧縮やリサイズができる「Downsize」を紹介します。

Downsize

Figma

Figma

https://www.figma.com/community/plugin/869495400795251845/Downsize

Figma Community plugin — Compress and resize images without leaving Figma or FigJam!Smaller images help files load faster and reduce memory usage.How to use itSelect anything on the canvas or keep selection empty — Downsize will find all images within a selection or on a pageAdd settings to compress and/or resize ima...

DownsizeはFigma上で画像の圧縮やリサイズができるプラグインです。

基本的な使い方

Figmaのメニューバーから［Plugins］→［Downsize］を選択して、「Downsize」パネルを表示します。

表示すると自動で画像が検出されますし、要素を選択した場合は選択要素の中から画像を検出してくれます。

あとは必要な設定をして「Resize ○ images」ボタンをクリックすれば圧縮・リサイズされます。

圧縮・リサイズ後はFigmaの画面下に、結果が表示されます。

圧縮レベルの下げすぎに注意

圧縮レベルを下げすぎると、画像が大幅に劣化する場合があります。

未圧縮の画像を「80〜70」程度の圧縮率にするだけで、見た目はあまり変わらず大幅に容量の節約ができます。

また、下げすぎてしまった場合は圧縮後にcommand + Zで元に戻すこともできます。