Verbinden met een ontwerpbibliotheek
Genereer en verfijn met je feitelijke componenten, tokens en variabelen – niet met placeholder-UI die je later moet vervangen.
Afrekeningsstromen genereren op ontwerpcanvas
Bouw complete e-commerce checkout-ervaringen met Figma's agent—gebruik makend van je eigen componenten, tokens en stijlen. Beschrijf de stroom die je wilt en kijk hoe het direct vorm krijgt in je bestand.
Afrekeningsopties met hogere betrouwbaarheid
Genereer echte afrekeningsstromen met je ontwerpsysteem, zodat elk scherm er vanaf het begin productieklaar uitziet.
Meer richtingen verkennen, sneller
De Figma-agent genereert complete afrekeningsstromen met behulp van je eigen componenten en stijlen – niet met placeholder-wireframes. Test verschillende aantal stappen, layouts en voortgangen zonder elke keer vanaf nul te beginnen.
Schaf de structuur af, maar behoud de stroom
Niet meer dat herhalende werk van winkelwagensamenvattingen, formuliervelden en betaalschermen instellen. Beschrijf wat je nodig hebt en laat de agent de structuur bouwen zodat jij je kunt concentreren op de ervaring.
Team vanaf het begin af op elkaar afstemmen
Gegenereerde afrekeningsstromen bevinden zich in hetzelfde bestand waarin je team werkt. Iedereen ziet de nieuwste versie, kan inline opmerkingen maken en er meteen op voortbouwen – geen afzonderlijke overdracht vereist.
De functies achter de agent
Een nadere blik op wat de Figma-agent onderscheidt: gemaakt voor de manier waarop ontwerpteams ook echt werken.
Parallelle prompts
Voer meerdere prompts tegelijk uit, zodat je mogelijke richtingen parallel kunt evalueren en geen tijd verspilt aan elk afzonderlijk.
Deelbare threads
Deel een thread en je team ziet de volledige prompt, context en iteratiegeschiedenis achter elk ontwerp. Geen aparte overdracht nodig.
Vaardigheden
Combineer de workflows en conventies van je team tot herbruikbare /opdrachten die iedereen on-demand kan uitvoeren.
Figma voelt als een natuurlijke extensie van mijn hand. Ik doe de ideevorming van mijn ontwerpen op het canvas, en nu brengt de agent het naar de laatste stap. Met mijn aangesloten ontwerpbibliotheken kan ik sneller dan ooit van ontwerp naar code gaan.
Andy Madrick
Productontwerper, Notion
Aan de slag met de Figma-agent
Stap 1: De agent openen
Selecteer Agents in de linker zijbalk of druk op CMD + Enter. Voeg een frame aan je canvas toe op de plek waar de afrekeningsstroom wordt gegenereerd.
Stap 2: Je afrekeningsstroom beschrijven
Vertel de agent wat je nodig hebt: aantal stappen, betalingsopties, ondersteuning voor afrekening als gast. Wijs het aan naar je ontwerpbibliotheek zodat het je echte componenten gebruikt.
Stap 3: Beoordelen op het canvas
Controleer de gegenereerde schermen op je canvas. Verfijn in dezelfde thread of start een parallelle thread om een andere stroomstructuur te verkennen.
Stap 4: Blijven itereren
Maak een nieuwe prompt om stappen aan te passen, upsells toe te voegen of de lay-out te wijzigen. Alles blijft bewerkbaar, zodat je met de hand kunt verfijnen of prompts kunt blijven toevoegen.
Agent-expert worden
De Figma Design-agent is er
Lees meerBekijk de Figma AI-agent in actie en zie hoe je die in je eigen workflows kunt inzetten.
Werken met de Figma-agent
Aan de slagPraktische testomgeving om de mogelijkheden van de Figma-agent te verkennen – van bulkbewerkingen tot aan de implementatie van feedback – met ingebouwde stapsgewijze begeleiding.
De Figma-agent in je ontwerpworkflows gebruiken
Nu bekijkenLeer hoe je de Figma-agent in je ontwerpworkflows kunt gebruiken met een stapsgewijze tutorial van het Figma-team.
Veelgestelde vragen
Met een afrekeningsstroomgenerator kun je je de schermen en stappen opzetten die gebruikers doorlopen bij het voltooien van een aankoop –winkelwagenoverzicht, verzendingsgegevens, betaling en bevestiging. De Figma-agent genereert deze stromen direct op je canvas met behulp van je ontwerpsysteem, zodat je productieklare schermen krijgt in plaats van generieke wireframes. Dit versnelt het proces van de verkenning van verschillende afrekeningsstructuren en lay-outs.
Open de Figma-agent vanuit de linker zijbalk of druk op CMD + Enter. Beschrijf het afrekenproces dat je nodig hebt - aantal stappen, optie voor afrekening als gast, betaalmethoden - en verwijs de agent naar je ontwerpbibliotheek. De agent genereert de schermen op je canvas met behulp van je echte componenten. Van daaruit kun je verfijnen met vervolgprompts of met de hand bewerken.
Een volledige afrekeningsstroom omvat doorgaans een winkelwagenoverzicht, een formulier voor verzendinformatie, betalingsgegevens, beoordeling van de bestelling en een bevestigingsscherm. Afhankelijk van je product kun je opties voor afrekening als gast, opgeslagen adressen, velden voor promocodes of upsell-modules toevoegen. De Figma-agent kan al deze elementen genereren met de bestaande componenten – beschrijf gewoon in je prompt wat je nodig hebt.
Er is niet één goed antwoord – dat hangt af van je product en je doelgroep. Sommige e-commerce websites gebruiken een afrekening met één pagina voor snelheid; andere sites breken de afrekening op in drie tot vijf stappen voor duidelijkheid. Met de Figma-agent kun je de verschillende aantallen stappen parallel genereren en vergelijken, zodat je kunt beoordelen wat voor jouw gebruikers het beste werkt voordat je je vastlegt op één aanpak.
De Figma-agent is beschikbaar met alle betaalde Figma-abonnementen. Je vindt het in de linker zijrail in Figma Design. Tijdens de huidige open bèta worden er geen AI-credits verbruikt, dus het is een goed moment om te verkennen, experimenteren, en je feedback met ons te delen.
Sneller bouwen met de Figma-agent