Figma verwandelt Ideen mit Claude in interaktive Software

Figma ist die kollaborative Design- und Entwicklungsplattform, auf der Teams digitale Produkte erstellen – von ersten Konzepten bis hin zu ausgelieferten Erlebnissen. Mit Claude als Antrieb für Figma Make ermöglicht Figma Teams, Ideen und statische Mockups schnell in voll funktionsfähige, interaktive Software zu verwandeln und so den Weg von der Vorstellung zur Realität zu beschleunigen.

Wichtige Ergebnisse mit Claude

• Designer, Entwickler und Produktmanager erstellen funktionierende Prototypen oder Apps in Minuten – ohne Code zu schreiben
• Teams erkunden mehr Design- und Produktideen durch Automatisierung zeitaufwändiger Aufgaben
• Auch Nicht-Designer können jetzt Ideen visualisieren und mehr Menschen in den Designprozess einbeziehen
• Claude Sonnet überzeugte durchgängig bei Codequalität, Designtreue und Geschwindigkeit

Die Evolution des Designs

Figma erkannte, dass sich die Rolle des Designs mit KI rasant weiterentwickelt. Als führende Designplattform sahen sie die Möglichkeit, Designern zu helfen, ihre kreative Wirkung zu erweitern – Designs zum Leben zu erwecken – und gleichzeitig mehr Menschen in den Designprozess einzubeziehen.

KI eröffnet eine neue Möglichkeit, Designideen schnell zu visualisieren und statische Mockups mit einem einfachen Prompt in interaktive Erlebnisse zu verwandeln. Durch die Integration dieser Fähigkeit in Figma können Teams viele verschiedene Richtungen erkunden, ohne manuell Prototypen zu erstellen oder Code zu schreiben.

Diese Entwicklung stimmte auch mit breiteren Branchenveränderungen überein. Alex Mullans, Produktmanager bei Figma, bemerkte: „Die traditionelle Übergabe zwischen Design und Entwicklung erzeugt Reibung. Es gibt ein Hin und Her, bei dem der Entwickler zurückkommt und sagt ‚Hier ist, was ich gebaut habe‘, und es stimmt nicht mit der ursprünglichen Vision überein.“ Die kollaborative Plattform von Figma bringt Design und Entwicklung näher zusammen, um Handwerkskunst und Qualität im gesamten Prozess aufrechtzuerhalten.

Die Wahl von Claude für technische Kompetenz und Designgespür

Bei der Evaluierung von KI-Modellen suchte Figma eine Lösung, die hochwertigen Code generieren und gleichzeitig Designabsicht und Ästhetik verstehen konnte.

Mullans beschrieb ihren Evaluierungsprozess: „Wir evaluieren regelmäßig verschiedene Modelle. Claude liefert durchgängig die richtige Kombination aus Geschwindigkeit, Genauigkeit und Verständnis der Benutzerabsicht.“

Auch das Designgespür von Claude hebt es ab, so das Team. Ein Ingenieur für Figma Make erklärte: „Bevor Anthropic auf den Markt kam, sah man, dass diese KI-Modelle intelligent waren, aber ihnen definitiv Geschmack und Charakter fehlten. Man bat sie, ein Design zu generieren, und das Design kam eher flach heraus. Und dann kam Anthropic, und jetzt haben wir sowohl intelligente Modelle als auch Modelle mit Geschmack.“

Holly Li, Produktmanagerin für Figma Make, hatte aus erster Hand Erfahrung mit den Fähigkeiten von Claude. „Ich habe 30 Stunden damit verbracht, mir selbst React beizubringen, um meine Website zu erstellen. Mit Claude habe ich diesen gesamten Code an einem einzigen Tag refaktorisiert und verbessert und Funktionen hinzugefügt, die ich immer wollte, aber selbst nicht umsetzen konnte.“

Das Team identifizierte Claude Sonnet als ihren Durchbruchmoment – den Punkt, an dem die Codegenerierung gut genug wurde, um ihre Vision für Figma Make zu verwirklichen.

Interaktivität durch natürliche Sprache

Figma hat Claude in zwei transformative Produkte integriert, die Ideen in codebasierte Software verwandeln. Das erste ermöglicht Designern, die in Figma Sites arbeiten, ihren bestehenden Website-Designs Interaktivität hinzuzufügen, indem sie beschreiben, was sie möchten – Elemente auswählen und natürlichsprachliche Prompts eingeben wie „füge einen Hover-Effekt hinzu, der kippt, wenn meine Maus darüber ist.“ Claude generiert schnell hochwertigen Code und bewahrt dabei die Details des ursprünglichen Designs.

Das zweite Produkt, Figma Make, erstellt interaktive Prototypen oder Apps aus Beschreibungen oder bestehenden Figma-Designs. Wie Li erklärte: „Figma Make ist ein Weg, von der Idee zu echter Software zu kommen. Man kann entweder von Null anfangen oder mit einem bestehenden Design starten, das man in Figma erstellt hat.“ Benutzer können einen Prompt eingeben, der beschreibt, was sie möchten, oder ihre pixelgenauen Mockups aus Figma Design kopieren, und Claude verwandelt sie in voll funktionsfähige Prototypen mit komplexer Logik, Animationen und responsivem Verhalten.

