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

URL: https://webrandum.net/figma-plugin-downsize/
公開日: 2022-04-26
更新日: 2022-04-26
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

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

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

ただ、配置前に毎回リサイズしたり圧縮したりは地味に面倒だったり、他の人がそのまま配置している場合もあります。

というわけで、今回はFigma上で画像の圧縮やリサイズができる「Downsize」を紹介します。

## Downsize

![Downsize](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_1-13.png)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.figma.com%2Fcommunity%2Fplugin%2F869495400795251845%2FDownsize?w=160)Figmahttps://www.figma.com/community/plugin/869495400795251845/DownsizeFigma 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...](https://www.figma.com/community/plugin/869495400795251845/Downsize)

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

## 基本的な使い方

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

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

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

![Downsizeパネル](https://webrandum.net/mskz/wp-content/uploads/2022/04/image_2-19.png)

| 項目 | 内容 |
| --- | --- |

| PNG → JPEG where possible | チェックを入れると、PNG形式をJPEG形式に変換 |
| --- | --- |

| Compress | 圧縮レベルを数値で指定 （数値が低いほど圧縮される） |
| --- | --- |

| Resize | リサイズ倍率を選択 |
| --- | --- |

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

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

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

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

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