Figmaの画像エクスポートを圧縮する

TinyImageでエクスポート設定を選び、Figmaの画像エクスポートを圧縮する方法です。

TinyImageは、Figmaページ内のレイヤーに設定したエクスポート設定・形式を検出し、TinyImageプラグインで圧縮した画像としてエクスポートできるようにします。

ページの自動スキャンでは、非表示のコンテナ内にあるレイヤーはスキップされます。Figmaで明示的に選択したレイヤーは、そのレイヤー自体の表示状態とエクスポート設定に基づいて引き続き確認されます。保存済みのエクスポート設定を変更する必要はありません。

Figmaのエクスポート設定の基本と仕組みについて詳しくは、Figmaヘルプの公式ガイドGuide to exports in Figmaをご覧ください。

圧縮したいレイヤーには、少なくとも1つのエクスポート設定が必要です。レイヤーにエクスポート設定がない場合、TinyImageはそのレイヤーを圧縮・エクスポートしたいことを判断できず、プラグインのエクスポート可能な画像の一覧にも表示されません。

エクスポート設定の追加と再読み込み ​

Figmaから圧縮した画像のエクスポートを始めるには、まず圧縮したいレイヤーに画像のエクスポート設定を追加しておく必要があります。

Figmaのレイヤーにエクスポート設定を追加する ​

レイヤー（または複数のレイヤー）にエクスポート設定を追加するには、Figmaでレイヤーを選択し、FigmaのプロパティパネルでExportの横にある + アイコンをクリックします。+ を複数回クリックすると、そのレイヤーにエクスポート設定をいくつでも追加できます。つまり、1つのレイヤーを複数の形式とサイズで一度にエクスポートできます（たとえばSVG、JPG @1x、JPG @2x、PDFなど）。

エクスポート設定を更新したあとにFigmaのレイヤーを再読み込みする ​

すでにエクスポート設定を追加したレイヤーで、TinyImageプラグインの実行中に設定を追加・削除したい場合は、前の手順と同じ方法で変更できます。レイヤーの新しいエクスポート設定に問題がなければ、TinyImageツールバーのRefreshアイコンをクリックします。Figmaのレイヤーが再読み込みされ、更新されたエクスポートオプションがTinyImageのエクスポート可能な画像の一覧に表示されます。

圧縮品質のパーセンテージまたは目標サイズを設定する ​

TinyImageでは、画像エクスポートの圧縮品質を1%-100% のパーセンテージで指定するか、最大ファイルサイズの目標（キロバイト単位）を設定できます。数値を低くするとファイルサイズは小さくなりますが、画質も下がります。数値を高くするとファイルサイズは大きくなりますが、画質は上がります。

  • 0%-50% 低品質（PDFでは72dpi）
  • 50%-75% 良好な品質（PDFでは150dpi）
  • 75%-100% 最高品質（PDFでは300dpi）

圧縮品質のパーセンテージを調整する ​

TinyImageツールバーの圧縮スライダーを使うと、すべての画像エクスポートの品質を1%-100% で設定できます。スライダーをクリック（長押し） してドラッグすると、希望の品質を指定できます。この設定は、TinyImageのすべてのエクスポートに適用されます。

最大ファイルサイズ（KB）の圧縮目標を設定する ​

Size Targetトグルを有効にしてサイズ入力欄にキロバイト単位の値を入力すると、最大ファイルサイズの目標（キロバイト単位）を設定することもできます。TinyImageは、各画像をその最大ファイルサイズ以下に収めようとします。

なお、目標に届くまで各画像を段階的に圧縮する必要があるため、品質のパーセンテージのスライダーを使う場合よりも時間がかかることがよくあります。

TinyImageの最大ファイルサイズを、UIではなくFigmaで設定したい場合は、エクスポート可能なレイヤーで、Figmaのエクスポート設定のサフィックスを使えます。アンダースコアに続けてkbで終わる数値（たとえば_250kb）を追加すると、TinyImageはその値をそのレイヤーの最大サイズとして使います。有効なサフィックスの例：_250kb、@2x_500kb、@1x_300kb

目標サイズはPDFとGIFのエクスポートには適用されません。ファイルサイズの目標による圧縮オプションは、TinyImageからのPDFやGIFのエクスポートには影響しません。適用されるのは、JPG、PNG、SVG、AVIF、WebPの画像だけです。

エクスポートごとに圧縮品質・サイズを上書きする ​

スライダーで品質を設定するだけでなく、TinyImageでは画像の形式ごとに異なる品質・サイズを指定できます。これは、プラグインのヘッダーにある品質スライダーや目標サイズの入力欄で設定した全体の値よりも優先されます。

