Erstelle dein Designsystem mit KI in Figma Make
Erstelle Designs und Prototypen und skaliere dein System schneller – mit der Leistungsfähigkeit der KI. Nutze KI, um dein Designsystem zu skalieren, zu testen und weiterzuentwickeln – und verbinde Design und Code von Anfang an miteinander.
Designsysteme mit KI entwickeln
Systemgrundlagen mit natürlicher Sprache erstellen
Beschreibe die Komponenten, Token und Muster, die du benötigst. Der KI-Designsystem-Ersteller erzeugt konsistente, wiederverwendbare Elemente – perfekt auf deine Marke abgestimmt.
Erst prüfen, dann festlegen
Verwende Make, um neue Muster, Layouts oder responsive Verhaltensweisen in wenigen Minuten zu testen. Erstelle Prototypen mit echten Daten, Logik und Einschränkungen, um zu sehen, was funktioniert, bevor du es in deinem Designsystem formalisierst.
Design und Code verbinden
Bringe React-Komponenten oder Produktionslogik in Make ein, um sicherzustellen, dass jeder Prototyp die reale Funktionalität widerspiegelt. Wenn ein Muster bereit ist, übergebe den standardkonformen Code, der dein System über Design und Entwicklung hinweg konsistent hält.
Skalierung durch gemeinsamen Kontext
Erstelle Figma Make-Vorlagen, in die dein Designsystem integriert ist, sowie Richtlinien, um sicherzustellen, dass die KI dein Designsystem auf jedes Ergebnis korrekt anwendet. Wenn jede Erkundung mit deinem System beginnt, entsteht standardmäßig Konsistenz.
Erstellt von echten Teams.
Erfahre, wie Entwickler*innen, Designer*innen und PMs Figma Make nutzen, um No-Code-Web-Apps zu erstellen – von internen Tools bis hin zu Produkt-MVPs.
- Jacques Debeuneure Jr.
- Daniela Muntyan
- kishoree04u
- Seungmee Lee
So generierst du ein Designsystem mit KI in Figma Make
Öffne Figma Make und importiere deine Markenstile und Code-Komponenten – oder beginne mit einer neuen Datei von vorne.
Beschreibe die Komponenten oder Flows, die du erkunden möchtest, mithilfe von Prompts in natürlicher Sprache. Make erstellt dann einen funktionsfähigen Prototyp unter Verwendung deines bestehenden Systems.
Beispiel-Prompt: „Erstelle eine Kartenkomponente mithilfe unserer Sekundärfarben-Token und Bewegungsrichtlinien.“
Teste frühzeitig die Reaktionsfähigkeit, Barrierefreiheit und Logik und iteriere dann so lange, bis das Muster bereit für die Systemübernahme ist.
Beispiel-Prompt: „Passe den Innenabstand an und füge Hover- und Fokus-Zustände hinzu, die den Barrierefreiheitsstandards entsprechen.“
Wenn ein Muster fertig ist, übergebe den funktionierenden Code direkt an die Entwicklung. Deine Design- und Entwicklungsteams arbeiten mit derselben Informationsquelle, sodass das, für das du in Make einen Prototyp erstellst, auch entwickelt wird.
FAQs
Damit kann KI Designsystem-Teams dabei unterstützen, schneller einheitliche Komponenten zu testen, zu entwickeln und Prototypen dafür zu erstellen. In Figma Make bilden deine Design-Token und -komponenten die Grundlage für KI-gesteuerte Erkundung und Validierung.
Ja. Figma Make lässt sich in deine Figma-Stilbibliotheken und Code-Komponenten integrieren, sodass das, was du generierst, mit deinem aktuellen System konsistent bleibt.
Keine Programmierung erforderlich. Du kannst deine Komponenten mit Prompts erstellen und veröffentlichen und ihren Stil anpassen. Entwickler*innen können bei Bedarf weiterhin auf sauberen, produktionsbereiten Code zugreifen.
Make nutzt deine Code-Komponenten und Figma-Stilbibliotheken, damit jedes Ergebnis markenkonform ist. Du kannst auch Make-Vorlagen veröffentlichen, um eine konsistente Grundlage für Design-Erkundungen zu schaffen, und Richtliniendateien, um zu definieren, wie Make dein Designsystem anwendet.
Absolut. Figma Make wurde für die Zusammenarbeit entwickelt. Designer*innen, PMs und Entwickler*innen können in derselben Datei zusammenarbeiten und Änderungen in Echtzeit sehen.
Ja. Du kannst Zustände und Interaktionen mit Prompts wie „Füge allen primären Schaltflächen einen Hover-Effekt hinzu“ beschreiben, und Make erstellt sie automatisch.
Du kannst Figma Make im Starter-Abo kostenlos testen. Erweiterte KI- und Systementwicklungsfunktionen sind in kostenpflichtigen Abos verfügbar.
Aus dem Blog
Wie Lufthansa Systems mit Figma Make realistische Cockpit-Prototypen erstellt
Piloten sind auf Bordsoftware angewiesen, um Flugrouten zu navigieren, den Flugverkehr zu überwachen, Turbulenzen zu vermeiden und vieles mehr. Um dynamischere Prototypen für Benutzertests zu erstellen, setzte Lufthansa Systems auf Figma Make.
Datengestützte Websites mit Payload in Figma erstellen, veröffentlichen und verwalten
Mit Payload in Figma können Teams vom Prototyp bis zur Produktion zusammenarbeiten und ihre Daten und Inhalte an einem Ort verwalten.
Die Zeitersparnis durch Figma Make messen
Das Data-Science-Team von Figma ging davon aus, dass Benutzer*innen durch KI Zeit sparen, für den Nachweis benötigten sie einen neuen Forschungsdesign-Ansatz.
Ein Eigenschaftenpanel und Annotationen – jetzt in Figma Make
Mit visueller Bearbeitung und Annotationen überbrückt Figma Make die Lücke zwischen Design und Code. Wähle das Element aus, das du ändern möchtest, passe es direkt im Eigenschaftenpanel an oder schreibe kontextbezogene Prompts mit Annotationen.
Workflow-Lab: Designs direkt mit Figma Make bereitstellen
Die Übergabe vom Design zum Code muss keine Einbahnstraße sein. Dieser Workflow zeigt, wie Designer*innen eine Codebase mit Figma Make verbinden, direkt Änderungen vornehmen und das gesamte Team zur Überprüfung einbeziehen können – bis hin zum Pull-Request.
So nutzt Decagon KI zur Sättigung von Designsystemen
Die schnell wachsende Plattform für Kundenerfahrungen erklärt, wie Figma MCP und Figma Make dabei halfen, ein neues Designsystem zu skalieren und Kundenanforderungen zu erfüllen.
Weitere Ressourcen
Was ist MCP?
Artikel lesenErfahre mehr über das Model Context Protocol (MCP), den offenen Standard, der die Integration von KI vereinfacht, ähnlich wie USB-C für Daten.
Was ist Vibe Coding?
Artikel lesenVibe Coding kombiniert stimmungsbasiertes Design mit nahtloser Programmierung, um immersive digitale Erlebnisse zu schaffen, die emotional ansprechen und einwandfrei funktionieren.
Wie man eine App in fünf Schritten entwickelt
Artikel lesenDie Entwicklung einer App erfordert Recherche und ständige Überarbeitung, um den Kundenbedürfnissen gerecht zu werden. Erfahre in diesem Leitfaden, wie man eine App entwirft und wie Figma dabei helfen kann.