FigmaからHTMLメールを.zipファイルにエクスポートする

EmailifyプラグインでFigmaのメールデザインが完成したら、本番用のHTMLコードと画像アセットをエクスポートし、.zipパッケージとしてコンピューターにダウンロードできます。

デザインと設定に問題がなければ、EmailifyプラグインのヘッダーでExport HTMLボタンをクリックし、エクスポートしたいメールを選択して、必要に応じて件名とプリヘッダーテキストを追加すると、FigmaからメールをHTMLにエクスポートできます。

FigmaからHTMLメールを.zipファイルとしてエクスポート・ダウンロードする ​

デフォルトではHTML Emailオプションが選択されています。このオプションでは、メールがコンパイル済みの本番用メール（CSSはすべてインライン化済み、HTMLは圧縮済み）としてエクスポートされます。

準備ができたらExport To HTMLボタンをクリックすると、Figmaで選択したメールのHTMLエクスポートが始まります。

Emailifyでメールの処理が終わると、確認メッセージが表示されます。Download your .zip fileボタンをクリックすると、.zipファイルをダウンロードできます。

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

エクスポートは完了したのにZIPがダウンロードされない場合 ​

Emailifyのエクスポート完了画面が表示された場合、メールのエクスポート自体はすでに生成されています。まず、その完了画面からもう一度Download your .zip fileをクリックしてください。

次に、Figmaの使用環境に合ったダウンロード先を確認します。

  • Figmaデスクトップアプリでは、Figmaのネイティブの保存ダイアログを探し、ほかのウィンドウやデスクトップの裏に隠れていないか確認します。
  • WebブラウザでFigmaを使っている場合は、ブラウザのダウンロード一覧と、コンピューターのデフォルトのDownloadsフォルダを確認します。

それでもZIPが見つからない場合：

  1. 正しいダウンロード先を確認したうえで、もう一度だけエクスポートを実行します。
  2. 社内ネットワークを使っている場合は、ダウンロードの受け渡しがローカルで中断されている可能性があるため、別のWi-Fiネットワークや別のブラウザ・プライベートウィンドウを試してください。
  3. 無料Proトライアルを1回消費したのにファイルが届かなかった場合は、それ以上再試行せずに、製品名、Figmaデスクトップとブラウザのどちらを使っていたか、エクスポート完了画面またはダウンロードの案内が表示されない画面のスクリーンショットを添えて、[email protected]までメールでご連絡ください。

最後の無料Proトライアルでエクスポートが完了した場合も、エクスポート完了画面からZIPをダウンロードできるはずです。トライアルの一般的なルールについては、Hypermaticの無料Proトライアルを使うをご覧ください。トライアルの使用状況やアカウント固有の確認について個別のサポートが必要な場合は、Hypermaticの適切なサポート窓口を選ぶをご覧ください。

Emailifyは、デザイン内のテキストレイヤーにRTL（右から左）のスタイルが必要かどうかを自動で検出し、エクスポートしたメールのテキストコンテンツ領域にdir="rtl"のHTML属性を自動で適用します。

貼り付けたテキスト内の隠し文字 ​

Emailifyは、プレビューとエクスポートの際に、テキスト、ボタン、ナビゲーションのラベルで通常の英字や数字の間に誤って入ったゼロ幅接合子・ゼロ幅非接合子を取り除きます。また、印字されない制御コードや先頭のバイトオーダーマークも削除します。元のFigmaテキストレイヤーは編集されません。

他言語で使われる文字、絵文字、テキストの方向、意図的な余白に使われる文字は維持されます。送信したメールに予期しない文字がまだ表示される場合は、該当する単語をFigmaで入力し直して再エクスポートし、メールプラットフォームがUTF-8エンコーディングで送信しているか確認してください。キャンペーンを送信する前に、送信プラットフォームを通して最終的なメールをテストしてください。

エクスポートしたHTMLメールの.zipパッケージを解凍して表示する ​

Figmaから.zipファイルをコンピューターにダウンロードしたら、ファイルエクスプローラーで保存先のディレクトリを開きます。エクスポートした.zipファイルをダブルクリックすると、中身が解凍されます。

.zipファイルには、メールごとのindex.htmlファイルと、別フォルダの画像アセットが含まれています。ルートに生成されるindex.htmlファイルを使うと、エクスポートしたすべてのメールを1つのプレビューページで確認できます。クライアントやチームメンバー向けにNetlifyのプレビューリンクとしてアップロードすることもできます。

プレビューページのindex.htmlファイル、または各メールのフォルダ内にあるindex.htmlファイルをダブルクリックすると、Webブラウザでファイルが開き、エクスポートしたHTMLをプレビューできます。

プラグインからエクスポートしたメールの.zipファイルには、HTMLメールのプレーンテキスト版が自動で含まれます。エクスポートした.zipファイルを解凍してメールのフォルダを開くと、index.htmlファイルと同じ場所にplain-text-version.txtファイルがあります。