Je hebt een ontwerp in Figma liggen. Het ziet er precies uit zoals je het voor je zag, maar het doet niets. Je kunt er niet op klikken, Google kan het niet vinden en een klant kan er geen contactformulier op invullen. Een Figma-bestand is een plaatje; een website is techniek. In dit artikel lees je hoe die omzetting in de praktijk verloopt, wat het kost, hoe lang het duurt en waar het meestal misgaat.

Waarom een Figma-ontwerp nog geen website is

Figma is een tekenprogramma. Het legt vast hoe iets eruit moet zien: kleuren, marges, lettertypes, de plek van elke knop. Wat het niet vastlegt, is hoe de pagina zich gedraagt. Wat gebeurt er als iemand op een telefoon van 360 pixels breed kijkt? Wat als een productnaam twee keer zo lang is als in het ontwerp? Waar komt het formulier binnen? Die vragen beantwoordt de bouwer, niet de ontwerper. Daarom is de omzetting van Figma naar WordPress geen kopieerwerk maar vertaalwerk, en die vertaling bepaalt of je site snel, vindbaar en bruikbaar wordt.

Stap 1: het ontwerp doornemen vóór er één regel code komt

Ik begin nooit met bouwen. Ik begin met kijken, en dat kost meestal een uur. Dat uur verdient zichzelf terug omdat je er de gaten uit haalt die anders halverwege de bouw opduiken. Waar ik naar kijk:

Uit dat gesprek komt een vaste prijs en een leverdatum. Geen nacalculatie, geen meerwerk-mailtjes achteraf.

Stap 2: de juiste techniek kiezen

Er zijn drie manieren om een Figma-ontwerp in WordPress te krijgen, en ze verschillen vooral in wie de site daarna beheert.

Een page builder zoals Elementor. Je kunt achteraf zelf teksten, afbeeldingen en hele secties aanpassen zonder ook maar één regel code aan te raken. Dat is prettig als je regelmatig iets wilt wijzigen. De prijs betaal je in gewicht: een page builder laadt extra CSS en JavaScript mee, waardoor de pagina trager is dan strikt nodig.

Een eigen WordPress-thema. Alleen de code die jouw ontwerp nodig heeft, niets meer. Sneller, schoner, en beter bestand tegen updates. Je kunt teksten en afbeeldingen nog steeds zelf beheren, maar de opbouw van een pagina veranderen vraagt een ontwikkelaar. Voor de meeste bedrijfssites is dit de beste balans.

Handgecodeerde HTML en CSS, zonder WordPress. Maximale snelheid en niets dat kan breken. Geschikt voor landingspagina's en sites die zelden wijzigen. Het nadeel: elke tekstwijziging loopt via de bouwer.

Welke route past, hangt af van één vraag: wie werkt er straks in die site? Beheer je hem zelf en wil je vrijheid, dan is Elementor het waard. Lever je teksten aan en wil je vooral snelheid, dan is een eigen thema beter. Ik zeg dat eerlijk, ook als het goedkoopste antwoord het juiste is.

Stap 3: pixel-perfect bouwen, en dan mobiel

Nu wordt het ontwerp nagebouwd: marges, regelafstanden, kleurwaarden, hover-effecten. Pixel-perfect betekent dat je het ontwerp en de gebouwde pagina naast elkaar kunt leggen zonder verschil te zien.

De grootste valkuil zit niet op desktop maar op mobiel. Veel Figma-bestanden bevatten alleen een desktopweergave, terwijl een groot deel van je bezoekers op een telefoon kijkt. Wat op een breed scherm netjes naast elkaar staat, moet op 375 pixels onder elkaar, en dan blijkt dat een menu niet past, een tabel buiten beeld valt of een knop half onder de rand verdwijnt. Ik test daarom niet alleen in de browser maar op echte schermformaten, inclusief de smalle varianten zoals een dichtgeklapte Galaxy Fold. Dat klinkt overdreven tot je site daar stukloopt.

Ook belangrijk in deze fase: afbeeldingen. Een designer levert vaak PNG's van meerdere megabytes aan. Die gaan er in WebP of geoptimaliseerde JPEG in, op de juiste afmetingen, met lazy loading. Alleen daarmee haal je vaak al seconden van de laadtijd af.

Stap 4: techniek, SEO en livegang

Een ontwerp zegt niets over wat er onder de motorkap gebeurt, en juist daar wordt bepaald of Google je site oppikt. Wat er bij een nette omzetting standaard bij hoort:

Sla je dit over, dan heb je een mooie site die niemand vindt. Meer daarover lees je in hoe je vindbaar wordt in Google.

Wat kost het om Figma naar WordPress om te zetten?

