4 neue Wege, um mit KI-Tools von der Idee zum Produkt zu gelangen

Produktteams passen sich schnell an die neue Arbeitsweise im KI-Zeitalter an. Sie erstellen früh Protoypen, testen im Code, bevor sie designen, in jeder Skalierung erkunden und mit dem Designsystem-Kontext ausliefern, der früher bei der Übergabe verloren ging. Wir haben mit Produktentwickler*innen bei FloQast, Merkle, Affirm und Accor darüber gesprochen, wie sich das in der Praxis gestaltet.

Erfahre mehr darüber, wie du den richtigen Workflow für dein Team finden kannst – und wie du Geschwindigkeit mit Intention ausbalancieren kannst.

1. Teste Einschränkungen im Code

Das Testen einer Idee gegen komplizierte Einschränkungen – Dinge wie mehrstufige Flows, bei denen eine Aktion den nächsten Auslöser verursacht, oder Benutzeroberflächen, die sich je nach den zugrunde liegenden Daten unterschiedlich verhalten – erforderte früher erhebliche Entwicklerinvestitionen. Heute haben KI-Codierungswerkzeuge es mehr Menschen in einem Produktteam ermöglicht, schnell solche Interaktionen zu erstellen und zu testen, bevor sie sich auf eine Richtung festlegen. Das hat einen neuen Workflow eröffnet. Produktentwickler*innen können einen funktionierenden Prototypen im Code entwickeln und ihn dann mit Codex to Figma auf die Figma-Arbeitsfläche bringen, um das vollständige Bild zu sehen und es gemeinsam zu verfeinern. Falls dann noch weitere Arbeiten im Code erforderlich sind, können sie über MCP mit dem Designkontext intakt zurückkehren.

So hat FloQast einen komplexen Workflow im Code getestet

FloQast entwickelt Software, die Buchhaltungsteams dabei hilft, die Komplexität der realen Welt zu bewältigen – Aufgaben, die erst weitergeführt werden können, wenn andere Aufgaben abgeschlossen sind, Aufzeichnungen, die zwischen Instanzen wie einem Zahlungsabwickler und einem Bankkonto übereinstimmen müssen, und Freigaben, die erst erfolgen können, wenn alles andere überprüft wurde.

Die Herausforderung

Kürzlich musste das Team einen ihrer Standard-Workflows überdenken, bei dem Benutzer*innen zwischen mehreren Seiten wechseln mussten, nur um eine einzelne Unstimmigkeit zu finden. Zum Beispiel musste ein Buchhalter, der ein Problem in einem Konto bemerkt, auf eine Seite gehen, um das Problem zu sehen, zu einer anderen Seite navigieren, um es zu untersuchen, und dann zur ersten Seite zurückkehren, um es zu lösen. Das Team wollte das alles auf einer einzigen Seite konsolidieren, auf der Benutzer*innen ihre Aufgaben sehen, verfolgen können, was blockiert ist, und alles beheben können, ohne den Bildschirm zu verlassen.

Ein früher Prototyp hatte vielversprechende Ansätze gezeigt, aber die Seite hatte zu viele miteinander verbundene Schritte – jeder davon abhängig von echten Daten und Logik –, als dass das Team allein anhand eines Mockups bewerten konnte.

Die Freischaltung

Benjamin Ellis, UX-Manager bei FloQast, erstellte einen funktionierenden Prototypen in einem KI-Coding-Tool mit einem simulierten Backend und realistischen Daten, die auf den Workflows eines tatsächlichen Kunden basierten. Der Code-basierte Prototyp ermöglichte es dem Team, reale Szenarien durchzuklicken, bei denen das Abschließen eines Schritts der Auslöser für den nächsten war, und so zu sehen, ob die gesamte Seite tatsächlich zusammenhielt. Sie entdeckten sofort Flows, die an der Oberfläche richtig aussahen, aber in der Praxis nicht funktionierten – die Art von Problemen, die nur auftreten, wenn man mit echten Daten und Logik arbeitet.

Die Auswirkungen

