MCP-Verbindung
AI to Figma: KI-generierte UI aus Claude oder Cursor nach Figma senden
Verbinde dein KI-Tool per MCP mit HTML to Frames. Die Seiten, die es baut, landen als bearbeitbare Auto-Layout-Ebenen in deinem geöffneten Plugin.
- Funktioniert mit Claude Code, Claude Desktop, Cursor und anderen MCP-Clients
- Drei Tools: import_html, import_url, import_status
- Token wird nur als Hash gespeichert
Bald in der Figma Community
AI to Figma ist eher ein Workflow-Problem als ein Generierungsproblem. Tools wie Claude und Cursor erzeugen in wenigen Minuten eine überzeugende Landingpage oder ein Dashboard in HTML, aber dieses Ergebnis lebt in einer Code-Datei oder einer Browser-Vorschau. Um es mit einem Team zu reviewen, mit einem bestehenden Designsystem zu kombinieren oder visuell weiterzuentwickeln, muss es in Figma sein – als Ebenen, nicht als Screenshot.
HTML to Frames, das Figma-Plugin von EUREKA!, bietet genau dafür eine MCP-Verbindung. Öffne den AI-Tab des Plugins, kopiere den Token und das angezeigte Setup-Snippet und füge es in Claude Code, Claude Desktop, Cursor oder einen beliebigen MCP-Client ein. Dein KI-Tool erhält dann drei Tools: import_html, um selbst geschriebenes HTML zu senden (bis 2 MB), import_url, um eine Seite per Adresse zu importieren, und import_status, um den Stand eines Auftrags abzufragen.
Ruft die KI eines davon auf, landet die Seite in deinem geöffneten HTML to Frames Plugin und wird mit deinem eigenen Plan und deinen Einstellungen importiert. Du bekommst dasselbe Ergebnis wie bei jedem anderen Import: bearbeitbaren Text, Vektoren, Bilder, verifiziertes Auto Layout und bei Pro Variablen, Styles und Komponenten.
Das ist nützlich für Designer, die mit KI prototypen und das Ergebnis von Hand verfeinern wollen, für Entwickler, die UI generieren und ans Design übergeben müssen, und für Teams, deren KI-Entwürfe sich in die bestehenden Styles einfügen sollen.
Der Leitfaden KI-generierte UI per MCP nach Figma zeigt eine komplette Sitzung. Was die Umwandlung erhält, liest du unter HTML to Figma; wie Token und Daten behandelt werden, steht unter Sicherheit.
Ein KI-Tool mit Figma verbinden
- 01
AI-Tab im Plugin öffnen
Starte HTML to Frames in Figma und wechsle in den AI-Tab, um deinen Verbindungs-Token zu erhalten.
- 02
Setup in dein Tool kopieren
Füge das Copy-and-paste-Setup in Claude Code, Claude Desktop, Cursor oder einen anderen MCP-Client ein.
- 03
Die KI eine Seite senden lassen
Die KI ruft import_html mit dem von ihr geschriebenen HTML oder import_url mit einer Adresse auf.
- 04
In Figma prüfen
Lass das Plugin geöffnet; die Seite landet dort und wird als bearbeitbare Ebenen importiert.
Was die MCP-Verbindung deiner KI gibt
Funktioniert mit deinem KI-Tool
Claude Code, Claude Desktop, Cursor oder jeder Client, der MCP spricht.
import_html
Sende von der KI generiertes HTML bis 2 MB, ohne es vorher zu speichern oder zu hosten.
import_url
Lass die KI eine öffentliche Seite per Adresse importieren, zum Beispiel eine gefundene Referenz.
import_status
Die KI kann den Status eines von ihr gestarteten Imports abfragen.
Ergebnis im System
Mit Snap bei Pro werden KI-Entwürfe an die nächstgelegenen Farb- und Textstile deiner Datei gebunden.
Gehashter Token
Der Verbindungs-Token wird nur als Hash gespeichert, und Seiten warten höchstens 30 Minuten im Arbeitsspeicher.
MCP-Setup für Claude Code, Claude Desktop und Cursor
Das Model Context Protocol (MCP) ist ein offener Standard, mit dem KI-Tools externe Tools aufrufen können. HTML to Frames stellt seinen Import als MCP-Server bereit, sodass jeder MCP-fähige Client Seiten an Figma senden kann.
Verbindungsdaten erhalten
Öffne HTML to Frames in Figma und geh in den AI-Tab. Er zeigt einen persönlichen Token und ein Copy-and-paste-Setup für deinen Client. Du musst keine Konfiguration von Hand schreiben.
Claude Code
Füge den Server mit dem Setup aus dem AI-Tab hinzu und bitte Claude dann, die gerade gebaute Seite an Figma zu senden. Claude ruft import_html mit dem Dateiinhalt auf.
Claude Desktop
Füge den Server mit dem bereitgestellten Snippet zur MCP-Konfiguration von Claude Desktop hinzu und starte die App neu, falls sie die Änderung nicht übernimmt. Die HTML to Frames Tools erscheinen dann in der Unterhaltung.
Cursor
Füge den Server mit denselben Daten in den MCP-Einstellungen von Cursor hinzu. Der Agent kann dann eine generierte Seite oder eine URL importieren, während du im Editor arbeitest.
Andere MCP-Clients
Jeder Client, der MCP-Server unterstützt, kann sich mit demselben Token verbinden. Beachte, dass claude.ai-Web-Connectors, die OAuth nutzen, noch nicht unterstützt werden.
Die genauen Schritte für jeden Client werden in der Doku aktuell gehalten.
Aus KI-Entwürfen ein pflegbares Design machen
KI-generiertes HTML ist oft im Kleinen inkonsistent: ein leicht anderes Blau auf jedem Button, drei fast identische Schriftgrößen, Abstände, die um ein paar Pixel schwanken. Wörtlich importiert wird daraus eine unordentliche Designdatei. HTML to Frames gibt dir Werkzeuge, um das schon beim Import aufzuräumen.
- Verifiziertes Auto Layout. Flexbox- und Grid-Layouts aus dem generierten CSS werden zu Auto-Layout-Frames, wo jedes Kindelement innerhalb von 2 px bleibt – der Entwurf lässt sich also leicht umstellen.
- Styles & variables (Pro). Wiederholt genutzte Farben und alle CSS Custom Properties werden zu Variablen, und es entstehen Text- und Schatten-Styles.
- Snap to my file's styles (Pro). Werte, die nicht exakt zu deinem System passen, rasten auf deine nächstgelegenen bestehenden Farb- und Textstile ein – KI-Entwürfe kommen also im System an.
- Komponenten (Pro). Wiederkehrende Karten, Buttons und Listeneinträge werden zu Komponenten mit Instanzen.
Eine praktische Schleife sieht so aus: Bitte die KI um ein Layout, sende es an Figma, passe es visuell an und beschreibe der KI dann die Änderungen für die nächste Iteration. Jede Runde landet als neue Frames – so behältst du eine Versionshistorie auf dem Canvas.
Da der Import deinen eigenen Plan nutzt, gelten dieselben Limits wie bei jedem Import. Details auf der Preisseite.
Datenschutz und Limits der KI-Verbindung
Ein KI-Tool mit einer Designdatei zu verbinden, wirft berechtigte Fragen dazu auf, was geteilt wird. So wird die MCP-Verbindung gehandhabt.
Token
Dein Verbindungs-Token wird bei uns nur als Hash gespeichert. Behandle ihn wie ein Passwort und halte ihn aus geteilten Repositories heraus: Er erlaubt es einem Client, Seiten an dein Plugin zu senden.
Seiten in der Übertragung
Von der KI gesendete Seiten warten höchstens 30 Minuten im Arbeitsspeicher, bis dein geöffnetes Plugin sie abholt. URL-Importe werden im selben isolierten Sandbox-Browser gerendert wie jeder andere Import, und Ergebnisse werden nie auf die Festplatte geschrieben.
Deine Figma-Datei
Über diese Verbindung kann die KI deine Figma-Datei nicht lesen. Das Plugin selbst liest den Inhalt deiner Datei nicht; es schreibt neue Ebenen und liest nur die Metadaten seiner eigenen Frames.
Limits
import_htmlakzeptiert HTML bis 2 MB.- Das Plugin muss in Figma geöffnet sein, damit Seiten ankommen.
- Jede Seite zählt als ein Import in deinem Plan.
- claude.ai-Web-Connectors (OAuth) werden noch nicht unterstützt.
Die Sicherheitsseite enthält alle Details zur Datenaufbewahrung.
Häufige Fragen
Claude Code, Claude Desktop, Cursor und jeder andere Client, der MCP-Server unterstützt. Du verbindest sie über den AI-Tab des Plugins, der dir einen Token und ein Copy-and-paste-Setup liefert. claude.ai-Web-Connectors, die OAuth nutzen, werden noch nicht unterstützt.
Drei: import_html sendet von der KI geschriebenes HTML bis 2 MB; import_url importiert eine öffentliche Seite per Adresse; und mit import_status kann die KI den Fortschritt eines Imports abfragen. Seiten landen in deinem geöffneten Plugin und werden mit deinen Einstellungen importiert.
Ja. Von deinem KI-Tool gesendete Seiten werden an dein geöffnetes HTML to Frames Plugin in Figma geliefert. Sie warten höchstens 30 Minuten im Arbeitsspeicher – ist das Plugin kurz geschlossen, holt es sie ab, wenn du es innerhalb dieses Zeitfensters wieder öffnest.
Nein. Über die MCP-Verbindung kann die KI nur Seiten zum Import senden und deren Status abfragen. Das Plugin selbst liest den Inhalt deiner Datei nicht; es schreibt neue Ebenen und liest nur die Metadaten der Frames, die es erstellt hat, etwa Quell-URL und Breite.
Es gibt keine separaten Preise. Eine von der KI gesendete Seite wird mit deinem eigenen Plan importiert und zählt wie jede andere Quelle als ein Import. Der Free-Plan enthält 10 Importe pro Monat, Pro und Team sind im Rahmen eines Fair-Use-Kontingents unbegrenzt.
Aktiviere bei Pro Styles & variables und Snap to my file's styles. Exakte Treffer verwenden deine bestehenden Variablen und Styles wieder, und Werte, die nah dran, aber nicht exakt sind, rasten auf deine nächstgelegene Farbe und deinen nächstgelegenen Textstil ein – generierte Seiten kommen also an dein System gebunden an.
Verwandte Themen
Schluss mit dem Nachbauen von Webseiten.
Link einfügen und in Sekunden echte, bearbeitbare, responsive Figma-Ebenen erhalten. Kostenlos starten – 10 Importe pro Monat.
Keine Kreditkarte nötig. Pro kaufst du direkt in Figma.
Bald in der Figma Community