最初のEmailifyメールのFigmaフレームを作成する

Emailifyのメールデザインはすべて、専用の空のメール用Figmaフレームから始まります。このフレームにEmailifyのレイアウトやコンテンツを追加していきます。

既存のEmailifyコンテナフレームがないFigmaページで初めてEmailifyプラグインを実行すると、プラグインが自動的にNew Emailモーダルを開くので、どの方法で始めるかを選べます。

New EmailモーダルはBlankタブで開き、その後ろにTemplates、Layouts、AI Designerが続きます。ローカルで有効にした開発ビルドでは、最後に実験的なImportタブも表示されます。

Blankタブでメールに名前（例：「My Email Template」）を付け、Add New Emailify Containerボタンをクリックすると、空のメールフレームがFigmaページに追加されます。

プラグインが作成したこの専用のFigmaフレームは、EmailifyのFigmaプラグインに自動的にメールとして認識されます。プラグインのデザイン機能を使って、レイアウトやコンポーネントを追加し始められます。

プラグインを初めて使う場合やアイデアが欲しい場合は、New EmailモーダルからLayoutsを使ったり、Randomizeサブカテゴリを試したり、Figmaテンプレートを複製したり、AI Designer（ベータ版）を使ったりできます。

Emailifyコンテナを追加する ​

Emailifyコンテナフレームは必要なだけ追加できます。プラグインは各コンテナを別々のメールとして扱います。

すでにページにEmailifyフレームを追加している場合は、Emailifyプラグインのメール選択欄の横にある +（プラス）アイコンボタンをクリックすれば、いつでも新しい空のEmailifyフレームを追加できます。名前を入力するよう求められ、新しい空のメール用Figmaフレームが作成されます。

ゼロから始めたくない場合は、既存のEmailifyフレームをコピー＆ペーストすることもできます。あるEmailifyフレーム内のコンポーネントを別のフレームにコピー＆ペーストすることも可能です。

Emailifyフレームを選択する ​

メールを選択してコンポーネントを追加し始めるには、Emailifyプラグインのメール選択ドロップダウンを使うか、Figmaのキャンバス上で親フレームをクリックします。

選択ボックスでメールをクリックすると、Figmaページのフォーカスも選択したメールに自動的に移動します。

アクティブなメールフレームを確認する Emailifyのメール選択ドロップダウンに選択中として表示されているメール名が、常に現在選択されているメールを示しています。

メールのモバイルブレークポイント ​

EmailifyからエクスポートされるHTMLメールには「ブレークポイント」が1つあり、Figmaのデスクトップ用フレームの幅によって自動的に設定されます。たとえば、Emailifyフレームの幅が600pxの場合、599px以下でモバイル用のスタイルや上書き設定が表示され始めます。

一部のメールクライアントやアプリでは閲覧パネルの幅が700px未満になることがあるため、メールの幅は600px〜640pxにするのが一般的に推奨されています。閲覧パネルが狭いと、デスクトップのレイアウトではなくモバイル用のスタイルで表示されることがあります。Emailifyフレームの幅を600px〜640pxに保つと、デスクトップとタブレットのメールクライアントでデスクトップのレイアウトが安定して表示されます。