メールをPDFと個別のJPG画像にエクスポートする
動画チュートリアル:メールをPDFにエクスポートする
この動画では、FigmaのEmailifyプラグインからHTMLメールをPDFファイルにエクスポートする方法を紹介しています。
Emailifyのエクスポートパネルで、ドロップダウンリストからPDF Previewsオプションを選択します。準備ができたらExport To PDFボタンをクリックすると、Figmaで選択したメールのPDFエクスポートが始まります。完了したら、確認画面から.zipファイルをダウンロードしてください。
クリックできるリンクをPDFに追加する
Add Clickable Links to PDFトグルを有効にすると、メール内の<a href>リンクのクリック・タップ領域がエクスポートしたPDFでも維持されます。
代替テキストのコメントを追加する
Add Image Alt Text Comments to PDFトグルを有効にすると、alt属性を持つ画像の代替テキストがPDFのコメントとして追加されます。
エクスポートには、メールの静的なJPG画像も含まれます。
PDFエクスポートからレイヤーを非表示にする
通常のHTMLエクスポートには影響を与えずに、特定のコンテンツだけをPDFプレビューから除外したい場合は、非表示にしたいFigmaレイヤーの名前の任意の位置に[pdf-hide]を追加します。
たとえば、レイヤー名をFooter Snippets [pdf-hide]やLegal Placeholder [pdf-hide]にすると、そのレイヤーはPDF Previewsでのみ非表示になります。
Emailifyがこのタグを確認するのはPDF Previewsの生成時だけです。[pdf-hide]を含むレイヤーがない場合、エクスポート用の一時的な複製を作る処理は丸ごとスキップされます。
この機能は、動的なスニペットの行、コンテンツブロックのプレースホルダー、コンプライアンス用のPDFに載せるべきでない社内向けのレイヤーなどに便利です。
Emailifyは、PDF Previewsのエクスポートを生成している間だけタグ付きのレイヤーを一時的に非表示にし、その後、エクスポート用の一時的なコピーを自動で削除します。元のFigmaレイヤーは変更されず、ほかの方法で非表示にしない限り、同じレイヤーはHTMLには通常どおりエクスポートされます。
メールをPDFにエクスポートする(グレースケールのワイヤーフレームとして)
動画チュートリアル:PDFをグレースケールのワイヤーフレームとしてエクスポートする
この動画では、FigmaのEmailifyプラグインから、メールをグレースケールのワイヤーフレームのプレビューとしてPDFファイルにエクスポートする方法を紹介しています。
PDFプレビューを「Lorem Ipsum」のテキスト、グレースケールの色、空白の画像でエクスポートしたい場合は、必要に応じてEnable Wireframe Mode設定をオンにします。メールデザインが自動的に要素を絞り込んだプレビューに変換されるため、クライアントから初期段階のフィードバックをもらうときなどに便利です。
エクスポートには、メールの静的なJPG画像も含まれます。