無料Proトライアルが残っているのに圧縮を開始できない

free TinyImage Pro uses leftのメッセージは、残りのトライアル回数を示しています。回数が残っている間は、有料のキーは必要ありません。Figma Designファイルから画像を圧縮してダウンロードするには、TinyImageのCompressタブを開き、Exportボタンを使います。

1. Figmaでレイヤーを選択し、Figmaのプロパティパネルで、PNGやJPGなどのExport設定を追加します。
2. TinyImageでRefresh Exportable Figma Layersをクリックして、現在のエクスポート設定を読み込みます。リストの読み込みが終わるまで待ちます。
3. TinyImageのリストで、エクスポートしたい画像にチェックを入れます。Figmaのキャンバスでレイヤーを選択するだけでは不十分で、プラグイン内でエクスポート可能な画像に少なくとも1つチェックを入れる必要があります。
4. Exportをクリックして圧縮を開始します。Figmaの選択を変えてエクスポートボタンが使えなくなった場合は、リストを更新して、もう一度画像にチェックを入れてください。

ワークフロー全体については圧縮ガイドをご覧ください。トライアル回数をすべて使い切った場合、CompressにはProが必要です。Figma内の画像塗りを縮小するDownsizeは引き続き使えます。TinyImageの無料版とProも比較してみてください。

これらを確認してもExportが使えない場合は、TinyImageのウィンドウのスクリーンショット、残り回数のメッセージ、ブラウザ版とデスクトップアプリのどちらでFigmaを使っているかを添えて、[email protected]までご連絡ください。

圧縮するにはレイヤーにエクスポート設定が必要

TinyImageは、Figmaページ内のレイヤーに設定したエクスポート設定・形式を検出し、TinyImageプラグインで圧縮した画像としてエクスポートできるようにします。Figmaのエクスポート設定の基本と仕組みについて詳しくは、Figma公式のGuide to exports in Figmaをご覧ください。圧縮したいレイヤーには、（Figma右側の列でExport + をクリックして）エクスポート設定を追加してください。Figma標準のエクスポートと同じく、設定がないレイヤーはTinyImageを開いても表示されません。

PNGとPDFの圧縮には時間がかかる

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

GIFの色・グラデーションが少し粗く見える

GIFは通常のJPG・PNG画像とは異なり、最大256色までしか使えません。非常に細かい画像や色の変化が多いグラデーションを使っている場合、GIF形式のこの制限により、GIFの元になった画像ほどくっきりせず、色の再現性も同じにはならないのは想定どおりの動作です。

FigmaからPDFをエクスポートすると一部の要素が消えて紫色の四角形になる

これは既知のFigmaのバグで、画像の代わりに紫色のボックスが表示されることがあります。TinyImageはFigmaネイティブのPDFエクスポートを使っているため、TinyImageのエクスポートでも同じ問題が起こることがあります。

対処法のひとつは、問題のレイヤーが実際にメインのFigmaフレームの内側にネストされているかを確認することです。キャンバス上ではレイヤーが「見た目上」フレームの上に配置されていても、レイヤー自体はフレームの外にあることがあり、これがこの問題が起こる原因のひとつと考えられます。

GIFで透過が表示されない

GIFファイル形式は、不透明度0%か100%のどちらかにしか対応しておらず、その中間はありません。つまり、完全に不透明で表示される要素の背後を完全に透明な背景にしたアニメーションGIFは作れます。そのため、レイヤーは完全に透明か、そうでないかのどちらかである必要があります。不透明度が50%未満のレイヤーは透明になり、50%を超えるレイヤーは不透明になります。

最初の「refreshing/loading exportable layers」の読み込みに時間がかかる

残念ながらこれは既知の問題で、最近リリースされたFigmaのアップデートが原因です。現在は、プラグインが画像を使用・エクスポートする前に（たとえ1枚だけでも）、現在のページのすべての画像の読み込みが完了している必要があります。この新しい動作のため、大きなFigmaファイルで、ファイルを開いてすぐ、すべての画像が読み込まれる前にプラグインを実行したときに起こりやすくなります。対処法は2つあります。Figmaファイルで画像の読み込みが終わるまでもう少し待つか、ページが非常に大きく、エクスポートしたいレイヤーが少しだけなら、選択したレイヤーを新しいFigmaページにコピーしてそこでTinyImageを再実行すると、ずっと速くなります。

