Figmaでデザインデータ上の画像を圧縮してファイルサイズを軽くする「Downsize」
デザインデータは画像を大量に配置していくと、ファイルサイズが重くなったり、ファイルの読み込み速度やメモリ使用量に影響が出てきます。
素材サイトからダウンロードした画像はファイルサイズがかなり大きいので、コピーしてリサイズしてから貼り付けた方が無難です。
ただ、配置前に毎回リサイズしたり圧縮したりは地味に面倒だったり、他の人がそのまま配置している場合もあります。
というわけで、今回はFigma上で画像の圧縮やリサイズができる「Downsize」を紹介します。
Downsize
DownsizeはFigma上で画像の圧縮やリサイズができるプラグインです。
基本的な使い方
Figmaのメニューバーから［Plugins］→［Downsize］を選択して、「Downsize」パネルを表示します。
表示すると自動で画像が検出されますし、要素を選択した場合は選択要素の中から画像を検出してくれます。
あとは必要な設定をして「Resize ○ images」ボタンをクリックすれば圧縮・リサイズされます。
| 項目 | 内容 |
|---|---|
| PNG → JPEG where possible | チェックを入れると、PNG形式をJPEG形式に変換 |
| Compress | 圧縮レベルを数値で指定 （数値が低いほど圧縮される） |
| Resize | リサイズ倍率を選択 |
圧縮・リサイズ後はFigmaの画面下に、結果が表示されます。
圧縮レベルの下げすぎに注意
圧縮レベルを下げすぎると、画像が大幅に劣化する場合があります。
未圧縮の画像を「80〜70」程度の圧縮率にするだけで、見た目はあまり変わらず大幅に容量の節約ができます。
また、下げすぎてしまった場合は圧縮後にcommand + Zで元に戻すこともできます。