Li formulierte ihre Designphilosophie: „KI sollte Designer dort abholen, wo sie sind. Wenn Sie bereits das perfekte Design erstellt haben, sollten Sie nicht von vorne anfangen müssen. Claude fügt die Interaktivität hinzu und respektiert dabei jeden platzierten Pixel.“

Das Team verzeichnete bemerkenswerte Verbesserungen mit jedem Claude-Update. Li berichtete: „Ein Prompt generiert jetzt anspruchsvolle Designs mit Verläufen, vielfältiger Typografie und durchdachter Bewegung. Einer unserer Designer sagte sogar: ‚Claude ist so gut, ich könnte weinen.‘“

Neue Modelle beschleunigen die Vision

Das Figma-Team bleibt an der Spitze und testet ständig die neuesten Claude-Modelle.

„Sonnet 4.5 ist ein sehr beeindruckendes Modell“, sagte Dylan Field, CEO von Figma. „Wir sind bisher sehr beeindruckt davon, wie viel es vorausplanen kann und wie viel es über komplexe Codebasen nachdenken kann.“ Field erklärte, wie das Modell Figma-Designs in funktionsfähigen Code transformiert hat. Er hob den verbesserten Roundtrip-Workflow zwischen Figma Design und Make hervor – Designs hineinkopieren, funktionierende Prototypen generieren, sie dann in die Design-Leinwand bringen, um weiter zu iterieren und Entwürfe nebeneinander zu vergleichen. „Wir hatten keine Ahnung, wie viel besser dieser Roundtrip mit Sonnet 4.5 werden würde ... es war eine sehr angenehme Überraschung“, bemerkte er. Field nannte das Erlebnis „eine Freude zum Ausprobieren“ und fügte hinzu, dass das Modell „bereits wirklich einen deutlichen Unterschied gezeigt hat“ in den Fähigkeiten von Figma Make.

Figma hat auch eine Einstellung für experimentelle Modelle eingeführt, die Benutzern Zugang zu den neuesten Releases gibt – einschließlich des neuen Claude Opus 4.6 – sobald sie in Figma Make verfügbar sind. „Claude Opus 4.6 generiert komplexe, interaktive Apps und Prototypen in Figma Make mit einer beeindruckenden kreativen Bandbreite“, sagte Loredana Crisan, Chief Design Officer bei Figma. „Das Modell übersetzt detaillierte Designs und vielschichtige Aufgaben beim ersten Versuch in Code, was es zu einem leistungsstarken Ausgangspunkt für Teams macht, um Ideen zu erkunden und umzusetzen.“ Die experimentelle Einstellung ermöglicht es Teams, mit neuen Fähigkeiten die Grenzen auszuloten, während sich Claude weiterentwickelt.

Jedes neue Modell-Release eröffnet neue Möglichkeiten für das, was Teams erstellen können. Field sagte: „Wenn KI-Modelle besser werden, wird Figma besser.“

Design und Softwareerstellung für alle zugänglich machen

Durch das Senken technischer Hürden ermöglicht Claude allen Arten von Figma-Benutzern, Ideen schneller zu validieren, mehr kreative Richtungen zu erkunden und vielfältige Perspektiven in den Produktentwicklungsprozess einzubringen.

Geschwindigkeit verändert das Mögliche. Li veranschaulichte dies mit ihrer eigenen Erfahrung: „Ich habe einen neuen Produkt-Flow mit Figma Make in fünf Minuten prototypisiert. Vorher wäre das für mich als Produktmanagerin ohne Design- und Engineering-Unterstützung buchstäblich unmöglich gewesen.“

Diese Beschleunigung ermöglicht völlig neue Workflows. Frühe Nutzer haben überzeugende Beispiele geteilt: Ein Designer pitchte einem VC eine Startup-Idee, indem er sie an einem Wochenende mit Figma Make prototypisierte und den Investor mit einer voll funktionsfähigen Demo beeindruckte. Ein anderer Nutzer erweckte mit Make ein lange zurückgestelltes Konzept zum Leben – die Interaktivität brachte das Unternehmen dazu, wieder darüber zu sprechen.

Über die individuelle Produktivität hinaus demokratisiert Claude auch, wer zum Produktentwicklungsprozess beitragen kann. Mullans beobachtete: „Produktmanager, die in Tabellen und Daten denken, können jetzt visuelle Prototypen erstellen, um ihre Ideen zu kommunizieren. Ingenieure können schnell Oberflächen entwerfen, ohne Zeit mit CSS zu verbringen. Jeder in der Organisation kann effektiver zum Designprozess beitragen.“

Der Wandel geht tiefer als nur Tools – er verändert, wie Teams die Produktentwicklung angehen. Jetzt können Ingenieure designen, Produktmanager prototypisieren und Designer Software ausliefern. Figma Make verwischt die Grenzen zwischen verschiedenen Rollen und hilft jedem, eine Idee zu visualisieren, am Designprozess teilzunehmen und ein Produkt zum Leben zu erwecken.

​