Als sich Benjamins Team und der Designer auf eine Richtung festlegten, hatten sie diese bereits beim Coden an realen Szenarien getestet und die Art von Interaktionsproblemen aufgefangen, die eine Designdatei allein nicht aufgedeckt hätte. Das bedeutete später weniger Überraschungen und mehr Vertrauen in das, was sie entwickelten.

Probiere dies aus, wenn Folgendes zutrifft:

• Die UI verhält sich unterschiedlich, abhängig von Bedingungen, die du in einem Mockup nicht bewerten kannst, wie z. B. Benutzerberechtigungen oder mehrstufige Flows, bei denen eine Aktion die nächste beeinflusst.
• Du musst eine kleinere Korrektur vornehmen, und es geht schneller, es direkt zu coden, als über das Design zu gehen.
• Designer*innen und Entwickler*innen müssen gemeinsam eine komplexe Erfahrung abstecken und ein funktionierendes Beispiel erleichtert diese Unterhaltung.

2. Erkunde mit KI auf der Arbeitsfläche

Teams haben schon immer auf der Arbeitsfläche erkundet, aber KI hat verändert, wie weit diese Erkundung gehen kann. Mit dem KI-Agenten von Figma können Designer*innen Layoutvarianten generieren, realistischen Inhalt schreiben und Lücken in ihrer Arbeit aufdecken, ohne die Datei zu verlassen – all das ist in ihrem Designsystem verankert. Wenn das Team bereit ist, eine Richtung voranzutreiben, können sie Figma Make verwenden, um es in einen interaktiven Prototypen zu verwandeln, und MCP nutzen, um den Designkontext in den Code für die Produktion zu bringen.

So suchte Merkle in der Entwicklung die Breite, bevor es in die Tiefe ging

Easton Thomas, stellvertretender Creative Director für UX bei Merkle, überdachte, wie sein Telekommunikationskunde seine Produkte auf seiner Website organisierte und präsentierte – eine Herausforderung der Informationsarchitektur, die es erforderte, viele verschiedene Ansätze zu erkunden, bevor der richtige gefunden wurde.

Die Herausforderung

Die Arbeit erforderte eine umfangreiche Erkundung. Easton musste viele verschiedene Layouts und Inhaltsansätze testen, bevor er sich in einer Richtung sicher fühlen konnte. Infolge des begrenzten Inhalts auf der bestehenden Website konnte er nicht so einfach beurteilen, ob eines von ihnen mit echten Produkten auf der Seite Bestand haben würde.

Die Freischaltung

Easton begann auf der Arbeitsfläche, indem er sieben flexible Layoutrichtungen entwarf, um verschiedene Ansätze zu erkunden. Dann bat er den KI-Agenten von Figma, 10 Variationen eines seiner Layouts zu erzeugen, dann noch einmal 10, bis er etwa 50 Variationen erstellt hatte. Zu diesem Zeitpunkt hatte der Agent jede mögliche Kombination ausgeschöpft und Easton konnte die stärksten Ideen herausziehen und weitergestalten.

Sobald er eine Richtung hatte, nutzte er weiterhin den Agenten von Figma, um die Details zu verfeinern. Er nutzte den Agenten, um Folgendes zu tun:

• Realistischen Platzhaltertext generieren, damit die Seite für die Stakeholder nicht abstrakt wirkt.
• Entwicklerspezifikations-Annotationen direkt in die Annotationenkarten schreiben.
• Die fertige Arbeit überprüfen und Lücken markieren, wie Überlegungen zur Barrierefreiheit für Bildschirmleser, die er möglicherweise übersehen hat.

Von dort aus ging er zu Figma Make über, um die Suchseite mit realen Interaktionen als Prototyp zu erstellen und alle verschiedenen Status für Dinge wie Filtermenüs zu generieren, damit er sehen konnte, wie die Seite tatsächlich funktioniert. Er zog diese Bildschirme zurück auf die Arbeitsfläche für die Entwicklerübergabe.

Die Auswirkungen

