Figma AI werkt alleen zo goed als de instructies die je eraan geeft. Vage prompts produceren generieke lay-outs die je vanaf nul moet herbouwen. Specifieke prompts — met schermtype, secties, componenten, framegrootte en afstand — produceren routinematig 70–85% productie-klare output in één keer. Deze 15 sjablonen zijn gestructureerd voor Figma's 2026 AI stack: de Design Agent, Figma Make, Skills, en de gratis functies (auto layout, lagen hernoemen, inhoud vervangen) die geen credits kosten.

Kopieer een willekeurig sjabloon, vervang de placeholders tussen haakjes voor je product, en voer het door de gratis Prompt Optimizer als je striktere beperkingen wilt. Voor optimalisatie met één klik binnen ChatGPT, Claude, en Gemini terwijl je agent-instructies opstelt, voegt TresPrompt ICCSSE-stijl structuur toe aan je zijbalk.

Kernpunt

Elke sterke Figma AI prompt noemt vier dingen: welk scherm je bouwt, welke gepubliceerde componenten te gebruiken, de framegrootte, en afstandsregels. Voeg negatieve beperkingen toe ("gebruik geen naamloze frames," "geen lorem ipsum") en de agent stopt met gokken. Skills coderen deze patronen zodat je ze niet elke sessie hoeft over te typen.

Design Agent Sjablonen (Schermen op Canvas)

1 Mobiele instellingenpagina
Maak een mobiele instellingenpagina (390×844) met: 1. Account — avatar, naam, e-mail, bewerkingsknoppen 2. Notificaties — schakelaars voor e-mail, push, SMS 3. Uiterlijk — donkere modus schakelaar, lettergrootte selector 4. Beveiliging — wachtwoord wijzigen, 2FA schakelaar 5. Voettekst — destructieve uitlogknop, app versie tekst Gebruik alleen gepubliceerde componenten. Auto layout: 16px item afstand, 32px tussen secties. Section Header component voor groepslabels.
2 Dashboard overzicht (desktop)
Maak een desktop analytics dashboard (1440×900) met: - Top navigatie: logo, zoeken, gebruikersmenu - Linker zijbalk: 5 navigatie-items, actieve staat op "Overzicht" - Hoofdgedeelte: 4 KPI kaarten op een rij, lijndiagram eronder, recente activiteitentabel (5 rijen) Gebruik design system variabelen voor kleur en afstand. Card component voor KPI's. Table component voor activiteit. Gebruik geen placeholder grafiekdatalabels zoals "Serie 1."
3 Onboarding flow (3 frames)
Maak 3 mobiele onboarding schermen (390×844), van links naar rechts: 1. Welkom — kop, ondertekst, primaire CTA "Aan de slag" 2. Machtigingen — lijst notificaties + locatie met schakelaars 3. Succes — vinkje illustratie gebied, "Je bent klaar" CTA Gebruik Primary Button en Secondary Button componenten. Voortgangsindicator die stap 1/3, 2/3, 3/3 toont. Consistente 24px horizontale padding op alle frames.
4 Lege staat + fout staat
Maak twee mobiele frames (390×844): Frame A — Lege zoekresultaten: icoon gebied, kop "Geen resultaten", body tekst, secundaire "Filters wissen" knop Frame B — Fout: waarschuwingsicoon, "Er is iets misgegaan", primaire "Opnieuw proberen", tertiaire "Contact opnemen" Gebruik gepubliceerde Empty State en Alert componenten indien beschikbaar. Gecentreerde inhoud, max breedte 280px voor tekstblok.
5 Toegankelijke instellingen (agent + a11y)
Maak een mobiele instellingenpagina (390×844) met toegankelijkheidseisen: - Interactieve elementen minimaal 44×44px aanraakdoelen - Tekstcontrast minimaal 4.5:1 (gebruik design system tekstkleuren) - Kophiërarchie H1 → H2, geen overgeslagen niveaus - Schakelaars bevatten zichtbare tekstlabels (niet alleen icoon) - Fouttoestanden gebruiken kleur EN tekst (niet alleen kleur) Gebruik gepubliceerde componenten. Auto layout 16px / 32px afstand.

📬 Haal je hier waarde uit?

Eén bruikbaar AI-inzicht per week. Plus een gratis prompt pack wanneer je je abonneert.

Gratis abonneren →

Figma Make Sjablonen (Prototype / Code)

6 Marketing landing (Make)
Bouw een eenpagina marketing site van dit Figma frame: - Hero: kop, onderkop, e-mail capture + CTA - 3 functie kolommen met iconen - Social proof logo's rij - Voettekst met links Match afstand en kleuren van het geselecteerde frame. Mobiel-responsief. Geen externe bibliotheken tenzij gespecificeerd in frame notities.
7 Interactief prototype (Make)
Maak een klikbaar prototype van frames [lijst frame namen]: - Klikken op "Aanmelden" navigeert naar registratieformulier frame - Versturen toont succes toast staat - "Terug" keert terug naar vorig scherm Gebruik componenten uit het bestand. Behoud hover staten op primaire knoppen. Voeg geen nieuwe schermen toe die niet in het ontwerpbestand staan.

Skills Sjablonen (Herbruikbare Agent Instructies)

Bewaar deze als Skills markdown bestanden zodat de agent elke keer teamconventies volgt.

