--- url: "/de/emailify/design/figma-mcp.md" description: "Die genauen Regeln für Frames, Komponenten und Metadaten, die Agents beim direkten Erstellen oder Bearbeiten von Emailify-E-Mails in Figma einhalten müssen." --- # Emailify mit Figma MCP verwenden > Die genauen Regeln für Frames, Komponenten und Metadaten, die Agents beim direkten Erstellen oder Bearbeiten von Emailify-E-Mails in Figma einhalten müssen. Diese Seite ist der maßgebliche Vertrag für Agents, die Emailify-E-Mails direkt über Figma MCP erstellen oder bearbeiten. Halte dich exakt an die Namen und die Struktur, damit Emailify das Ergebnis erkennt und jede Komponente mit ihrer ursprünglichen Hauptkomponente verknüpft bleibt. Agents können die kompakte [Markdown-Version dieses Vertrags](/de/emailify/design/figma-mcp.md) lesen, ohne die umgebende Oberfläche der Dokumentation zu laden. > **Note:** Dieser direkte Workflow in Figma ist Teil von AI Designer (BETA). Der Vertrag kann sich ändern, während die Funktion verbessert wird. Agents sollten diese Seite deshalb vor jedem MCP-Workflow lesen. ## Anweisung für den Agent {#agent-instruction} Füge Folgendes in Codex, Claude Code oder einen anderen Agent mit Schreibzugriff auf Figma ein: ```text 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. ``` ## Vertrag für den E-Mail-Frame {#email-frame-contract} Erstelle für jede neue E-Mail einen Frame, der alle folgenden Regeln erfüllt: | Eigenschaft | Erforderlicher Wert | | --- | --- | | Name | `✉️ Emailify MCP: [email name]` | | Position | Direkt auf der Figma-Seite oder in Figma-Sections; niemals in einem gewöhnlichen Frame oder einer Gruppe | | Layout | Vertikales Auto Layout | | Direkte untergeordnete Ebenen | Verknüpfte Instanzen von Emailify-Komponenten, optional gemischt mit gewöhnlichen, exportierbaren visuellen Ebenen | | Zulässige Emailify-Wurzelelemente | `mj-section`, `mj-wrapper` oder `mj-hero`; Custom-Code-Instanzen, die nur Custom-Code-Textebenen von Emailify enthalten | | Inhalt | Mindestens eine gültige Instanz einer Emailify-Komponente | Ersetze `[email name]` durch den tatsächlichen Namen. Der Text nach `✉️ Emailify MCP:` wird zum Namen der E-Mail in Emailify und darf nicht leer sein. Löse Emailify-Instanzen nicht von ihrer Komponente und baue ihre Inhalte nicht als einfache Ebenen nach. Ändere Komponenteninhalte über Instanz-Overrides, damit Aktualisierungen des Designsystems weiterhin in jede zusammengesetzte E-Mail übernommen werden. Gewöhnliche Bilder, Frames, Gruppen und andere visuelle Ebenen dürfen direkt im E-Mail-Frame liegen. Emailify exportiert sie als Bilder statt als bearbeitbaren E-Mail-Inhalt. ## Betreffzeile und Preheader {#subject-line-and-preheader} Erstelle für die Metadaten der E-Mail einen separaten Frame auf derselben Ebene, in derselben Seite oder Section. Der E-Mail-Name darin muss exakt mit dem des E-Mail-Frames übereinstimmen: | Eigenschaft | Erforderlicher Wert | | --- | --- | | Frame-Name | `✉️ Emailify MCP Metadata: [same email name]` | | Betreff-Ebene | Eine TEXT-Ebene namens `Subject Line`, die nur den Betreff enthält | | Preheader-Ebene | Eine TEXT-Ebene namens `Preheader Text`, die nur den Preheader enthält | Lege diesen Metadaten-Frame außerhalb des E-Mail-Frames ab. Füge den Textwerten keine Beschriftungen, Präfixe, Notizen oder alternativen Texte hinzu. Emailify importiert jedes Feld einzeln, wenn das Plugin geöffnet oder aktualisiert wird. Unveränderte Metadaten auf dem Canvas überschreiben keine späteren manuellen Änderungen in Emailify. Ändert der Agent einen Metadatenwert auf dem Canvas, importiert Emailify dieses geänderte Feld bei der nächsten Aktualisierung. ## Eine vorhandene E-Mail bearbeiten {#editing-an-existing-email} Wenn du eine E-Mail aktualisierst, die diesem Vertrag bereits folgt: - Ändere vorhandene verknüpfte Instanzen nach Möglichkeit direkt. - Halte Emailify-Komponenten verknüpft, wenn du sie hinzufügst oder neu anordnest. Gewöhnliche visuelle Ebenen dürfen daneben bestehen und werden als Bilder exportiert. - Behalte den Namen des E-Mail-Frames und die vertikale Auto-Layout-Struktur bei. - Behalte vorhandene Komponentenverknüpfungen und Instanz-Overrides bei, sofern das Briefing sie nicht ausdrücklich ändert. - Ändere, verstecke oder entferne niemals eine gesperrte Ebene oder eine Ebene, deren Name mit `🔒` beginnt. - Behalte vorhandene Links bei, sofern das Briefing keine genaue Ersatz-URL angibt. - Aktualisiere den zugehörigen Metadaten-Frame, wenn sich Betreffzeile oder Preheader ändern. ## Übernahme und Validierung {#adoption-and-validation} Wenn der Agent fertig ist, öffne oder aktualisiere Emailify. Emailify prüft den Frame, bevor es seine normalen `mj-body`-Metadaten anwendet und die passenden Werte für Betreff und Preheader importiert. Emailify lehnt den Frame ab, wenn er in einem gewöhnlichen Frame oder einer Gruppe verschachtelt ist, leer ist, nicht vertikal angeordnet ist, eine Ebene enthält, die sich nicht exportieren lässt, oder keine verknüpfte Section-, Wrapper-, Hero- oder reine Custom-Code-Komponente von Emailify enthält. Die Ablehnung ist gewollt: Gewöhnliche Figma-Layouts sollen niemals versehentlich in Emailify-E-Mails umgewandelt werden. ## Fehlerbehebung {#troubleshooting} | Problem | Prüfen | | --- | --- | | E-Mail wird nicht erkannt | Prüfe den exakten Namen `✉️ Emailify MCP:`, die Position auf der Seite oder in einer Section, das vertikale Auto Layout und mindestens eine verknüpfte Emailify-Instanz als direkte untergeordnete Ebene. | | Betreff oder Preheader fehlt | Prüfe, ob der Metadaten-Frame denselben E-Mail-Namen verwendet und die Textebenen exakt `Subject Line` und `Preheader Text` heißen. | | Eine Komponente ist nicht mehr verknüpft | Ersetze die gelösten oder nachgebauten Ebenen durch eine Instanz der ursprünglichen Emailify-Hauptkomponente. | | Rechtliche oder feste Inhalte wurden geändert | Sperre die Ebene oder setze `🔒` vor ihren Namen und stelle dann den freigegebenen Inhalt in der Hauptkomponente wieder her. | | Ein manueller Wert in Emailify hat sich nicht geändert | Bearbeite den zugehörigen Metadaten-Text auf dem Canvas und aktualisiere Emailify dann erneut. | Stehen keine Schreibwerkzeuge für Figma zur Verfügung, nutze den validierten JSON-Import-Workflow, der unter [E-Mails mit AI Designer erstellen](/de/emailify/design/ai-designer) beschrieben ist. Custom-Code-Komponenten können direkt zwischen E-Mail-Sections liegen, zum Beispiel um bedingte Vorlagenlogik zu öffnen und zu schließen. Sowohl die Hauptkomponente als auch ihre Instanz dürfen nur eine oder mehrere Custom-Code-Textebenen enthalten. Leere Komponenten, verschachtelte Frames, gewöhnlicher Text und gemischte visuelle Inhalte sind nicht zulässig. Halte diese Komponenten mit ihren Hauptkomponenten verknüpft. Figma-Sections können deine E-Mail-Frames enthalten, auch in verschachtelten Sections. Lege jeden Metadaten-Frame nach Möglichkeit neben seiner E-Mail in derselben Section ab. Emailify bevorzugt passende Metadaten im selben Container; vorhandene passende Metadaten an anderer Stelle auf der Seite werden aber weiterhin unterstützt. Gewöhnliche Frames und Gruppen sind keine E-Mail-Container.