5 Tipps zur Nutzung des Dev Mode MCP-Servers von Figma

Denke an einen ersten Tag in einem neuen Job zurück. Er verlief wahrscheinlich nach einem bekannten Muster: Du hast neue Teammitglieder kennengelernt, einige Einführungsunterlagen erhalten und hast damit begonnen, darüber nachzudenken, wie du den Job am besten angehst. Stell dir jetzt vor, du würdest dies ohne jegliche Struktur oder ohne jeden Kontext tun – nur mit einer großen Menge neuer Tool und Informationen und ohne einen Plan, um all dies zu verstehen.

Das entspricht in etwa dem, was wir von KI-Agenten erwarten, wenn wir ihnen rohe, unstrukturierte Designdaten übergeben. Der Dev Mode MCP-Server von Figma bringt Kontext aus Designdateien zu KI-Agenten, um einen effizienteren und genaueren Design-zu-Code-Workflow zu ermöglichen. Und genauso wie ein effektives Onboarding-Erlebnis auf organisierter Dokumentation und klaren Erwartungen beruht, können wir Schritte unternehmen, um die Qualität der Eingaben zu erhöhen – was letztendlich auch die Qualität der Ergebnisse verbessert. Hier geben wir dir fünf praxisnahe Tipps, wie du den von dir verwendeten KI-Agenten helfen kannst, konsistenten Code zu generieren, der besser auf die tatsächlichen Anforderungen deines Teams abgestimmt ist.

1. Beginne mit einer soliden Designstruktur

Die Welten des Designs und der Programmierung haben jeweils ihre eigene Definition von Struktur. Im Bereich Design bezieht sich Struktur auf ein ganzheitlicheres Bild: die Platzierung jedes Elements, wie sie in einem Layout zusammenkommen und das Erlebnis, das sie als Ganzes bieten. Im Bereich Programmierung bezieht sich Struktur auf bestimmte Regeln, Komposition und Syntax, die eingehalten werden müssen, damit der Code effektiv kompiliert werden kann und funktioniert. Es gibt keinen „richtigen“ Ansatz für Struktur, aber es ist wichtig, diese Unterschiede zu erkennen und die Lücke, wo möglich, zu überbrücken.

Wege, Design und Code aufeinander abzustimmen

Hier sind einige Möglichkeiten, wie Sie Designs strukturieren können, damit sie sich leichter in Code umsetzen lassen:

• Wähle einen Outside-in-Ansatz: Was ist der äußerste Abschnitt eines Elements? Ist es eine Karte? Ist es ein Abschnitt einer Webseite? Was auch immer es ist, beginne von außen und schachtele zusätzliche Elemente innerhalb dieser obersten Ebene.
• Benenne deine Ebenen: Was stellt das Design dar? Woraus setzt es sich zusammen? Indem man beispielsweise in einem Formularfeld Elemente wie Eingabefelder, Schaltflächen und Links benennt, erzielt man bessere Ergebnisse.
• Verwende Komponenten: Komponenten helfen dir nicht nur bei der Übersetzung von Design zu Code, sondern schaffen auch wiederholbare Muster für zukünftige Designs.

Eine Geschichte von zwei Formularfeldern

Wir zeigen nun ein Beispiel dafür, wie diese Grundsätze in der Praxis funktionieren. Hier haben wir zwei Formularfelder:

Auf den ersten Blick sehen diese Formulare sehr ähnlich aus. Sie sind auf die gleiche Weise organisiert, enthalten die gleichen Elemente und vermitteln insgesamt das Gleiche. Obwohl sie beide aus der Perspektive des Designs „korrekt“ strukturiert sind, ist das eine für Code optimiert und das andere nicht. Sehen wir uns die Ebenenstruktur genauer an:

Auf der linken Seite gibt es eine klare Struktur und eindeutige Namen für Komponentenebenen. Rechts sind die Elemente in einer einzigen Ebene gruppiert. Eine präzise Benennung und Strukturierung der Ebenen hat zwar keinen Einfluss auf das visuelle Erscheinungsbild des Designs, macht es für eine KI-Agenten jedoch wesentlich einfacher, qualitativ hochwertigen, relevanten Code für das Design auf der linken Seite zu generieren.

Bei dem Design auf der rechten Seite würde ein KI-Agent wahrscheinlich alles als einziges div-Element interpretieren und versuchen, alle darin enthaltenen Elemente in diesem einen Container einzufügen. Das würde wahrscheinlich zu Problemen mit Abständen und Layout führen, die ein*e Entwickler*in dann manuell beheben müsste.

2. Einigung auf eine gemeinsame Variable

