Figma Make: werkende website uit je ontwerp, of toch niet?

Figma Make maakt met AI een werkende webapp of website van een prompt of een bestaand Figma-ontwerp, en publiceert die op een figma.site-adres of je eigen domein. Figma Sites doet iets vergelijkbaars vanuit het ontwerpcanvas, maar is nog bèta. Voor een prototype, een campagnepagina of een interne tool kan dat genoeg zijn. Moet je team de site zelf beheren, wil je gevonden worden in Google of heb je formulieren en koppelingen nodig, dan laat je het ontwerp vaak beter nabouwen.

Wat is Figma Make?

Figma Make is de AI-tool van Figma waarmee je van een prompt of een bestaand ontwerp een werkende app of website maakt. Je werkt via een chat met een AI-agent. Je kunt je Figma-schermen, afbeeldingen of een pdf als context meegeven, en met zogeheten Make kits breng je je designsysteem in, inclusief npm-pakketten. De agent schrijft de code; jij ziet het resultaat direct in een preview en kunt de code bekijken en aanpassen in een eenvoudige editor.

Daarna kun je het resultaat publiceren als website, op een adres als drie-willekeurige-woorden.figma.site of op je eigen domein. Wil je gegevens opslaan, dan voeg je een backend toe: een ingebouwde CMS en database die Figma host, of een koppeling met Supabase.

Make is volledig beschikbaar voor Full seats op betaalde abonnementen. Op andere seats en op het gratis plan kun je het proberen, met beperkingen: zo kunnen Dev- en Collab-seats Make-bestanden alleen als concept (draft) maken en niet delen of publiceren.

Figma Make is daarmee een vorm van wat ook wel vibe coding heet: bouwen door te beschrijven wat je wilt, zonder zelf de code te schrijven. Wat dat betekent en waar het misgaat, lees je in vibe coding uitgelegd.

Figma Make en Figma Sites: twee routes naar een website

Figma heeft twee producten die van een ontwerp een website maken. Ze lijken op elkaar, maar werken anders.

Volgens Figma draaien gepubliceerde sites en apps op Amazon Web Services, met Cloudflare voor het domein en de routering. De backend die Figma zelf host, staat volgens Figma in het oosten van de VS; koppel je Supabase, dan kies je de regio zelf. Dat is relevant als je persoonsgegevens verwerkt; daarover verderop meer.

Wat Figma Make goed doet

Het sterke punt van Figma Make is snelheid, vanuit een ontwerp dat er al ligt. Waar je vroeger een klikbaar prototype in Figma moest koppelen scherm voor scherm, heb je nu binnen een middag iets dat echt werkt: knoppen, formuliervelden, filters, een rekenmodule.

Daar heb je in een paar situaties veel aan:

• Een idee testen. Laat vijf mensen uit je doelgroep een werkend prototype gebruiken in plaats van naar plaatjes kijken. Je ziet direct waar ze vastlopen.
• Een ontwerp verkopen. Een directie of klant snapt een werkende versie sneller dan een presentatie.
• Een campagnepagina die een paar weken online staat en geen onderdeel hoeft te worden van je vaste website.
• Een interne tool, zoals een calculator of een overzicht voor je team, zonder klantgegevens.
• Een duidelijke opdracht voor je developer. Hoe een filter of stap in een formulier precies moet werken, laat je beter zien dan beschrijven.

Hoe beter je ontwerp in elkaar zit, hoe beter het resultaat. Een ontwerp met vaste kleuren, lettertypen en herbruikbare componenten geeft de AI houvast. Een losse verzameling schermen niet. Wat er in een goede huisstijl hoort, lees je in huisstijl laten maken.

Waar de grens van Figma Make ligt

Een werkende site is nog geen website die je bedrijf jarenlang draagt. Op vijf punten loop je tegen de grens aan.

Beheer door je team