Bij YourWebsites betaal je €749 excl. btw voor een complete website tot en met vijf pagina's, all-in: omzetting, mobiele versie, SEO-basis, formulieren en livegang op je eigen hosting. Extra pagina's kosten €95 per stuk, een webshop €1.149. Bouw je mee aan mijn portfolio? In ruil voor een review zodra je tevreden bent en toestemming om je site te tonen, krijg je een scherpe introductieprijs. Meer pagina's of extra functionaliteit spreek ik vooraf af, zodat je nooit voor een verrassing komt te staan. Alle tarieven staan op de prijzenpagina.

Kom je aanbieders tegen die het voor een paar tientjes doen, kijk dan goed wat je krijgt. Meestal is dat een bestaand template dat "erop lijkt" in plaats van jouw ontwerp, zonder mobiele finetuning en zonder SEO-basis. Vraag altijd een vaste prijs vooraf en vraag expliciet of hosting, formulieren en livegang erbij zitten.

Hoe lang duurt het?

Voor een site tot vijf pagina's is dat vaak binnen één tot twee weken rond, gerekend vanaf het moment dat het ontwerp en de teksten compleet zijn. Die laatste toevoeging is niet voor niets: in de praktijk zit de vertraging bijna nooit in het bouwen maar in het aanleveren. Heb je je teksten, logo en foto's klaar staan, dan gaat het snel. Meer over de doorlooptijd staat in hoe lang duurt het om een website te laten maken.

Wat lever je zelf aan?

Om vaart te houden heb ik dit van je nodig, het liefst in één keer:

Automatische Figma-naar-WordPress-plugins: doen of niet?

Er bestaan plugins die beloven je ontwerp met één klik om te zetten. Ze werken ook, technisch. Wat eruit komt is een berg gegenereerde code met absolute posities, honderden losse klassen en geen doordacht mobiel gedrag. Voor een experiment is dat prima. Voor een site waarmee je klanten binnenhaalt niet: die code is traag, moeilijk aan te passen en werkt SEO-technisch tegen je. Handmatig bouwen kost een paar honderd euro en levert een site op die je jaren meeneemt.

Veelgestelde vragen

Kan ik mijn Figma-ontwerp laten omzetten als iemand anders het heeft gemaakt?
Ja. Ik werk regelmatig met ontwerpen van externe designers. Ik heb alleen bekijkrechten op het Figma-bestand nodig en, als het kan, kort contact met de ontwerper voor vragen over gedrag dat niet uit het bestand blijkt. Zit die er niet meer bij, dan vul ik de keuzes zelf in en leg ik ze aan je voor.
Wat als mijn ontwerp geen mobiele versie heeft?
Dan maak ik die erbij, in de stijl van het origineel. Je krijgt de mobiele opzet ter goedkeuring voordat ik bouw, zodat je niet achteraf verrast wordt door keuzes die je zelf anders had gemaakt. Extra kosten zijn hier niet aan verbonden bij een pakket tot vijf pagina's.
Moet het per se WordPress zijn?
Nee. WordPress is de meest gekozen route omdat je er zelf in kunt werken en er voor vrijwel alles een oplossing bestaat, maar voor een enkele landingspagina bouw ik liever handgecodeerde HTML, sneller en niets dat kan breken. Voor een webshop is WooCommerce of Shopify logischer. Ik kies wat past bij wat je ermee wilt.
Kan ik de site daarna zelf aanpassen?
Teksten en afbeeldingen wijzigen kun je altijd zelf, in elke variant. Wil je ook hele secties kunnen verslepen en nieuwe pagina's opbouwen, zeg dat dan vooraf, dan bouw ik met een page builder. Ik lever standaard een korte uitleg mee zodat je weet waar je moet zijn.
Werk je alleen in de regio Amsterdam?
Nee, ik werk door heel Nederland; het meeste gaat via mail, telefoon en videobellen. Wel zit ik in Diemen, dus voor Amsterdam, Amstelveen, Diemen en Weesp kom ik makkelijk even langs als je dat prettiger vindt.

Kort samengevat

Een Figma-ontwerp omzetten naar WordPress is meer dan natekenen. Het is het ontwerp doorgronden, de juiste techniek kiezen, het mobiele gedrag invullen dat in het bestand ontbreekt en er een technische basis onder leggen waarmee Google iets kan. Doe je dat goed, dan heb je een site die er niet alleen uitziet zoals bedoeld, maar ook doet wat hij moet doen.

Heb je een ontwerp klaarliggen? Bekijk de Figma naar WordPress-dienst of stuur je Figma-link mee via het contactformulier, je hebt binnen één werkdag een vaste prijs en een leverdatum. Wil je liever eerst weten wat een complete website laten maken inhoudt, lees dan die pagina eerst.