8 Skill: /instellingen-pagina
Bij het maken van instellingenschermen: - Gebruik altijd Section Header + gegroepeerde lijst patroon - Voeg voettekst toe met app versie (caption stijl) en destructieve uitlog - Mobiel standaard 390×844 tenzij gebruiker desktop specificeert - Gebruik Toggle component voor boolean instellingen, nooit aangepaste checkboxes - Afstand: 16px binnen groepen, 32px tussen groepen, 24px scherm padding
9 Skill: /data-tabel
Bij het maken van tabellen: - Gebruik Table/Header en Table/Row componenten - Voeg sorteer icoon kolom alleen toe als gebruiker vraagt - Rijhoogte 48px minimum voor aanraking - Inkorten van lange tekst met ellipsis, nooit meer dan 2 regels in cellen - Lege staat onder tabel als nul rijen

Gratis Functies (Nul Credits)

10 Inhoud Vervangen (batch)
Vervang alle lorem ipsum in het geselecteerde frame met realistische [B2B SaaS / e-commerce / zorgverlening] tekst. Namen: divers, geloofwaardig. Adressen: VS formaat. Productnamen: fictief maar professioneel. Houd karakteraantallen vergelijkbaar met placeholders zodat layout niet breekt.
11 Lagen hernoemen (handoff prep)
Hernoem alle lagen op deze pagina met patroon: [Sectie]/[Component]/[Staat] Voorbeeld: Instellingen/NotificatieRij/Standaard Hernoem geen vergrendelde achtergrond frames. Sla verborgen lagen over.

MCP + Code Handoff Prompts (Claude Code / Cursor)

12 React van Figma frame
Lees het geselecteerde Figma frame via MCP. Genereer een React component met [Tailwind / onze Shadcn bibliotheek]: - Match afstand en kleuren van design tokens in het bestand - Gebruik semantische HTML (nav, main, section) - Voeg responsieve breakpoints toe op 768px en 1024px - Exporteer als SettingsPage.tsx met getypte props voor gebruikersdata Hardcode geen hex waarden — gebruik token namen van Figma variabelen.

Verkenning & Vergelijking Sjablonen

13 Drie layout richtingen
Genereer 3 verschillende layout benaderingen voor [schermtype] op desktop 1440×900: A — zijbalk navigatie B — bovenste tab navigatie C — kaart-gebaseerde hub Zelfde inhoud in alle drie. Gebruik gepubliceerde componenten. Plaats frames naast elkaar met 80px afstand. Label elk frame "Richting A/B/C" in kleine caption tekst.
14 Design system audit prompt
Bekijk de geselecteerde pagina en lijst: - Componenten niet van de gepubliceerde bibliotheek (markeer als "losgekoppeld") - Kleuren die geen variabelen gebruiken - Tekst die geen tekststijlen gebruikt - Auto layout afstanden die niet 4/8/16/24/32 zijn Output als checklist in frame notities. Niet automatisch repareren — alleen rapporteren.
15 Verfijn doorgang (tweede prompt)
Pas op het gegenereerde frame alleen deze fixes toe: 1. Verhoog verticale afstand tussen secties naar 32px 2. Verwissel primaire knop naar Button/Primary/Large variant 3. Voeg helptekst toe onder e-mailveld: "We delen je e-mail nooit" 4. Lijn alle iconen uit op 24×24 in lijstrijen Herstructureer de layout niet. Voeg geen nieuwe secties toe.

Hoe Sjablonen Te Koppelen

Productie workflow: Sjabloon 13 (verkennen) → kies richting → Sjabloon 1 of 2 (volledig scherm) → Sjabloon 15 (verfijnen) → Sjabloon 11 (hernoemen) → Sjabloon 12 (MCP naar code). Elke stap gebruikt een gerichte prompt in plaats van één gigantische instructie die de agent verward.

Voor het volledige Figma AI ecosysteem (Agent, Make, MCP, Skills, Sites), zie onze complete 2026 gids. Voor stap-voor-stap agent setup, zie hoe de Design Agent te gebruiken. Voor credit budgettering, zie Figma AI credits uitgelegd.

Veelgestelde Vragen

Werken deze op het gratis Figma plan?

Sjablonen 10–11 (Inhoud Vervangen, hernoemen) werken op gratis plannen. Design Agent en Make vereisen betaalde plannen en bèta toegang. MCP werkt met elk plan dat Dev Mode / MCP kan inschakelen voor je seat.

Moet ik het hele sjabloon plakken of inkorten?

Begin met het volledige sjabloon. Zodra je ziet welke regels de agent negeert, kort in. Kortere prompts werken alleen nadat je weet welke beperkingen je design system daadwerkelijk nodig heeft.

Kan ik dezelfde prompt gebruiken voor Make en de Design Agent?

Nee — Make verwacht build/prototype taal en verbruikt credits anders. Gebruik Design Agent sjablonen voor canvas lagen en Make sjablonen voor interactieve output. Mengen produceert verwarde resultaten.

Hoe bewaar ik prompts als Skills?

Kopieer sjablonen 8–9 naar Skill markdown bestanden in je team's Skills bibliotheek. Roep aan met /skill-naam in het agent paneel. Update Skills wanneer je componentnamen veranderen — zie onze Skills gids.

Openbaring: Sommige links in dit artikel zijn affiliate links. We bevelen alleen tools aan die we persoonlijk hebben getest en regelmatig gebruiken. Zie ons volledige openbaringsbeleid.