エクスポートした画像がFigmaでのサイズより1px大きい・小さい

Figmaには、フレームや画像のプロパティで「サブピクセル」を使うと、エクスポートした画像のサイズが切り上げ・切り捨てられて別のサイズになる、という奇妙なバグがあります。解決するには、エクスポートするフレームや親フレーム（アートボード）のプロパティからサブピクセルの値（例：1000.08）をなくし、整数（例：1000）にしてください。これで想定どおりの寸法で画像がエクスポートされるはずです。詳しくは、この問題について議論しているFigmaフォーラムのスレッドをご覧ください。

WindowsのFigmaデスクトップアプリでファイルの拡張子が空になる

Figmaデスクトップアプリ（Windowsのみ）には既知の問題があり、Figmaからの通常のファイルエクスポートでも発生します。ファイルを保存するときに「all files」というラベルが表示されることがありますが、そのまま「Save」をクリックして続ければ、正しい拡張子でファイルが保存され、パソコンにダウンロードした後に通常どおり開けるはずです。それでも拡張子が空のまま保存された場合は、ファイル名を変更して正しい拡張子を手動で追加してください。

PDFのエクスポートが遅い

PDFのエクスポートが非常に遅い場合、一部のコンテンツに高解像度・大きなサイズの画像塗りがあり、FigmaのPDF生成に時間がかかっていることが原因と考えられます。この問題には、TinyImageの「Downsizer」機能を使って、画像塗りをレイヤーのサイズに合わせて縮小できます。ファイルサイズが小さくなり、Figmaファイルでの読み込みも大幅に速くなります。Figmaページで画像塗りの縮小が終わったら、TinyImageを再実行し、プラグインでもう一度PDFをエクスポートすれば、ずっと速くなるはずです。

Safariには対応していない

ブラウザの互換性の問題により、TinyImageはSafariには対応していません。ほかのブラウザ（Chromeなど）やFigmaデスクトップアプリでプラグインを実行してください。

エクスポートした画像の周りに細い白線が出る

まれに、画像の端に薄く細い白い線が入ることがあります。レイヤーが整数ではないピクセル値（例：Y: 156.76やX: 56.3）に配置されていると、Figmaはこのようにエクスポートし、サブピクセルの線が自動的に含まれてしまいます。この問題を解決するには、レイヤーの位置がすべて整数のピクセル値になっていることを確認してください。

エクスポートした画像が粗くなる

Figmaの画像アセットが段階的に読み込まれている最中に画像やPDFをエクスポートすると、画像がFigmaファイルで完全に読み込まれる前にエクスポートされるため、粗く見えることがあります。これを解決するには、TinyImageプラグインで画像やPDFをエクスポートする前に、Figmaファイル内のすべての画像が100%読み込まれ、くっきり表示されていることを確認してください。さらに対策として、「Downsizer」機能を使うと、画像塗りをレイヤーのサイズに合わせて縮小できます。ファイルサイズが小さくなり、Figmaファイルでの読み込みも大幅に速くなります。

Adobe AcrobatでPDFを編集すると点線が表示される

PDFの編集中に、Acrobatアプリのサイドバーにある「Show bounding boxes」のトグルをオフにすると解決できます。アプリでPDFを開いて「Edit」モードに入ると、Adobeはデフォルトでバウンディングボックスの点線を表示しますが、「Show bounding boxes」のトグルをオフにすれば、ワンクリックで非表示にできます。

PDFのエクスポートでタイル画像が表示されない

現在、一部の「Tile」の画像塗りが圧縮したPDFに含まれないバグがあります。回避策として、Figmaで塗りを「Fit」または「Fill」に変更してください。

中国ではVPNが必要な場合がある

中国からご利用の場合、アカウントサーバーが「グレート・ファイアウォール」によってブロックされている可能性があります。有効なキーを使っているのに有効化のエラーが表示される場合は、VPNを使うと解決できる可能性が高いです。

「An error occurred while loading the plugin environment」と表示される

Figmaのデバッグ設定Use Developer VMが誤って有効になっていると、Figmaデスクトップアプリでこのエラーが発生することがあります。Figmaのキャンバス上の任意の場所を右クリックし、Plugins、Developmentの順にマウスを合わせて、Use Developer VMのチェックが外れていることを確認してください。チェックが外れたら（横にチェックマークが付いていない状態になったら）、Figmaプラグインを再実行すると正常に動作するはずです。