Wie past straks de teksten aan? In Make doe je dat via prompts of in de code. Bewerken kan alleen met een Full seat op een betaald abonnement. Voor een ontwerper is dat prima. Voor een collega die elke week een vacature of nieuwsbericht plaatst, is een gewoon beheerpaneel handiger. Make heeft een ingebouwde CMS en Sites heeft er ook een, maar reken niet op de rollen, plugins en werkwijze die je van WordPress kent.

SEO

Je stelt per gepubliceerd bestand een titel, metabeschrijving, taal, favicon en deelafbeelding in, en je kunt het uitsluiten van zoekmachines. Figma schrijft in de FAQ over Figma Make dat je de SEO verder niet kunt aanpassen dan de automatische optimalisatie. Controleer na publicatie ook of je site niet is uitgesloten van zoekmachines: de hulppagina's van Figma zijn niet eenduidig over wat standaard aanstaat.

Belangrijker dan de instellingen is de inhoud: een paginastructuur rond echte zoekvragen, één duidelijke hoofdkop per pagina, interne links en teksten die laten zien dat je weet waar je het over hebt. Die keuzes maakt geen tool voor je. Controleer na publicatie met de URL-inspectie in Google Search Console wat Google van je pagina's ziet.

Formulieren en koppelingen

Een formulier dat er goed uitziet, is pas af als de inzending ergens aankomt. Waar worden aanvragen opgeslagen? Wie krijgt een mail? Hoe houd je spam tegen? Komt de lead in je CRM of je e-mailprogramma? In Make kan dat via de backend en eigen code, maar iemand moet het bouwen, testen en bijhouden.

Gebruik je daarvoor sleutels van andere diensten, voer die dan alleen in de daarvoor bedoelde instellingen in, niet in de chat. Figma bewaart ze dan zo dat bezoekers ze niet zien. En verwerk je persoonsgegevens, dan gelden de AVG-regels: een verwerkersovereenkomst met elke partij die gegevens voor je opslaat, en aandacht voor gegevens die naar de VS gaan. Laat dat bij twijfel juridisch toetsen.

Toegankelijkheid

Gegenereerde code ziet er vaak goed uit, maar is niet altijd goed te gebruiken zonder muis of met een schermlezer. Denk aan knoppen die eigenlijk losse vlakken zijn, velden zonder label of te weinig contrast. Loop je site met de Tab-toets door en kijk of je steeds ziet waar je bent. Verkoop je online aan consumenten, dan val je mogelijk onder de European Accessibility Act; wat dat betekent, lees je in website toegankelijkheid verplicht.

Eigendom en verhuizen

Je kunt de code van een Make-bestand downloaden als zip. Daarmee heb je de bestanden, maar nog geen draaiende site: een developer moet de code nalopen, een host kiezen en een backend opnieuw inrichten. Figma werkt aan een koppeling met GitHub en aan Make op je eigen codebase, maar stand oktober 2026 is dat nog niet voor elke situatie beschikbaar. Bij Figma Sites kun je de code volgens Figma nog niet exporteren om hem elders te publiceren. Stap je over naar een gratis plan, dan blijven eerder gepubliceerde Make-bestanden wel bereikbaar op hun figma.site-adres.

Wat Figma Make kost, stand oktober 2026

Figma rekent per seat. Make zit volledig in de Full seat.

De credits worden gedeeld met de andere AI-functies van Figma. Volgens Figma kost elke prompt in Make credits, en hoeveel hangt af van het gekozen model, de moeilijkheid van de taak en hoeveel context er meegaat. Correcties op een eerder resultaat kosten ook credits, en een lang gesprek maakt elke volgende prompt duurder. Een duidelijke eerste prompt bespaart je dus geld. Extra credits kun je bijkopen. Zolang publiceren in bèta is, zit hosting volgens Figma in je betaalde abonnement.

De prijzen staan in dollars en veranderen geregeld. Kijk voor je beslist op de prijspagina van Figma.

Make of nabouwen: zo kies je

Er is geen goed of fout, wel een goede keuze per situatie.