Die Produktionsarbeit, die Tage gedauert hätte, wurde auf Stunden komprimiert. Aber der wirkliche Vorteil war die Tiefe der Erkundung, die der KI-Agent von Figma ermöglichte. Anstatt sich auf eines von sieben Layouts festzulegen und zu hoffen, dass es das richtige war, konnte Easton den gesamten Optionsraum – 50 Variationen – ausreizen, bevor er eine Entscheidung traf. Als die Arbeit bei den Entwickler*innen ankam, hatte er sie durch mehr Erkundungsrunden gebracht und Lücken entdeckt, die er sonst vielleicht nicht bemerkt hätte – was bedeutete, dass er sich mit mehr Selbstvertrauen für eine Richtung entscheiden konnte.

Probiere dies aus, wenn Folgendes zutrifft:

• Du erstellst eine neue Oberfläche und musst viele Richtungen erkunden, bevor du dich festlegst.
• Du musst schnell mehrere Zustände und Randfälle für einen komplexen Flow generieren und testen.
• Du möchtest detaillierte Interaktionen ausarbeiten, die in deinem Designsystem verankert sind, bevor du sie an die Entwickler*innen weitergibst.

3. Beginne mit einem Prototypen

Tools wie Figma Make ermöglichen es Teams, in wenigen Stunden einen funktionierenden Prototyp zu erstellen, bevor jemand eine einzige Anforderung geschrieben hat. Anstatt mit einer Spezifikation zu beginnen und zu hoffen, dass sich die Stakeholder die Vision vorstellen können, erstellen Teams zuerst etwas Reales und lassen das die Form dessen annehmen, was als Nächstes kommt. Von dort aus können sie den Prototyp zur Verfeinerung auf die Arbeitsfläche, in eine Präsentation zur Überprüfung durch Stakeholder oder durch MCP in Code übertragen.

So nutzte Accor Figma Make, um alle von einer neuen Vision zu überzeugen

Accor ist eine globale Hotelgruppe mit Dutzenden von Hotelmarken. Vor Kurzem hat Designteam von Accor erforscht, wie KI das Web-Erlebnis für eine seiner Luxusmarken verbessern könnte.

Die Herausforderung

Die Herausforderung bestand darin, herauszufinden, wie diese KI-Erfahrung tatsächlich aussehen sollte. Ein generischer Ansatz – wie das Einfügen eines Chatbots auf der Seite – würde nicht die Markenidentität widerspiegeln oder die Erwartungen der Gäste erfüllen. Justine Grave, leitende Markendesignerin bei Accor, musste etwas liefern, das den emotionalen Ton und die Persönlichkeit einfängt, die die Marke erkennbar machen.

Der entscheidende Moment

Justine öffnete Figma Make und erstellte einen Prototypen, den sie nicht per Hand hätte entwickeln können – eine Webseite, die sich basierend auf den Eingaben der Benutzer*innen jeweils neu organisiert. Suche nach „Golf“ und die Seite passt sich rund um die Eigenschaften mit Golfplätzen, kuratierten Ausflügen und relevanten Erlebnissen an. Make übernahm die Mikro-Interaktionen und Übergänge, und der Figma MCP-Server hielt alles mit dem Designsystem der Marke verbunden. Innerhalb von Tagen hatte sie einen funktionierenden Prototyp, der ehrgeizig genug war, um der Führungsebene zu zeigen, was möglich war – und konkret genug, um ein echtes Gespräch darüber zu beginnen, was als Nächstes entwickelt werden sollte.

Die Auswirkungen

Justine und ihr Team bringen jetzt den Prototyp zu den Marken- und Marketing-Stakeholdern, damit diese etwas Konkretes haben, auf das sie reagieren und sich darauf abstimmen können, anstatt nur einen Foliensatz zu sehen.

Probiere dies aus, wenn Folgendes zutrifft:

• Du musst die Stakeholder auf eine Vision ausrichten, die noch nicht existiert.
• Die Idee ist zu nuanciert, um sie durch ein Dokument oder einen Foliensatz zu kommunizieren.
• Du möchtest testen, ob eine Idee Potenzial hat, bevor du in Design- und Entwicklungszeit investierst.