In unserem kürzlich veröffentlichten Leitfaden zur Design-Entwickler-Übergabe haben wir darüber gesprochen, wie wichtig es ist, durch eine gemeinsame Sprache zwischen den Teams eine einheitliche Ausrichtung zu finden. Du kannst den Dev Mode MCP-Server in vielerlei Hinsicht als ein Übergabetool zwischen Designer*innen und KI-Agenten betrachten. Genau wie die Design-Entwickler-Übergabe hängt auch diese Übergabe an KI-Agenten davon ab, eine gemeinsame Sprache für Dinge wie Stil und Variable zu schaffen. So kannst du sicherstellen, dass KI-Agenten mit den von deiner Organisation festgelegten Designmustern übereinstimmen.

Variablen in Code übersetzen

Ein gute Möglichkeit, die Ergebnisse deines MCP-Servers zu optimieren, besteht darin, Codesyntax in Variablen einzurichten. Wenn du Variablen mit Codesyntax in einem Design verwendest, werden sowohl der Variablenwert als auch diese Syntax als Teil unserer Code-Ausgabe an den KI-Agenten gesendet. So kannst du KI-Agenten dabei helfen, den Designkontext besser zu verstehen und konsistentere Ergebnisse zu erzielen:

• Namenskonventionen durchsetzen: Stelle sicher, dass neue Variablen mit deinen bestehenden Designsystem-Variablen abgestimmt sind.
• Syntax kommunizieren: Bestimmte Frameworks erfordern unterschiedliche Syntax für die Verwendung von Variablen im Code. Stelle also sicher, dass die Agenten wissen, wie sie diese richtig strukturieren.
• Reaktionsfähigkeit schaffen: Vermeide Sie hartkodierte Größenangaben beim Generieren von KI-Code. Teile den Agenten mit, wie Komponenten strukturiert werden sollten, die mit den richtigen Breakpunkten übereinstimmen.

Änderungen von Variablen in großem Maßstab anwenden

Vermeide generell die Hartkodierung von Werten, da dies zu einer größeren, potenziell schwer zu wartenden Oberfläche führt. Wenn du beispielsweise dein Markendesign auffrischen möchtest, einschließlich deiner Farbpalette und der Schriftarten, musst du möglicherweise mehrere Web-Oberflächen aktualisieren. Mit Variablen sind diese Änderungen einfacher: Aktualisiere einfach deine Stylesheets, und diese neuen Werte werden überall dort angewendet, wo die Variable verwendet wird. Angesichts der Fähigkeit von KI, riesige Mengen an Coden zu generieren, ist die Durchsetzung dieses Maßes an Konsistenz von entscheidender Bedeutung.

Deine neue gemeinsame Sprache durchsetzen

Aber wie sieht es über die Generierung hinaus mit der Prüfung aus? Du kannst den Dev Mode MCP-Server auch verwenden, um festzustellen, ob eine Diskrepanz zwischen deinen Designvariablen und deiner Codebasis besteht. Der Server bietet ein Tool namens get_variable_defs, mit dem du die Variablen in einer bestimmten Auswahl mit dem Stylesheet in deiner Codebasis abgleichen und eine konsistente Verwendung von Mustern durchsetzen kannst.

3. Designabsicht mit Annotationen kommunizieren

Designs sind oft eine statische visuelle Darstellung von etwas Dynamischerem. Jenseits dessen, was du im visuellen Design siehst, gibt es auch unsichtbare Zustände – Zustandslogik, Responsivität, Barrierefreiheitsrichtlinien –, die du bei der Übersetzung in Code berücksichtigen musst. Während ein*e Mitarbeiter*in möglicherweise die Zustandslogik aus deinem Design erkennen kann, funktionieren LLMs nicht auf diese Weise. Sie sehen die Rohdaten, die du über den MCP-Server bereitstellst, und verwenden sie, um die vom Prompt vorgegebene Aufgabe zu erledigen. Eine Möglichkeit, wie Benutzer*innen dieses Problem lösen können, besteht darin, immer komplexere Prompts zu erstellen. Interessanterweise erzielen LLMs jedoch tendenziell bessere Ergebnisse, wen die Prompts präzisere, spezifischere Aussagen enthalten.

Annotationen als Tooltips für LLMs

Annotationen sind der Schlüssel, um KI-Agenten Kontext zu geben, da sie es dir ermöglichen, Designabsichten zu kommunizieren, die in einem Design nicht sofort sichtbar sind. Annotationsdaten, einschließlich Kategorien, sind in den Antworten des Dev Mode MCP-Servers enthalten. Hier sind einige Beispielannotationen als Anleitung für die Codeerstellung:

• Animationen und Hover-Effekte hervorheben: Du kannst einen Zoom-Effekt für Tabellenzeilen angeben oder festlegen, dass sich der Hintergrund beim Hovern in Schwarz 200 ändert.
• Zustandsänderungen übermitteln: Weise darauf hin, dass Navigationsschaltflächen deaktiviert werden sollten, wenn sich ein*e Benutzer*in auf der Seite befindet, deren Name mit dem Wert der Schaltfläche übereinstimmt.
• Anweisungen für Inhaltsquellen geben: Gib Anweisungen für Inhalte für einen bestimmten Abschnitt, indem du vermerkst, dass diese dynamisch aus einem CMS bezogen werden und dass nach bestimmten Größen eine Paginierung verwendet werden soll.

