Was es jetzt braucht, um großartige Produkte zu entwickeln

Mit KI kann man innerhalb weniger Stunden von einem Prompt zu einem klickbaren Ergebnis gelangen. Aber nur weil man schnell ans Ziel kommt, heißt das noch lange nicht, dass man etwas Großartiges geschaffen hat. Ein ausgefeilter Prototyp hilft dir nicht dabei, die großen Fragen zu beantworten: Ist diese Richtung die beste oder nur die erste? Fühlt es sich nach uns an? Und vor allem: Lohnt es sich überhaupt, das zu entwickeln?

Die Teams, die diese Fragen gut beantworten, sind in drei Bereichen stark – Schnelligkeit, Richtung und Differenzierung. Sie bewegen sich unaufhörlich auf die Zielgerade zu, wägen viele Möglichkeiten ab, bevor sie sich für eine entscheiden, und gestalten das Ergebnis so, wie es nur sie es schaffen würden.

Geschwindigkeit: Behalte den Schwung bei, bis das Produkt auf den Markt kommt

Wenn die ersten 80 % leicht von der Hand gehen, kann es passieren, dass Teams in den letzten 20 % der Arbeit an Schwung verlieren, da ein Prototyp den Eindruck erwecken kann, dass das Team ihn tatsächlich auf den Markt bringen könnte. Produktentwickler*innen stellen möglicherweise fest, dass der von ihnen schnell erstellte Prototyp ihr Designsystem gar nicht nutzt oder zusätzlichen Aufwand verursacht, wenn er vom Design in den Code übertragen wird. Die Herausforderung besteht darin, diese anfängliche Geschwindigkeit beizubehalten, während die Arbeit immer detaillierter wird, immer mehr Menschen einbezieht und die Veröffentlichung näher rückt.

Erfahre, wie Sneha Narahalli, Senior Vice President of Technology bei Sephora, Geschwindigkeit nicht nur für einen schnellen Versand nutzt.

Verwende das schnellste Medium für die Aufgabe

Während die Produkte Gestalt annehmen, arbeiten die Teams kontinuierlich an Verbesserungen – von kleinen optischen Anpassungen bis hin zu Änderungen im Funktionsverhalten. Welcher Ansatz am schnellsten ist, hängt davon ab, was du erreichen möchtest. Wenn beispielsweise der Abstand zwischen einem Formularfeld und einer Schaltfläche zu groß ist, geht es möglicherweise schneller, den Abstand direkt in Figma anzupassen, als die Änderung in einem Prompt zu beschreiben. Andere Änderungen lassen sich schneller im Code vornehmen. Wenn du einen Rechner entwickelst, mit dem Benutzer*innen den Preis anhand der Anzahl der Teammitglieder schätzen können, die das Produkt nutzen werden, musst du keine separaten Versionen für 10, 20 oder 50 Personen entwerfen. Du kannst im Code eine einfache Berechnung einrichten, sodass sich der Preis automatisch anpasst, sobald sich die Zahl ändert.

Die größten Geschwindigkeitsgewinne lassen sich erzielen, indem man für jede Art von Änderung den schnellsten Weg wählt, anstatt jede Aufgabe zwangsläufig über denselben Workflow abzuwickeln. In Figma kann das bedeuten, dass man je nach der gewünschten Änderung zwischen direkter Bearbeitung, Prompting und coden wechselt.

Wähle das richtige Tool für die Aufgabe:

• Nimm präzise visuelle Bearbeitungen direkt in Figma Make mithilfe des Eigenschaftenpanels vor. Passe Aspekte wie Abstände, Typografie, Layout oder Größen an, ohne jede Änderung in einem Prompt beschreiben zu müssen.
• Kopiere eine Make-Vorschau als bearbeitbare Ebenen in Figma Design, wo das Team sie direkt verfeinern und weiterentwickeln kann.
• Verbinde Figma Make mit deiner Codebasis, um Änderungen anhand des bestehenden Produktcodes vorzunehmen und in der Vorschau anzusehen, und sende diese Änderungen anschließend zur Überprüfung an die Entwicklung.

Informiere alle Teammitglieder über diese Vorgehensweise

Während die Arbeit im Team voranschreitet, bedeutet die Aufrechterhaltung des Arbeitstempos, nützliche Arbeitsabläufe wiederholbar zu gestalten. Angenommen, ein Designer findet einen schnellen und zuverlässigen Weg, um einen neuen Flow auf die Einhaltung der Barrierefreiheitsstandards zu überprüfen. Anstatt diesen Prozess für sich zu behalten, kann er in einen wiederverwendbaren Workflow für das gesamte Team umgewandelt werden. In Figma können Teams diese wiederholbaren Vorgehensweisen in Skills oder Plugins umwandeln, die jeder wiederverwenden kann.

Stelle dem gesamten Team in Figma bessere Arbeitsmethoden zur Verfügung:

• Erstelle einen benutzerdefinierten Skill selbst oder mit Hilfe des Figma-Agenten und teile ihn mit dem Team für wiederholbare Workflows wie Designfeedback, Benutzer-Tests oder Compliance-Probleme erkennen.
• Erstelle einen Prompt für den Figma-Agenten, um ein wiederverwendbares Plugin für eine Aufgabe zu erstellen, die dein Team häufig auf der Arbeitsfläche ausführt, z. B. das automatische Anordnen von Bildern in einem Layout, und teile es anschließend, damit andere denselben Schnellzugriff verwenden können.

Ausrichtung: Erst breit anlegen, dann entscheiden

Früher dauerte es länger, verschiedene Ansätze zu prüfen, was Teams manchmal dazu zwang, ihre Auswahl schnell einzugrenzen oder Ideen zu hypothetisch zu halten, um wirklich zu verstehen, wie (oder ob) sie funktionieren würden. Nun ermöglichen genau dieselben Werkzeuge, die eine erste Ausrichtung beschleunigen, auch, schneller mehr Alternativen auszuprobieren und zu prüfen, wie vielversprechende Ideen sich in weiteren Situationen bewähren, bevor man sich festlegt.

Erfahre, wie Ian Silber, Leiter des Produktdesigns bei OpenAI, und sein Team breit gefächerte Ideen erkunden, bevor sie entscheiden, was auf den Markt gebracht wird.

Überprüfe die Ausnahmefälle, bevor du etwas festlegst

Ein einzelner Prototyp verbirgt die Verzweigungen, die fehlerhaften Bereiche und die holprigen Übergänge, bei denen selbst ein vielversprechendes Konzept in der Praxis zu Problemen führen kann. Nehmen wir einmal an, du konzipierst einen Flow für die Buchung von Terminen im Friseursalon. Jemand wählt einen freien Slot aus und erhält dann eine Bestätigung. Aber der Prototyp zeigt nicht, was passiert, wenn in dieser Woche nichts verfügbar ist, wenn der Friseur absagt oder wenn der Kunde/die Kundin umplanen muss. Das sind die Momente, in denen ein Prototyp nicht ausreicht, um das Gesamtbild zu veranschaulichen, und in denen sich herausstellt, ob der gewählte Ansatz tatsächlich tragfähig ist.

Verschaffe dir den vollständigen Überblick in Figma:

• Mit Code-Ebenen kannst du wichtige Bildschirme oder Zustände aus einem Prototyp in bearbeitbare Designebenen ziehen, sodass du den gesamten Flow auf der Arbeitsfläche überprüfen, Änderungen vornehmen und diese Änderungen wieder auf den Prototyp anwenden kannst.
• Frag den Figma-Agenten, um fehlende Zustände oder Zweige aus einem bestehenden Bildschirm oder Flow zu erstellen.
• Fordere den Figma-Agenten auf, Lücken oder Szenarien aufzuzeigen, die der aktuelle Flow möglicherweise nicht berücksichtigt.

Vergleicht die Ausrichtungen gemeinsam

Ideen lassen sich leichter beurteilen, wenn sie in einem größeren Zusammenhang stehen. Wenn man mehrere Ansätze nebeneinanderstellt, werden die Kompromisse deutlicher, zum Beispiel, welcher Ansatz die visuelle Identität stärker in den Vordergrund rückt und welcher einer übersichtlicheren UI den Vorrang einräumt. Zudem finden viele KI-Experimente isoliert statt, doch Teams müssen ihre Ideen vergleichen, darauf reagieren, sie hinterfragen und aufeinander aufbauen. Eine gemeinsame Arbeitsfläche bietet ihnen einen Ort, an dem sie dies tun können, während die Anweisungen und die Diskussion an einem Ort bleiben, sodass das Feedback nicht in einem separaten Thread untergeht.

Erkunde und vergleiche Ausrichtungen in Figma:

• Frag den Figma-Agenten, um aus einer Eingabe mehrere Varianten zu generieren, sodass die Diskussion mit deinem Team mit mehreren Optionen beginnt und nicht nur mit einer einzigen.
• Dupliziere eine interaktive Code-Ebene und probiere daneben Alternativen aus, wobei jede Version realistisch genug sein sollte, um zu vergleichen, wie sie sich verhält, und nicht nur, wie sie aussieht.

Differenzierung: Gestalte Produkte, die Aufmerksamkeit erregen

Wenn KI es schafft, mehr Menschen zu einem soliden Ausgangspunkt zu führen, erfordert es bewusstere Entscheidungen, um sich von der Masse abzuheben. Differenzierung entsteht dadurch, dass man über das erste Ergebnis hinausgeht und das Erlebnis so gestaltet, bis es eine Sichtweise widerspiegelt, die ganz und gar die eigene ist.

