Figma verwandelt Ideen mit Claude in interaktive Software

Figma ist die kollaborative Design- und Entwicklungsplattform, auf der Teams digitale Produkte erstellen – vom ersten Konzept bis hin zum fertigen Nutzererlebnis. Mit Claude als Grundlage von Figma Make ermöglicht Figma es Teams, Ideen und statische Mockups schnell in voll funktionsfähige, interaktive Software umzuwandeln und den Weg von der Vorstellung zur Realität zu beschleunigen.

Wichtige Ergebnisse mit Claude:

• Designer, Entwickler und Produktmanager erstellen in Minutenschnelle funktionierende Prototypen oder Apps – ohne Code schreiben zu müssen
• Teams können durch die Automatisierung zeitaufwändiger Aufgaben mehr Design- und Produktideen erkunden
• Nicht-Designer können jetzt Ideen visualisieren und mehr Menschen in den Designprozess einbeziehen
• Claude Sonnet hat konstant bei Codequalität, Designabsicht und Geschwindigkeit überzeugt 

Die Evolution des Designs

Figma hat erkannt, dass sich die Rolle des Designs mit KI rasant weiterentwickelt. Als führende Designplattform sah das Unternehmen eine Chance, Designern zu helfen, ihre kreative Wirkung zu erweitern – indem es ihnen ermöglichte, 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 Funktion in Figma können Teams viele verschiedene Richtungen erkunden, ohne manuell Prototypen erstellen oder Code schreiben zu müssen. 

Diese Entwicklung stimmte auch mit den allgemeinen Veränderungen in der Branche überein. Alex Mullans, Produktmanager bei Figma, merkte an: „Die traditionelle Übergabe zwischen Design und Entwicklung verursacht Reibungen. Es gibt ein Hin und Her, bei dem der Entwickler sagt „Hier, das habe ich entwickelt“, und es entspricht nicht der ursprünglichen Vision.“ Die kollaborative Plattform von Figma bringt Design und Entwicklung näher zusammen, um während des gesamten Prozesses handwerkliche Sorgfalt und Qualität zu bewahren.

Die Wahl fiel auf Claude aufgrund seiner technischen Fähigkeiten und des Designgespürs

Bei der Bewertung von KI-Modellen suchte Figma nach einer Lösung, die qualitativ hochwertigen Code generieren konnte und gleichzeitig Designabsicht und Ästhetik verstand.

Mullans beschrieb ihren Bewertungsprozess so: „Wir bewerten regelmäßig verschiedene Modelle. Claude liefert konstant die richtige Kombination aus Geschwindigkeit, Genauigkeit und Verständnis der Benutzerabsicht.“

Auch Claudes Design-Sensibilität hebt sich von anderen ab, so das Team. Ein Ingenieur für Figma Make erklärte: „Bevor es Anthropic gab, sah man, dass diese KI-Modelle intelligent waren, aber es fehlte ihnen definitiv der Geschmack, es fehlte ihnen der Charakter. Man bat sie, ein Design zu generieren, und das Design war eher fad. Und dann kam Anthropic und jetzt haben wir sowohl intelligente Modelle als auch Modelle mit Geschmack." 

Holly Li, Produktmanagerin bei Figma Make, hatte aus erster Hand Erfahrung mit den Fähigkeiten von Claude. „Ich habe 30 Stunden damit verbracht, mir React beizubringen, um meine Website zu erstellen. Mit Claude konnte ich den gesamten Code an einem einzigen Tag überarbeiten und verbessern und Funktionen hinzufügen, die ich schon immer wollte, aber nicht selbst implementieren konnte.“

Das Team identifizierte Claude Sonnet als seinen Durchbruch: den Punkt, an dem die Codegenerierung gut genug wurde, um seine Vision für Figma Make zu verwirklichen.

Interaktivität über natürliche Sprache

Figma hat Claude in zwei transformative Produkte integriert, die Ideen in code-gestützte Software umwandeln. Mit dem ersten können Designer, die in Figma Sites arbeiten, vorhandene Website-Designs interaktiv gestalten, indem sie beschreiben, was sie möchten. Sie können Elemente auswählen und Prompts in natürlicher Sprache eingeben wie „Füge einen Hover-Effekt hinzu, der sich neigt, wenn meine Maus darüber liegt.“ Claude generiert schnell qualitativ hochwertigen Code und behält die Details des ursprünglichen Designs bei.

Das zweite Produkt, Figma Make, erstellt interaktive Prototypen oder Apps aus Beschreibungen oder vorhandenen Figma-Designs. Li erklärte: „Figma Make ist eine Möglichkeit, von der Idee zur echten Software zu gelangen. Sie können entweder bei Null oder mit einem vorhandenen Design beginnen, das Sie in Figma erstellt haben.“ Benutzer können einen Prompt eingeben, der ihre Wünsche beschreibt, oder ihre pixelgenauen Mockups aus Figma Design kopieren. Claude verwandelt diese in voll funktionsfähige Prototypen mit komplexer Logik, Animationen und responsivem Verhalten.

