FigmaからPDFをエクスポートするとレイヤーが消えて紫色の四角形になる
これは既知のFigmaのバグで、画像の代わりに紫色のボックスが表示されることがあります。PitchdeckはFigmaネイティブのPDFエクスポートを使っているため、Pitchdeckのエクスポートでも同じ問題が起こることがあります。
対処法のひとつは、問題のレイヤーが実際にメインのFigmaフレームの内側にネストされているかを確認することです。キャンバス上ではレイヤーが「見た目上」フレームの上に配置されていても、レイヤー自体はフレームの外にあることがあり、これがこの問題が起こる原因のひとつと考えられます。
1つのプレゼンテーションで異なるサイズのフレームやスライドを使う
引き続き、サイズは1つに統一することをおすすめします。16:9のフレームやネイティブのFigma Slides(たとえば1280x720や1920x1080)を使うと、モニター、PowerPoint、Google Slidesで最も安定した結果が得られます。
PowerPoint互換のエクスポートに異なるサイズのスライドが含まれる場合、Pitchdeckは最も多いサイズをプレゼンテーションのサイズとし、それ以外のスライドはトリミングせずに比率を保ってそのサイズに収めます。Use Editable Textを有効にしている場合、対応するテキストとシェイプは、収めたサイズのままPowerPoint、Keynote、Google Slidesで編集できます。[PNG] を付けたレイヤーなど、画像として出力する必要があるコンテンツは画像のままです。編集可能なテキストを無効にしている場合、サイズの異なるスライドはそれぞれスライド全体が1枚の画像としてエクスポートされます。
Figmaファイルやページを複製するとURL・パスワードも複製される
Figmaファイル(またはFigmaファイル内の「ページ」)を「複製」すると、元のURL・パスワードも一度引き継がれます。新しいURLが必要な場合は、空のファイルやページを新しく作るのがおすすめです。
これにより、Figmaファイル内のページごとに別々のプレゼンテーション資料を管理できます(Figmaファイルを完全に分けて管理することもできます)。この方法なら、プレゼンテーションURLをいくつでも作成できます。
Google Slidesは「カスタム」のGoogle Fontsにしか対応していない
Figmaでサードパーティのフォントを使ってスライドをデザインし、Google Slides用にプレゼンテーションをエクスポートする場合、ご注意ください。Google SlidesはGoogle Fontsで提供されているフォントにしか対応していないため、そのフォントを表示できません(パソコンにインストールされていても同様です)。
エクスポートしたPDFやPPTXファイルのダウンロードボタンが動作しない
プラグインのエクスポート確認画面でDownloadボタンをクリックしてもファイルがダウンロードされない場合は、Figmaアプリを再起動して(ブラウザ版の場合はFigmaのタブを閉じて開き直して)から、プラグインを再実行してファイルをもう一度エクスポートすると解決するはずです。
エクスポート中にGIFや動画を読み込めなかった
PowerPoint互換のエクスポート中に外部のGIFやMP4をダウンロードまたはデコードできない場合、Pitchdeckはそのレイヤーのアートワークを静止画像として使い、残りのスライドのエクスポートを続けます。エクスポートの確認画面には警告と、該当するレイヤーへのリンクが表示されます。静止画像はFigmaのアートワークを保持しますが、読み込めなかったメディアのアニメーションや再生は含まれません。
メディアを復元するには、そのURLを開くと(サインインページを経由せずに)GIFやMP4ファイルが直接開くことを確認してから、PitchdeckでURLを更新して再度エクスポートしてください。MP4の埋め込みは、Include MP4 Video URL Embedsを有効にしたPowerPointのエクスポートに適用されます。
エクスポートを準備できなかった
Pitchdeckがエクスポートの設定を保存できない場合、ファイルを生成する前に処理を中止し、エクスポートボタンを再び使える状態に戻します。もう一度エクスポートしてみてください。問題が続く場合は、プラグインを閉じて開き直してください。この準備段階で失敗したエクスポートは、Proトライアルのエクスポート回数として消費されません。
PPTXファイルのエクスポートで編集可能なテキストの位置がずれる
多くの場合、Figmaでテキストレイヤーのバウンディングボックスに固定の幅・高さが設定されていて、それがテキストの内容より小さいために、位置のずれが生じています。Figmaでテキストレイヤーのリサイズオプションを「Auto Height」に設定すると解決するはずです。
もうひとつのよくある原因は、Figmaの1つのテキストブロック内に、複数の行の高さやフォントサイズが混在しているテキストレイヤーです。残念ながら、Figmaと違ってPPTXファイルではテキストレイヤーごとに行の高さを1つしか指定できず(上書きされます)、1つのテキストブロックに複数のフォントサイズがあると、PPTXファイルでの縦方向の配置も崩れてしまいます。
この問題を解決するには、Figmaのテキストレイヤー内で行の高さやフォントサイズが異なる部分を別のレイヤーに分け、ほかのテキストレイヤーとの関係で必要な位置に配置します。こうすれば、各テキストブロックの行の高さとフォントサイズがそれぞれ1つになります。
エクスポートした画像が粗くなる
Figmaの画像アセットが段階的に読み込まれている最中にプレゼンテーションをエクスポートすると、画像がFigmaファイルで完全に読み込まれる前にエクスポートされるため、粗く見えることがあります。これを解決するには、Pitchdeckプラグインでプレゼンテーションをエクスポートする前に、Figmaファイル内のすべての画像が100%読み込まれ、くっきり表示されていることを確認してください。
さらに対策として、TinyImage Figmaプラグインの「Downsizer」機能を使うと、画像塗りをレイヤーのサイズに合わせて縮小できます。ファイルサイズが小さくなり、Figmaファイルでの読み込みも大幅に速くなります。
Google Slidesの画像サイズとPPTXファイルの上限
エクスポート設定でGoogle Slidesオプションを選ぶと、Pitchdeckはラスター画像の長辺を1400pxまでに制限します。これにより.pptxファイルのサイズを抑え、Google Slidesにインポートするときの変換エラーを減らせます。
それでもエクスポートしたプレゼンテーションがGoogle Slidesには大きすぎる場合は、資料を小さなファイルに分割するか、元の画像塗りのサイズを小さくしてから、もう一度エクスポートしてください。
Figmaプロトタイプの埋め込みをレイヤーいっぱいに拡大する
Pitchdeckで使うFigmaのレイヤー・埋め込みの縦横比によっては、Pitchdeckプラグインに貼り付けてレイヤーに埋め込む前に、Figmaプロトタイプの拡大縮小オプションを変えてからプロトタイプのURLをコピーする必要があります。
Figmaプロトタイプを開き、ヘッダー右上のOptionsドロップダウンをクリックしてFit Widthの拡大縮小オプションを選んでから、Pitchdeckでレイヤーの埋め込みに使うプロトタイプのURLをコピーしてください。こうすると、Figmaプロトタイプの埋め込みがFigmaレイヤーのサイズに合わせて拡大・縮小されます(Figmaレイヤーの縦横比がFigmaプロトタイプの縦横比と一致している場合)。
Fit Widthオプションが見つからない場合は、Figmaプロトタイプの埋め込みURLのscaling=パラメーターを手動でscaling=scale-down-widthに変更してみてください。これで、Figmaプロトタイプの表示にFit Widthの拡大縮小オプションが使われるはずです。
プラグインからスライドがアップロードされない、またはWebアプリで画像が読み込まれない
原因のひとつとして、ISP(インターネットサービスプロバイダー)がQUICプロトコルをブロックしている可能性があります。ブラウザやFigmaで開発者コンソールを開き、ERR_QUIC_PROTOCOL_ERRORというエラーメッセージが表示されているかで確認できます。
この問題には、次の回避策があります。
- パソコンのインターネット接続を、スマートフォンのWi-Fiホットスポット・テザリングに切り替える
- ブラウザでQUICを無効にする
Figmaで「100% of memory used」になるメモリリークの問題
まれに発生する既知のバグとして、特定の複雑なレイヤーからSVG画像データを抽出しようとすると、Figmaのメモリが不足することがあります。対象となるのは主に、複数のテキストレイヤーを含むグループや、1つの複雑なテキストレイヤー(多くの場合カスタムフォントを使用しており、Figmaでより多くのメモリを必要とするもの)です。
このエラーが発生すると、Pitchdeckプラグインは画面下部に通知を表示し、どのフレームのどのレイヤーがメモリの問題の原因になっているかを具体的に知らせます。
また、Figmaの警告ダイアログで「reload page」をクリックし、ページが再読み込みされたら、問題のレイヤー名の先頭に[PNG]を追加するよう案内されます(例:「[PNG] My original layer name」)。こうすると、Pitchdeckプラグインはそのレイヤーについて、SVG画像データの代わりにPNG画像データを取得するようになり、メモリの問題が解決します。
エクスポートした画像の周りに細い白線が出る
まれに、画像の端に薄く細い白い線が入ることがあります。レイヤーが整数ではないピクセル値(例:Y: 156.76やX: 56.3)に配置されていると、Figmaはこのようにエクスポートし、サブピクセルの線が自動的に含まれてしまいます。この問題を解決するには、レイヤーの位置がすべて整数のピクセル値になっていることを確認してください。
.pptxエクスポートの編集可能なテキストでグラデーションに対応していない
Figmaのデザインでテキストレイヤーにグラデーションの塗りを使っている場合、Pitchdeckは最初のグラデーションの塗りの最初の色を、.pptxエクスポートでの「単色」として自動的に使います。
.mp4動画ファイルのホスト先
動画のホスティングにはBackblaze B2がおすすめです。無料アカウントに登録すると10gbの無料ストレージを使え、公開ストレージバケットを作成すれば、アップロードした動画ファイルのリンクをコピー&ペーストして、その.mp4へのリンクをPitchdeckに貼り付けられます。
ほかによく使われるファイルホスティングとしてDropboxもあります。.mp4ファイルをアップロードし、そのリンクをPitchdeckプラグインで使えます。Pitchdeckは?dl=0を?raw=1に自動で変更し、リンクが(Dropbox Webサイトのプレーヤーではなく)動画ファイルを直接指すようにします。
Figmaドキュメントに埋め込んだGIF
FigmaはGIFのエクスポートにネイティブ対応していないため、Figmaのデザイン内に「直接」追加したGIFはアニメーションしません。アニメーションGIFを使うには、PitchdeckプラグインでURLとして追加してください。
WindowsのFigmaデスクトップアプリでファイルの拡張子が空になる
Figmaデスクトップアプリ(Windowsのみ)には既知の問題があり、Figmaからの通常のファイルエクスポートでも発生します。ファイルを保存するときに「all files」というラベルが表示されることがありますが、そのまま「Save」をクリックして続ければ、正しい拡張子でファイルが保存され、パソコンにダウンロードした後に通常どおり開けるはずです。それでも拡張子が空のまま保存された場合は、ファイル名を変更して正しい拡張子を手動で追加してください。
Google Slidesの100mbのファイルサイズ上限
Google Slidesでは、インポートするPPTXファイル1つあたり100mbの上限があります。回避策として、インポートしたいPPTXファイルを(こうしたツールなどで)小さなファイルに分割し、Google Slidesのファイルに1つずつアップロードする方法があります(これでアップロードサイズの上限を回避しつつ、すべてのスライドを1つのファイルにまとめられます)。
PDFのエクスポートが遅い(または固まる)
PDFのエクスポートが非常に遅い場合、一部のコンテンツに高解像度・大きなサイズの画像塗りがあること、またはレイヤーに大きな「Layer Blur」エフェクトが多数あることが原因と考えられます。どちらも、FigmaのPDF生成に時間がかかる原因になります。
画像塗りの問題には、TinyImageの「Downsizer」機能を使って、画像塗りをレイヤーのサイズに合わせて縮小できます。ファイルサイズが小さくなり、Figmaファイルでの読み込みも大幅に速くなります。
「Layer Blur」の問題には、該当するレイヤーをフラットな画像レイヤーに変換できます。Figmaでレイヤーを右クリック -> Copy/Paste As -> Copy as PNGを選び、Figmaのキャンバスにレイヤーを貼り付けます(MacではCMD + V、WindowsではCTRL + V)。次に、そのレイヤーをFigmaのフレーム・スライド内の同じ位置に配置してから、フラットなPNGとしてコピー&ペーストした元のレイヤーを非表示にするか削除します。
Figmaページで画像塗りの縮小や、「Blur」エフェクトのあるFigmaレイヤーのフラットな画像への置き換えが終わったら、Pitchdeckを再実行し、プラグインでもう一度PDFをエクスポートすれば、ずっと速くなるはずです。
Adobe AcrobatでPDFを編集すると点線が表示される
PDFの編集中に、Acrobatアプリのサイドバーにある「Show bounding boxes」のトグルをオフにすると解決できます。アプリでPDFを開いて「Edit」モードに入ると、Adobeはデフォルトでバウンディングボックスの点線を表示しますが、「Show bounding boxes」のトグルをオフにすれば、ワンクリックで非表示にできます。
PNG画像と背景の透明化の強制
Pitchdeckは、レイヤーに完全に透明な部分があるかを自動で検出し、ある場合はPNGを、ない場合はJPGをデフォルトのエクスポート形式に設定します。Figmaのレイヤー名に [PNG] を追加するか、Figma右側の列で任意のレイヤーのエクスポート形式をJPGまたはPNGに設定すると、この設定を上書きできます。
.pptxエクスポートで不足しているカスタムフォントをインストールする
Figmaで使ったフォントがインストールされていないパソコンでエクスポートした.pptxファイルを開くと、テキストの見た目がFigmaのデザインと変わってしまいます。必要なフォントをインストールするか、不足しているフォントを必要に応じて置き換えてください。
プレゼンテーションURLは180日で期限切れになる
プレゼンテーションURLは、180日間アクセスがない場合(最後にリンクがアクセス・閲覧されてから180日後)に自動的に期限切れになります。期限切れになったURLを再び有効にするには、FigmaファイルでPitchdeckを実行し、Upload Web Presentationをクリックします。
NetskopeによってPitchdeck Webアプリの読み込みがブロックされる
NetskopeがFirebaseデータベースへのアクセスをブロックする既知の問題があります。解決するには、(こちらのスレッドにあるように)firestore.googleapis.com:443を許可してください。
中国ではVPNが必要な場合がある
中国からご利用の場合、アカウントサーバーが「グレート・ファイアウォール」によってブロックされている可能性があります。有効なキーを使っているのに有効化のエラーが表示される場合は、VPNを使うと解決できる可能性が高いです。
「An error occurred while loading the plugin environment」と表示される
Figmaのデバッグ設定Use Developer VMが誤って有効になっていると、Figmaデスクトップアプリでこのエラーが発生することがあります。Figmaのキャンバス上の任意の場所を右クリックし、Plugins、Developmentの順にマウスを合わせて、Use Developer VMのチェックが外れていることを確認してください。チェックが外れたら(横にチェックマークが付いていない状態になったら)、Figmaプラグインを再実行すると正常に動作するはずです。