Figmaで画質を劣化させずに書き出す方法

Tweet

Pocket

Figmaでなるべく画質を劣化させずに書き出すには、以下のようにします。

webpで書き出す

適切に書き出せば、jpg, pngと画質は変わりません。かつ、jpg, pngよりもファイルサイズを減らすことができます。

Olive Pressは使えない。WebP Exporterを使う

webpを書き出セルプラグインであるOlive Pressは、画質が劣化し汚いです。そのため、WebP Exporterを使います。かつ、Optimized Sizeにチェックが入っているとファイルサイズを削減できるものの、画質は劣化し汚くなります。なのでOptimized Sizeのチェックは外して書き出します（容量を削減したい場合は、Optimized Sizeのチェックを入れて画質と容量のバランスを取るのはアリです）。

Retina対応は“2x”で書き出せば問題ない

元画像のファイルサイズが2倍以上あれば、“2x”で書き出して問題ありません（Photoshopのスマートオブジェクトと考え方は同じ）。元画像のファイルサイズが2,560px以上ある場合、1,280pxの画像を2xで書き出した場合と、2,560pxにリサイズして1xで書き出した場合の画質は同じです。