このページは、Figma MCPを通じてFigmaで直接Emailifyのメールを作成・編集するエージェント向けの正式な規約です。名前と構造には正確に従ってください。そうすることで、すべてのコンポーネントを元のメインコンポーネントにリンクしたまま、Emailifyが結果を認識できます。
エージェントは、周囲のドキュメントのインターフェースを読み込まずに、この規約のコンパクトなMarkdown版を読むことができます。
このFigmaに直接書き込むワークフローは、AI Designer(ベータ版)の一部です。機能の改善中は規約が変わる可能性があるため、エージェントはMCPのワークフローを始めるたびにこのページを読んでください。
エージェントへの指示
Codex、Claude Code、またはFigmaへの書き込み権限を持つほかのエージェントに、次の内容を貼り付けます。
Read and follow the current Emailify Figma MCP contract at https://docs.hypermatic.com/emailify/design/figma-mcp.md before writing to Figma. Create or edit the email using only linked Emailify component instances. Preserve protected content, component links, and existing instance overrides. For a new email, create a vertical auto-layout frame on the page or inside Figma sections named exactly "✉️ Emailify MCP: [email name]" and include at least one linked Emailify section, wrapper, hero, or code-only custom-code instance. Ordinary images and frame layers may also be direct children and export as images. Never detach Emailify instances. Create a separate sibling frame in the same page or section named exactly "✉️ Emailify MCP Metadata: [same email name]" with TEXT layers named exactly "Subject Line" and "Preheader Text", containing only their corresponding values. Replace the bracketed placeholders with the actual email name. When finished, tell me to open or refresh Emailify.メールフレームの規約
新しいメールごとに、以下のすべてのルールを満たすフレームを1つ作成します。
| プロパティ | 必須の値 |
|---|---|
| 名前 | ✉️ Emailify MCP: [email name] |
| 位置 | Figmaページ上に直接、またはFigmaのセクション内。通常のフレームやグループの中には置かない |
| レイアウト | 縦方向のAuto Layout |
| 直接の子要素 | リンクされたEmailifyコンポーネントのインスタンス。通常のエクスポート可能なビジュアルレイヤーを混在させることも可 |
| 使用できるEmailifyのルート | mj-section、mj-wrapper、mj-hero、またはEmailifyのCustom Codeテキストレイヤーのみを含むカスタムコードのインスタンス |
| コンテンツ | 有効なEmailifyコンポーネントのインスタンスが1つ以上 |
[email name]は実際の名前に置き換えます。✉️ Emailify MCP:の後ろのテキストがEmailifyのメール名になるため、空にはできません。
Emailifyのインスタンスをデタッチしたり、その中身を素のレイヤーとして作り直したりしないでください。コンポーネントの内容はインスタンスのオーバーライドで変更してください。そうすれば、デザインシステムの更新が、組み立てたすべてのメールに引き続き反映されます。通常の画像、フレーム、グループなどのビジュアルレイヤーは、メールフレームの直下に配置できます。Emailifyはこれらを編集可能なメールコンテンツではなく、画像としてエクスポートします。
件名とプリヘッダー
メールのメタデータ用に、同じページまたはセクション内に兄弟フレームを別に作成します。そのメール名は、メールフレームのものと完全に一致させる必要があります。
| プロパティ | 必須の値 |
|---|---|
| フレーム名 | ✉️ Emailify MCP Metadata: [same email name] |
| 件名のレイヤー | Subject Lineという名前で、件名だけを含むTEXTレイヤー |
| プリヘッダーのレイヤー | Preheader Textという名前で、プリヘッダーだけを含むTEXTレイヤー |
このメタデータ用フレームは、メールフレームの外に置いてください。テキストの値には、ラベル、接頭辞、メモ、別案のコピーなどを追加しないでください。
Emailifyは、プラグインを開いたときや更新したときに、各フィールドを個別に取り込みます。キャンバス上のメタデータが変更されていなければ、その後Emailify内で手動で編集した内容は上書きされません。エージェントがキャンバス上のメタデータの値を変更した場合は、次の更新時にEmailifyがその変更されたフィールドを取り込みます。
既存のメールを編集する
すでにこの規約に従っているメールを更新する場合:
- 可能な限り、既存のリンクされたインスタンスをその場で変更します。
- Emailifyのコンポーネントを追加したり並べ替えたりするときは、リンクを維持します。通常のビジュアルレイヤーを一緒に置くこともでき、それらは画像としてエクスポートされます。
- メールフレームの名前と、縦方向のAuto Layoutの構造を維持します。
- ブリーフで明示的に変更が指示されていない限り、既存のコンポーネントのリンクとインスタンスのオーバーライドを維持します。
- ロックされたレイヤーや、名前が
🔒で始まるレイヤーは、決して変更、非表示、削除しないでください。 - ブリーフで正確な差し替え用のURLが指定されていない限り、既存のリンクを維持します。
- 件名やプリヘッダーが変わったときは、対応するメタデータ用フレームを更新します。
取り込みと検証
エージェントの作業が終わったら、Emailifyを開くか更新します。Emailifyは、通常のmj-bodyメタデータを適用し、一致する件名とプリヘッダーの値を取り込む前に、対象のフレームを検証します。
フレームが通常のフレームやグループの中にネストされている、空である、縦方向に並んでいない、エクスポートできないレイヤーを含んでいる、またはリンクされたEmailifyのsection、wrapper、hero、コードのみのカスタムコードコンポーネントを1つも含んでいない場合、Emailifyはそのフレームを拒否します。この拒否は意図的なものです。通常のFigmaレイアウトが誤ってEmailifyのメールに変換されることがあってはならないためです。
トラブルシューティング
| 問題 | 確認すること |
|---|---|
| メールが認識されない | ✉️ Emailify MCP:の名前が正確か、ページまたはセクション上の位置、縦方向のAuto Layout、リンクされたEmailifyのインスタンスが直接の子要素として1つ以上あるかを確認します。 |
| 件名やプリヘッダーが反映されない | メタデータ用フレームが同じメール名を使っていて、テキストレイヤーの名前が正確にSubject LineとPreheader Textになっているかを確認します。 |
| コンポーネントのリンクが外れている | デタッチされたレイヤーや作り直されたレイヤーを、元のEmailifyメインコンポーネントのインスタンスに置き換えます。 |
| 法的な文言や固定のコンテンツが変更された | レイヤーをロックするか、名前の先頭に🔒を付けてから、メインコンポーネントで承認済みのコンテンツに戻します。 |
| Emailifyで手動入力した値が変わらない | キャンバス上の対応するメタデータのテキストを編集してから、もう一度Emailifyを更新します。 |
Figmaの書き込みツールを使えない場合は、AI Designerでメールを作成するで説明している、検証済みのJSONインポートのワークフローを使ってください。
カスタムコードのコンポーネントは、たとえば条件付きのテンプレートロジックを開始・終了するために、メールのセクションの間に直接置くことができます。メインコンポーネントとそのインスタンスのどちらにも、1つ以上のCustom Codeテキストレイヤーだけが含まれている必要があります。空のコンポーネント、ネストされたフレーム、通常のテキスト、ビジュアルコンテンツが混在したものは対象外です。これらのコンポーネントはマスターにリンクしたままにしてください。
Figmaのセクションには、ネストされたセクションも含め、メールフレームを入れることができます。可能な限り、各メタデータ用フレームは同じセクション内でメールと並べて置いてください。Emailifyは同じコンテナ内にある一致するメタデータを優先しますが、ページ上の別の場所にある既存の一致するメタデータにも引き続き対応しています。通常のフレームやグループは、メールのコンテナにはなりません。