Kies Figma Make of Sites als:

• je een idee of ontwerp wilt testen met echte gebruikers;
• de pagina tijdelijk is, zoals een actie of evenement;
• het om een interne tool gaat zonder klantgegevens;
• je ontwerpteam in Figma werkt en de pagina zelf bijhoudt;
• Google niet je belangrijkste bron van klanten is.

Laat het ontwerp nabouwen als:

• je website via Google klanten moet opleveren;
• je team zelf wekelijks teksten, vacatures of nieuws aanpast;
• formulieren moeten aankomen in je CRM of e-mailprogramma;
• je een webshop nodig hebt, of meerdere talen;
• je later vrij wilt kunnen wisselen van host of developer.

Nabouwen hoeft niet traag te zijn als het ontwerp compleet is. Bij North Orleans lag er een uitgewerkt design, dat ik pixelperfect heb nagebouwd in WordPress, met een eenvoudig boekingsproces voor de appartementen; lees de case van North Orleans. Hoe je een Figma-ontwerp stap voor stap omzet, staat in design omzetten naar WordPress.

De slimste route is vaak een combinatie: Figma Make voor het prototype en de afstemming, daarna een website op maat voor de lange termijn. Het werkende prototype wordt dan de opdracht voor de developer.

Zo werk je met Figma Make: wie doet wat

AI vertaalt je ontwerp naar code. De keuzes over structuur, inhoud en techniek maakt een mens. Zo verdeel je het werk:

1. Jij: doel en structuur. Wat moet een bezoeker doen, en welke pagina's en stappen zijn daarvoor nodig? Leg dat eerst vast in een schets; hoe, lees je in wat is een wireframe.
2. Jij of je ontwerper: het ontwerp. Met vaste stijlen en herbruikbare componenten, voor mobiel en desktop.
3. Figma Make: het prototype. Hang je ontwerp eraan en geef een duidelijke eerste opdracht.
4. Jij: testen. Met vijf mensen uit je doelgroep, op hun eigen telefoon.
5. Jij en je developer: de techniek kiezen. Blijft het in Figma, of wordt het nagebouwd? Waar staan de gegevens, wie beheert het?
6. Developer: afmaken. Formulieren, koppelingen, toegankelijkheid en de SEO-basis, en daarna het onderhoud.

Een voorbeeld van een eerste prompt die de AI houvast geeft:

Bouw een werkend prototype van de aanvraagpagina uit het bijgevoegde ontwerp. Gebruik alleen de kleuren, lettertypen en componenten uit het ontwerp. De pagina heeft drie stappen: dienst kiezen, gegevens invullen, bevestiging. Velden: naam, e-mail, telefoon (optioneel) en een vrij tekstveld. Elk veld heeft een zichtbaar label en een duidelijke foutmelding. De knoppen werken met het toetsenbord. Sla nog niets op: na de laatste stap toon je alleen een bevestiging. Vraag het eerst als iets in het ontwerp ontbreekt, in plaats van het zelf in te vullen.

Die laatste zin voorkomt dat de AI gaten in je ontwerp opvult met eigen ideeën die je daarna weer moet terugdraaien. En elke terugdraaiactie kost credits.

Conclusie: AI vertaalt het ontwerp, een mens kiest de techniek

Figma Make maakt van je ontwerp in korte tijd iets dat echt werkt. Voor een prototype, een test of een tijdelijke pagina is dat winst. Voor een bedrijfswebsite die klanten moet opleveren, door je team wordt bijgehouden en jarenlang mee moet, loop je tegen grenzen aan bij beheer, SEO, koppelingen, toegankelijkheid en eigendom. Gebruik Make dan als snelle tussenstap en laat het ontwerp daarna nabouwen.

Wil je weten hoe andere AI-bouwers zich verhouden tot een website op maat, lees dan website laten maken door AI. Wat het nabouwen van een ontwerp in WordPress bij mij kost, zie je in de prijslijst.