Erfahre von Teo Connor, Vice President of Design bei Airbnb, wie man Qualität in einer Welt bewahrt, in der es einfacher denn je ist, von 0 auf 1 zu kommen..

Starte mit einer soliden Basis

Ein starkes Designsystem vermittelt die Botschaft deines Produkts. Seine Komponenten und Variablen spiegeln Tausende kleiner Entscheidungen darüber wider, was dazugehört und was nicht. Dazu gehören Details wie die Wahl des richtigen Rot-Tons für die Marke, wie abgerundet eine Karte sein sollte, wie viel Abstand zwischen den Elementen sein sollte oder welche Gestaltung einer Schaltfläche die primäre Aktion signalisiert. Wenn dein Team diese Optionen in das System integriert, können KI-generierte Inhalte dieselbe visuelle Sprache übernehmen, anstatt auf generische Standardeinstellungen zurückzugreifen. Die Eigenschaften, die dein Produkt auszeichnen, spiegeln sich konsequent in allem wider, was das Team erschafft.

Mache deine Standards in Figma wiederverwendbar:

• Bitte den Figma-Agenten, sich an deinem Designsystem zu orientieren und Stellen zu kennzeichnen, an denen die Arbeit davon abweicht.
• Verwende Code Connect mit Figma MCP, um den Agenten zu zeigen, welche Komponenten in Figma mit den Komponenten übereinstimmen, die dein Team im Code verwendet, damit sie mit demselben System arbeiten können, anstatt zu raten oder Komponenten neu zu schreiben.

Optimiere die Ausgabe direkt

Prompts sind sehr wirkungsvoll, aber schon eine kleine Änderung durch einen weiteren Prompt kann dazu führen, dass mehr neu generiert wird, als ursprünglich beabsichtigt war. Großartige Arbeit entsteht dadurch, dass man Verantwortung für das Ergebnis übernimmt: Man behält bei, was funktioniert, ändert, was nicht funktioniert, und feilt so lange an den Details, bis das Ergebnis die eigene Absicht widerspiegelt. Stell dir vor, du erstellst einen benutzerdefinierten Shader, bei dem nur der Leuchteffekt zu intensiv ist. Wenn du über einen weiteren Prompt nach einer Korrektur fragst, riskierst du, eine Version zu erhalten, bei der sich auch die Farbe, die Weichzeichnung und das Muster verändert haben. Passe stattdessen die Intensität des Leuchteffekts manuell an.

Übernimm die Kontrolle in Figma:

• Kombiniere Modelle verschiedener Anbietern in Figma Weave in Figma Weave, um dem gewünschten Ergebnis näher zu kommen.
• Verwende Shader-Effekte, um visuelle Effekte wie Verzerrung, Körnung oder Textur direkt auf der Arbeitsfläche anzuwenden.

Mehr zum Ausdruck bringen

Sobald du die Ausgabe direkt optimieren kannst, kannst du sie auch durch visuelle Elemente wie individuelle Illustrationen und Animationen weiter aufwerten. Früher bedeutete das, ein weiteres Werkzeug oder einen weiteren Spezialisten hinzuziehen zu müssen, doch diese Einschränkungen lösen sich zunehmend auf. Angenommen, ein Designer möchte, dass sich ein Menü mit einem bestimmten Effekt öffnet, anstatt einfach nur zu erscheinen, oder dass eine Karte einen schimmernden Farbverlauf anstelle einer einfarbigen Füllung verwendet. Nun kann dieser Designer beides erstellen, ohne die Arbeitsfläche zu verlassen, und mithilfe des Figma-Agenten seine Vision zum Leben erwecken.

Pushe dein Produkterlebnis weiter:

• Erstelle mit Figma Draw Vektorgrafiken direkt auf der Arbeitsfläche.
• Generiere und kombiniere Bilder oder Videos in Weave.
• Wechsle für einen Frame in den Figma Motion Mode und ziehe dann die Ebenen auf der Zeitleiste, um festzulegen, wann und wie lange die einzelnen Teile animiert werden sollen, oder wende dich einfach per Chat an den Figma-Agenten, um eine erste Version (v1) zu erhalten.
• Beschreibe einen benutzerdefinierten Shader, wie den Schimmer der Karte, und lass den Figma-Agenten einen ersten Entwurf erstellen, den man dann auf der Arbeitsfläche anpassen kann.

Die Entwicklung großartiger Produkte ist nicht gerade mühelos geworden. Was sich geändert hat, ist lediglich, wo die harte Arbeit geleistet wird. Ein Prototyp kann der erste Schritt sein, aber die Teams müssen die Dynamik bis zum Schluss aufrechterhalten, die richtige Richtung einschlagen und etwas Einzigartiges schaffen. Geschwindigkeit, Ausrichtung und Differenzierung sorgen gemeinsam dafür, dass aus einer schnelleren Entwicklung ein Produkt entsteht, das die Menschen tatsächlich nutzen möchten.