URLでPixelayが読み込まれない(Chrome拡張機能が必要)
PixelayでデザインとURLを比較するには、Pixelay Chromeプラグインをインストールしてください。バックグラウンドで動作し、ブラウザでプラグインのURLを検出するとPixelayを読み込みます。
Next.js(Vercel)のアプリが読み込まれない
PixelayでNext.jsのアプリを比較しようとすると、「Application error: a client-side exception has occurred」というメッセージが表示され、ページが読み込まれないことがあります。その場合は、Chrome拡張機能を使わない以下のリンクにPixelayのIDを入れてお試しください:https://pixelay.hypermatic.com/YOUR_PIXELAY_PROJECT_ID_HERE (例:https://pixelay.hypermatic.com/n4ok457201973 )
URLの有効期限
安全なリンクと画像は、180日間使われない(リンクが最後にアクセス・表示されてから180日が経過する)と自動的に削除されます。役目を終えたあとに、うっかり残ったままにならないようにするためです。
エクスポートした画像の周りに細い白線が出る
まれに、画像の端にうっすらとした細い白線が入ることがあります。レイヤーの位置が整数のピクセル値になっていない場合(たとえばY: 156.76やX: 56.3)、Figmaはこの動作によって、サブピクセルの線を自動的にエクスポートに含めてしまいます。この問題を解決するには、レイヤーの位置がすべて整数のピクセル値になっていることを確認してください。
CSSの「vh」単位を使っているWebサイト
WebサイトのCSSで要素に「vh」単位を使っている場合、Pixelayはビューポートの高さをFigmaのモックアップ全体の高さに合わせるため、一般的なブラウザの高さで見るよりもずっと縦長に表示されることがあります。
Figmaファイル用にまったく新しいURLを作成する
扱いに注意が必要な機能のため、クリックするボタンやアイコンは用意せず、プラグインの実行中にキーボードで「コナミコマンド」を入力したときだけ有効になるようにしています。
Up, Up, Down, Down, Left, Right, Left, Right, B, A
この順番でキーを入力すると、PixelayプラグインがFigmaファイル用にまったく新しいURLを作成します。たとえば複製したFigmaファイルでこれを入力すれば、元のファイルとは別の新しいURLを割り当てられます。
エクスポートした画像が粗くなる
Figmaの画像アセットが段階的に読み込まれている途中でデザインをアップロードすると、画像がFigmaファイル内で完全に読み込まれる前にエクスポートされるため、ピクセル化した見た目になることがあります。これを解決するには、すべての画像が100%読み込まれ、Figmaファイル内で鮮明に表示されていることを確認してから、Pixelayプラグインで画像をアップロードしてください。
さらに、「Downsizer」機能を使って画像塗りをレイヤーのサイズに合わせて縮小すると、ファイルサイズが小さくなり、Figmaファイル内での読み込みもずっと速くなります。
プラグインからデザインがアップロードされない、またはWebアプリで画像が読み込まれない
原因のひとつとして、インターネットサービスプロバイダー(ISP)がQUICプロトコルをブロックしている可能性があります。ブラウザまたはFigmaで開発者コンソールを開き、ERR_QUIC_PROTOCOL_ERRORというエラーメッセージが出ているかで確認できます。
この問題には、次の回避策があります。
- コンピューターのインターネット接続を、スマートフォンのWi-Fiホットスポット・テザリングに切り替える
- ブラウザでQUICを無効にする
NetskopeによってPixelayのフレームの読み込みがブロックされる
NetskopeがFirebaseのデータベースへのアクセスをブロックするという既知の問題があります。解決するには、(こちらのスレッドにあるとおり)firestore.googleapis.com:443を許可してください。
中国ではVPNが必要な場合がある
中国にお住まいの場合、アカウントサーバーが「グレート・ファイアウォール」によってブロックされている可能性があります。有効なキーを使っているのに有効化エラーが表示される場合は、おそらくVPNを使って解決する必要があります。
「An error occurred while loading the plugin environment」と表示される
これは、FigmaデスクトップアプリでUse Developer VMというデバッグ設定が誤って有効になっている場合に起こることがあります。オフになっているかを確認するには、Figmaキャンバス上の任意の場所を右クリックし、Plugins、Developmentの順にマウスカーソルを合わせて、Use Developer VMのチェックが外れていることを確認します。チェックが外れたら(横にチェックマークが付いていない状態になったら)、Figmaプラグインを再実行すると正常に動作するはずです。