TinyImageにはDownsizer機能があり、レイヤーに使われているFigmaの画像塗りを、実際のレイヤーサイズに合わせて自動的にリサイズ(および軽く圧縮)できます。高解像度の画像をFigmaファイルに読み込んだあと、レイヤーの寸法を大幅に小さくした(ただし元の大きな画像ファイルはそのまま使われている)場合に便利です。
よくある例は、Unsplash(または別のストックフォトサイトやプラグイン)から大きな画像を追加し、そのレイヤーをリサイズして、ずっと小さな「カード」や「アバター」の画像として使う場合です。これはFigmaファイルの動作が遅くなる原因になります。このDownsizer機能のようなものを使うと、ファイルサイズを減らし、Figmaファイルのページのパフォーマンスを改善できます。
Downsizer機能でページ上の画像塗りを最適化する
Figmaの塗りの縮小を始めるには、TinyImageのヘッダーでDownsizeタブを開きます。
Downsizerは、現在のFigmaページ上のすべてのレイヤーから画像塗りをスキャンします。TinyImageのチェックボックスで縮小する塗りを選び、ページを再スキャンしたいときは、Rescan all fills on this pageというラベルの付いた再読み込みアイコンをクリックします。
Figmaでレイヤーを選択すると、そのレイヤーがTinyImageで読み込み済みの画像塗りと一致する場合に一覧が絞り込まれます。この絞り込みが有効な間、TinyImageにはShowing selected layer fillsと表示されます。現在の選択に一致する塗りがない場合、TinyImageは読み込み済みの一覧全体を表示したままにします。選択を変えてもページは再スキャンされません。新しく追加した塗りを読み込むには、再読み込みアイコンを使ってください。
縮小する画像塗りを選択する
画像塗りの読み込みが終わったら、一覧でチェックを入れる・外すことで、縮小したい塗りを選べます。
どの塗りがどのレイヤーに対応しているかわからない場合は、一覧のImageアイコンボタンをクリックすると、Figmaページ上のそのレイヤーにすぐにズーム・スクロールします。
塗りを縮小する
塗りの選択が済んだら、スケールの選択肢で、Figmaの画像塗りを縮小する解像度を選びます。デフォルトは @2xで、画像塗りは使われているFigmaレイヤーのちょうど2倍のサイズになるよう、縦横比を保って縮小されます。@1xを選ぶと画像塗りをFigmaレイヤーと同じサイズにリサイズできますが、@2xのオプションほど鮮明にはなりません。
準備ができたら、Downsize Figma Image Fillsボタンをクリックして縮小を開始します。TinyImageは、画像を縮小する必要があるかどうかを自動的に判断します。縮小が必要な画像はリサイズ(および軽く圧縮)され、Figmaレイヤー内で自動的に置き換えられます。すべての画像の処理が終わると、Figmaファイルで削減できたサイズの合計が表示されます。
Figmaで画像の縮小を元に戻す。誤ってDownsizer機能を使った場合や、間違った画像塗りを選択した場合は、Figmaの通常のUndo機能を使って、画像塗りの更新を元の画像塗りに戻せます。さらに前の状態に戻す必要がある場合は、FigmaのFile -> Show Version Historyを使って、ファイルを以前のバージョンに戻すこともできます。