4. Konzentriere dich auf dein Designsystem

Wenn die Arbeit vom Design in Code übergeht, ist es wichtig, dass die Implementierung aus deinem tatsächlichen Designsystem anstatt aus generischen Mustern schöpft. Früher war das ein manueller Prozess, bei dem Entwickler*innen Spezifikationen referenzierten und Komponenten von Hand nachbauten. Jetzt können Teams MCP nutzen, um ihre tatsächlichen Komponenten, Token und Layoutstrukturen direkt in die Codierungsumgebung zu übertragen, damit KI-Coding-Tools von Anfang an aus dem echten System generieren.

So bewahrte Affirm den Designkontext von der Arbeitsfläche bis zum Code

Affirm entwickelt Finanzprodukte, mit denen Kund*innen Einkäufe an der Kasse in Abos aufteilen können. Das Checkouterlebnis erstreckt sich über Desktop, mobile Web, Android und iOS – und diese Erfahrungen konsistent zu halten, ist eine ständige Herausforderung.

Die Herausforderung

Das Team wollte den Abos Abzeichen hinzufügen, damit Kund*innen schneller die richtige Option finden können, etwa um anzuzeigen, welcher Plan 0% Zinsen hat oder welcher am schnellsten abbezahlt wird. Es gab jedoch eine Menge Kombinationen, die durchgearbeitet werden mussten: Welches Abzeichen welcher Kundin/welchem Kunden, bei welcher Kasse, auf welchem Gerät angezeigt werden soll. Jede Variation musste über all diese Oberflächen hinweg dem Designsystem treu bleiben und selbst eine einfache Änderung von der Idee bis zur Produktion brauchte früher etwa sechs Wochen.

Die Freischaltung

Ein*e PM prototypisierte die Abzweigungsvariationen in Figma Make – von der Idee bis zum funktionierenden Prototypen in zwei Tagen anstatt der üblichen sechs Wochen. Designer*innen verfeinerten die gewählte Richtung auf der Arbeitsfläche, und als das Team bereit war, dieses Design in die Produktion zu überführen, luden sie die Designartefakte auf den Figma MCP-Server und verbanden ihn mit dem Cursor. MCP übertrug die Komponenten, die Token und die Layoutstruktur direkt in die Coding-Umgebung, wo ein KI-Agent die Frontend-Implementierung generierte. Entwickler*innen nutzten dies als Startpunkt, um Produktionscode zu coden, der bereits die Designs widerspiegelte, anstatt sie von Grund auf neu zu interpretieren.

Die Auswirkungen

Allein das Erstellen von Prototypen verkürzte sich von sechs Wochen auf ein paar Tage. Aber noch wichtiger war Folgendes: Weil MCP den Designkontext durch den gesamten Prozess beibehalten hat, mussten die Entwickler*innen die Designs nicht neu interpretieren oder Komponenten von Grund auf neu erstellen. Das Gelieferte entsprach genau dem, was die Designer*innen beabsichtigt hatten.

Probiere dies aus, wenn Folgendes zutrifft:

• Du überführst ein Design in die Produktion und möchtest, dass die Implementierung deinem Designsystem treu bleibt.
• Du musst mehrere Oberflächen oder Plattformen konsistent mit dem gleichen Design halten.
• Dein Designsystem-Team führt Änderungen durch und möchte, dass diese Updates automatisch durch den Flow in die Codierungsumgebung der Ingenieur*innen gelangen, damit neuer Code das aktuelle System von Anfang an widerspiegelt.

Die Teams, die heute großartige Produkte liefern, sind nicht an ein Tool oder eine Abfolge gebunden – sie wählen aus, wo sie beginnen, basierend auf der Frage, die sie beantworten müssen, und bewegen sich zwischen den Oberflächen, während die Arbeit sich entwickelt. Erfahre mehr über die neuen Workflows, die Produkte im KI-Zeitalter gestalten.