Eine Win-Win-Situation für Designer*innen und Tools

Über das bloße Kommunizieren von Absichten an KI-Agenten hinaus kann die Verwendung von Annotationen auf diese Weise Designer*innen tatsächlich Zeit sparen. Nimm das obige Beispiel mit der Navigationstaste. Je nachdem, wie viele Optionen dein Navigations-Bedienfeld hat, musst du möglicherweise für jeden individuellen Zustand ein Design erstellen. Mit Annotationen kann der Agent diese Zustände im Kontext des Designs für dich erstellen.

4. Leitlinien mit Regeln erstellen

Annotationen eignen sich zwar hervorragend, um die Designabsicht zu kommunizieren und die gewünschte Funktionalität auszudrücken, sind jedoch weniger relevant, wenn es darum geht, Dinge wie die Funktionsweise von Layouts im eigentlichen Code oder die Einrichtung von Backend-Datenstrukturen zu vermitteln. Hier kommen die Regeln ins Spiel. Wenn Annotationen wie Tooltips sind – also Anweisungen, die von Frame zu Frame oder von Iteration zu Iteration variieren können – dann sind Regeln wie Handbücher, die einen Rahmen dafür schaffen, wie Daten interpretiert und Aufgaben erledigt werden sollten. Um zu bestimmen, was eine Regel sein sollte oder was nur eine Anweisung im Prompt sein sollte, frage dich: „Möchte ich, dass der Agent jedes Mal genau diese Aktion ausführt, wenn ich diese Art von Frage stelle?“

So kannst du deine Regeln strukturieren

Regeln für Editoren wie Cursor, Windsurf und VS-Code (genannt Copilot-Anweisungen) sind ziemlich einfach zu erstellen. Du erstellst eine Datei in einfachem Markdown, speicherst sie in einem bestimmten Verzeichnis und legst dann fest, wie die Regel aufgerufen wird, manuell oder automatisch. In diesen Regeldateien kannst du unter anderem Folgendes angeben:

• Nutzung bestehender Komponenten: Teile den Agenten mit, wo sie nach vorhandenem Code suchen sollen und verhindere Duplikate.
• Bevorzugte Layout-Primitive und Stilrichtlinien: Du hast bereits Schritte unternommen, um responsive Design sicherzustellen, also sorge dafür, dass sie genutzt werden.
• Einzubeziehende Datenquellen: Die Kommunikation von Datenstrukturen innerhalb der Codebasis ist einfacher, als nur mit Prompts zu arbeiten.
• Dateiorganisation und Benennungsmuster: Stelle sicher, dass neu erstellter Code mit deiner vorhandenen Verzeichnisstruktur übereinstimmt.

5. Scheue dich nicht vor Iterationen

Wenn KI-Agenten wie ein*e neue*r Entwickler*in in deinem Team sind, dann ist es wichtig, über die Arbeitsweise von Entwickler*innen in der Praxis nachzudenken. Ein KI-Agent wird ein Problem wahrscheinlich nicht in einem einzigen Versuch lösen; Prompts sind oft nur der Beginn eines Gesprächs. In den meisten Fällen liefert der erste Prompt gute Ergebnisse, aber wahrscheinlich musst du einige Anpassungen vornehmen, und erneut Prompts an den Agent senden, um einige Probleme zu beheben. Das ist keine schlechte Sache! Du kannst erneut Aufrufe des Tools durchführen lassen, um sicherzustellen, dass es die richtigen Informationen sieht, oder deinen Prompt anpassen, um den Ansatz für die Erstellung zu ändern. Der Vorteil der Verwendung des Dev Mode MCP-Servers besteht darin, dass Ihr KI-Agent durch fortlaufende Prompts und Optimierungen den Designkontext erhält, um relevante Ergebnisse zu generieren. Dank dieses Kontexts erreichst du deine Erfolgskriterien mit weniger Agentenaufrufen.

Denke daran, dass die KI-Landschaft im Wandel ist

Die Fortschritte bei der KI entwickeln sich mit unglaublicher Geschwindigkeit. Und obwohl dieses rasante Tempo der Veränderung aufregend ist, darf man nicht vergessen, dass das, was heute gilt, morgen schon anders aussehen kann. In unserer Beta-Phase haben wir dank des großartigen Feedbacks von Benutzer*innen und sich ändernder Spezifikationen bereits eine Reihe von Verbesserungen und neuen Funktionen eingeführt. Es ist wichtig, flexibel zu bleiben, wenn sich Dinge ändern, um eine noch bessere designorientierte Codererstellung zu erreichen.1