Mit einer Designbibliothek verbinden
Erstelle und verfeinere deine Inhalte anhand deiner tatsächlichen Komponenten, Tokens und Variablen – und nicht anhand von Platzhaltern in der Benutzeroberfläche, die du später wieder austauschen musst.
Checkout-Flows auf deiner Design-Arbeitsfläche erstellen
Erstelle mit dem Figma-Agenten komplette E-Commerce-Checkout-Erlebnisse – unter Verwendung deiner echten Komponenten, Tokens und Stile. Beschreibe den gewünschten Ablauf und sieh zu, wie er direkt in deiner Datei Gestalt annimmt.
Entdecke die Checkout-Optionen
Erstelle echte Checkout-Flows mithilfe deines Designsystems, damit sich jeder Bildschirm von Anfang an produktionsreif anfühlt.
Entdecke mehr Richtungen, und zwar schneller
Der Figma-Agent generiert vollständige Checkout-Flows unter Verwendung deiner tatsächlichen Komponenten und Stile – keine Platzhalter-Wireframes. Teste verschiedene Schritte, Layouts und Abläufe, ohne jedes Mal von vorne anfangen zu müssen.
Das Gerüst entfernen, den Flow aufrechterhalten
Spar dir die mühsame Arbeit, Warenkorbübersichten, Formularfelder und Zahlungsseiten einzurichten. Beschreibe, was du brauchst, und lass den Agenten die Struktur aufbauen, damit du dich ganz auf das Erlebnis konzentrieren kannst.
Bring dein Team von Anfang an auf einen Nenner
Die generierten Checkout-Flows befinden sich in derselben Datei, in der dein Team arbeitet. Alle sehen die neueste Version, können direkt darin Kommentare hinterlassen und sofort darauf aufbauen – eine separate Übergabe ist nicht nötig.
Die Funktionen hinter dem Agenten
Ein genauerer Blick darauf, was den Figma-Agenten so besonders macht – entwickelt für die Art und Weise, wie Designteams tatsächlich arbeiten.
Paralleles Prompting
Führe mehrere Prompts gleichzeitig aus, damit du die Anweisungen parallel auswertest und nicht bei jeder einzelnen nacheinander Zeit verlierst.
Teilebare Threads
Teile einen Thread, und dein Team sieht den vollständigen Prompt, den Kontext und den gesamten Entwicklungsverlauf hinter jedem Entwurf. Keine separate Übergabe erforderlich.
Skills
Fasse die Workflows und Konventionen deines Teams in wiederverwendbare /Befehle zusammen, die jeder bei Bedarf ausführen kann.
Figma fühlt sich an wie eine natürliche Verlängerung meiner Hand. Ich entwickle meine Designideen auf der Leinwand, und jetzt bringt der Agent das Ganze über die Ziellinie. Mit meinen verbundenen Design-Bibliotheken kann ich schneller denn je vom Design zum Code wechseln.
Andy Madrick
Produktdesigner, Notion
Erste Schritte mit dem Figma-Agenten
Schritt 1: Öffne den Agenten
Wähle „Agenten“ in der linken Seitenleiste aus oder drücke CMD + Enter. Füge auf deiner Arbeitsfläche einen Rahmen hinzu, in dem der Bezahlvorgang generiert wird.
Schritt 2: Beschreibe deinen Checkout-Flow
Sag dem Agenten, was du brauchst – Anzahl der Schritte, Zahlungsoptionen, Unterstützung beim Check-out für Gäste. Verweise ihn auf deine Designbibliothek, damit er deine eigenen Komponenten verwendet.
Schritt 3: Überprüfung auf der Arbeitsfläche
Schau dir die generierten Bildschirme auf deiner Arbeitsfläche an. Verfeinere im gleichen Thread oder starte einen parallelen Thread, um eine andere Flow-Struktur zu erkunden.
Schritt 4: Weiter iterieren
Prompte noch einmal, ob die Schritte angepasst, Upsells hinzugefügt oder das Layout geändert werden sollen. Alles bleibt bearbeitbar, sodass du es von Hand optimieren oder weiter Prompts ausführen kannst.
Werde Experte für Agenten
Der Design-Agent von Figma ist da
WeiterlesenSchau dir den KI-Agenten von Figma in Aktion an und erfahre, wie du ihn in deine eigenen Arbeitsabläufe integrieren kannst.
Mit dem Figma-Agenten arbeiten
LoslegenEin interaktiver Spielplatz, auf dem du die Funktionen des Figma-Agents erkunden kannst – von Massenbearbeitungen bis hin zur Umsetzung von Feedback –, mit einer direkt integrierten Schritt-für-Schritt-Anleitung.
So nutzt du den Figma-Agent in deinen Design-Workflows
Jetzt ansehenErfahre in einem Schritt-für-Schritt-Tutorial vom Figma-Team, wie du den Figma-Agent in deinen Design-Workflows nutzen kannst.
FAQ
Ein Checkout-Flow-Generator hilft dir dabei, die Bildschirme und Schritte zu erstellen, die Benutzer*innen beim Abschluss eines Kaufs durchlaufen – Warenkorbübersicht, Versanddetails, Bezahlung und Bestätigung. Der Figma-Agent generiert diese Flows direkt auf deiner Arbeitsfläche unter Verwendung deines Designsystems, sodass du produktionsreife Bildschirme anstelle von generischen Wireframes erhältst. Er beschleunigt den Prozess der Erkundung verschiedener Checkout-Strukturen und -Layouts.
Öffne den Figma-Agenten über die linke Seitenleiste oder drücke CMD + Enter. Beschreibe den gewünschten Checkout-Flow – Anzahl der Schritte, Option für den Checkout als Gast, Zahlungsmethoden – und verweise den Agenten auf deine Designbibliothek. Der Agent generiert die Bildschirme auf deiner Arbeitsfläche unter Verwendung deiner echten Komponenten. Von dort aus kannst du die Eingabe mit weiteren Prompts verfeinern oder manuell bearbeiten.
Ein vollständiger Checkout-Flow umfasst in der Regel eine Warenkorbzusammenfassung, ein Versandinformationsformular, Zahlungsdetails, eine Auftragsüberprüfung und einen Bestätigungsbildschirm. Je nach Produkt kannst du Optionen für den Gast-Checkout, gespeicherte Adressen, Felder für Gutscheincodes oder Upselling-Module hinzufügen. Der Figma-Agent kann all das mithilfe deiner vorhandenen Komponenten erstellen – beschreibe einfach in deinem Prompt, was du brauchst.
Es gibt keine allgemeingültige richtige Antwort – das hängt von deinem Produkt und deiner Zielgruppe ab. Manche E-Commerce-Seiten nutzen aus Gründen der Schnelligkeit einen einseitigen Bezahlvorgang; andere gliedern ihn der Übersichtlichkeit halber in drei bis fünf Schritte auf. Mit dem Figma-Agent kannst du verschiedene Schrittfolgen parallel erstellen und vergleichen, sodass du herausfinden kannst, was für deine Benutzer*innen am besten funktioniert, bevor du dich für einen Ansatz entscheidest.
Der Figma-Agent ist in allen kostenpflichtigen Figma-Abos verfügbar. Du findest ihn in der linken Seitenleiste in Figma Design. Während der aktuellen Open Beta werden keine KI-Credits verbraucht – es ist also ein guter Zeitpunkt, um das Spiel zu erkunden, zu experimentieren und uns dein Feedback mitzuteilen.
Schneller entwickeln mit dem Figma-Agenten