特定の画像形式の品質を指定するには、品質を変更したい画像の横にある品質の数値入力欄をクリックします。1%-100% の任意の数値を入力でき、その数値が画像をエクスポートするときの品質設定になります。

最大ファイルサイズを目標にしている場合は、目標サイズを変更したい画像の横にあるKBの数値入力欄をクリックすると、上書きの値を指定できます。1-9999（KB）の任意の数値を入力でき、その数値が画像をエクスポートするときの目標ファイルサイズの設定になります。

圧縮する画像を選択する ​

圧縮したいレイヤーにエクスポート設定を追加すると、それらがTinyImageのエクスポート可能な画像の一覧に表示されます。ただし、Figmaページ上のすべての画像を一度にエクスポートする必要はありません。TinyImageでは、チェックボックスを使って、圧縮したいエクスポート可能な画像を選択（および選択解除）できます。

エクスポート可能な画像のチェックを入れる・外す ​

エクスポートする画像を選択（または選択解除）するには、TinyImageのエクスポート可能な画像の一覧で、画像のサムネイルの横にあるチェックボックスをクリックします。チェックを外した画像は圧縮・エクスポートの対象から除外され、反対にチェックを入れた画像はエクスポートに含まれます。

すべてのレイヤーをすばやく選択・選択解除する。一覧のすべての画像を一度に選択または選択解除するには、エクスポート可能な画像の一覧の上にある、TinyImageツールバーのチェックボックスをクリックします。

TinyImageを開くときに選択したレイヤーだけを読み込む ​

TinyImageの起動時に大きなページ全体をスキャンしないようにするには、プラグインを開く前に、必要なエクスポート可能なレイヤーをFigmaでハイライトしておきます。TinyImageは最初に、選択したレイヤーのうち、すでにエクスポート設定があるものだけを読み込みます。

TinyImageを開いたあとにFigmaの選択を変えると、すでに読み込まれたレイヤーを絞り込むことはできますが、再スキャンが行われたり、新しいレイヤーがバックグラウンドで読み込まれたりすることはありません。新しい選択に最初に読み込まれた範囲外のレイヤーが含まれている場合、TinyImageはRefresh All Exportable Layersをクリックするよう促します。これにより、新しく追加したレイヤーやエクスポート設定も含めて、現在のページのエクスポート可能なレイヤーがスキャンされます（非表示のコンテナ内のレイヤーはスキップされます）。

再読み込みしたあとも、現在の選択に一致するエクスポート可能なレイヤーがない場合、TinyImageは作業を続けられるようにページ全体の一覧を表示したままにします。選択を変えるかページを切り替えると、通常の選択による絞り込みの動作に戻ります。

選択した画像のエクスポート設定を再読み込みする ​

選択したレイヤーの中にまだエクスポート設定がないものがある場合は、FigmaのプロパティパネルでExportの横にある + アイコンをクリックして、必要な設定を追加します。

新しいエクスポート設定に問題がなければ、TinyImageツールバーのRefreshアイコンをクリックします。TinyImageが現在のページを再スキャンし、更新されたエクスポートオプションをエクスポート可能な画像の一覧に表示します。

圧縮した画像をエクスポートする ​

圧縮したいエクスポート可能な画像を選択したら、TinyImageツールバーのExportをクリックします。選択した画像の圧縮が1枚ずつ始まります。どの画像を圧縮中かを示す進行状況が表示され、各画像の圧縮が終わるたびに削減できたファイルサイズも表示されます。すべての画像の圧縮が終わるまでお待ちください。画像の数が多いほど、また各画像のサイズが大きいほど、時間がかかります。

PNG・PDFの圧縮速度。PNGとPDFのエクスポートの圧縮は、JPGやSVGのエクスポートよりも時間がかかることがあります。特に、非常に細かい画像や寸法の大きい画像では時間がかかります。画像が大きすぎて圧縮できない場合は、TinyImageが警告を表示します。

エクスポートしたZIPファイルを保存する ​

すべての画像の処理が終わると、画像が圧縮されたことを知らせる確認の通知が表示され、.zipファイルのダウンロードが自動的に始まります。

1枚の画像のエクスポート 圧縮した画像を1枚だけエクスポートする場合、TinyImageはその画像を.zipファイルにまとめません。単一の画像ファイルをそのままパソコンに保存できます。

Figmaからダウンロードしたファイルの保存 Figmaのデスクトップアプリを使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、WebブラウザでFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます（通常はパソコンのDownloadsフォルダに保存されます）。

エクスポートしたZIPファイルを開く ​

Figmaから.zipファイルをパソコンに保存したら、ファイルエクスプローラーで保存先のフォルダを開きます。エクスポートした.zipファイルをダブルクリックすると中身が展開され、圧縮したすべての画像を使えるようになります。