Li formulierte ihre Designphilosophie so: „KI sollte die Designer dort treffen, wo sie sind. Wenn Sie bereits das perfekte Design entworfen haben, sollten Sie nicht von vorne anfangen müssen. Claude fügt die Interaktivität hinzu und respektiert gleichzeitig jedes Pixel, das Sie platziert haben.“

Das Team konnte mit jedem Claude-Update bemerkenswerte Verbesserungen feststellen. Li sagte: „Ein Prompt generiert jetzt anspruchsvolle Designs mit Verläufen, variierter Typografie und durchdachter Bewegung. Einer unserer Designer hat sogar gesagt: ‚Claude ist so gut, ich könnte weinen'."

Neue Modelle beschleunigen die Vision

Das Figma-Team bleibt auf dem neuesten Stand 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 sehr es vorausplanen kann und wie gut es über komplexe Codebasen nachdenken kann.“ Field erklärte, wie das Modell Figma-Designs in funktionsfähigen Code umgewandelt hat. Er hob den verbesserten Roundtrip-Workflow zwischen Figma Design und Make hervor: Designs kopieren, funktionierende Prototypen generieren und dann in die Design-Canvas einbringen, um weitere Iterationen durchzuführen und die Entwurfsvarianten nebeneinander zu vergleichen. „Wir hatten keine Ahnung, wie viel besser dieser Roundtrip mit Sonnet 4.5 werden würde… es war eine sehr erfreuliche Überraschung", merkte er an. Field nannte die Erfahrung „ein Vergnügen, sich damit zu spielen“ und fügte hinzu, dass das Modell „bereits einen deutlichen Unterschied gemacht hat“ hinsichtlich der Fähigkeiten von Figma Make. 

Figma hat auch eine Option für experimentelle Modelle eingeführt, die Benutzern Zugriff auf die neuesten Versionen gibt – einschließlich der 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 Palette“, sagt Loredana Crisan, Chief Design Officer bei Figma. „Das Modell übersetzt detaillierte Designs und mehrschichtige Aufgaben beim ersten Versuch in Code. Es ist somit ein leistungsstarker Ausgangspunkt für Teams, um Ideen zu erkunden und zu entwickeln.“ Dank des experimentellen Setups können Teams die Grenzen mit neuen Funktionen überschreiten, während sich Claude ständig weiterentwickelt.

Jede neue Modellversion eröffnet neue Möglichkeiten für das, was Teams erschaffen können. Field teilte mit: „Wenn die KI-Modelle besser werden, wird Figma besser.“ 

Design und Softwareentwicklung für alle zugänglich machen

Durch die Senkung technischer Barrieren ermöglicht Claude allen Arten von Figma-Benutzern, Ideen schneller zu validieren, kreativere Richtungen zu erkunden und vielfältige Perspektiven in den Produktentwicklungsprozess einzubringen.

Geschwindigkeit verändert das Mögliche. Li hat dies anhand ihrer eigenen Erfahrung veranschaulicht: „Ich habe mit Figma Make in fünf Minuten einen Prototypen für einen neuen Produktablauf erstellt. Zuvor 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 hat eine Startup-Idee einem VC vorgestellt, indem er sie an einem Wochenende mit Figma Make als Prototypen entwickelte und den Investor mit einer voll funktionsfähigen Demo beeindruckte. Ein anderer Benutzer hat Make verwendet, um ein lange zurückgestelltes Konzept zum Leben zu erwecken – es interaktiv zu machen, brachte das Unternehmen schließlich dazu, wieder darüber zu sprechen.

Über die individuelle Produktivität hinaus demokratisiert Claude auch, wer zur Produktentwicklung beitragen kann. Mullans bemerkte: „Produktmanager, die in Tabellenkalkulationen und Datentabellen denken, können jetzt visuelle Prototypen erstellen, um ihre Ideen zu kommunizieren. Entwickler können Benutzeroberflächen schnell als Entwürfe erstellen, ohne Zeit für CSS aufwenden zu müssen. Jeder im Unternehmen kann effektiver zum Designprozess beitragen."

Der Wandel geht über die Tools hinaus: Er verändert die Art und Weise, wie Teams an die Produktentwicklung herangehen. Jetzt können Ingenieure entwerfen, Produktmanager Prototypen erstellen und Designer Software liefern. Figma Make verwischt die Grenzen zwischen den verschiedenen Rollen und hilft allen, eine Idee zu visualisieren, am Designprozess teilzunehmen und ein Produkt zum Leben zu erwecken.