Het ontwerp is af. In Figma (de veelgebruikte online ontwerptool) staat een strak uitgewerkte website: homepage, binnenpagina’s, kleuren, typografie, alles goedgekeurd. En nu de vraag waar elk webproject op dit punt tegenaan loopt: hoe wordt dit een werkende WordPress-site, zonder dat er onderweg kwaliteit verloren gaat? Er is geen knop die dit voor je doet, ondanks wat sommige tools beloven. Wel is er een beproefde werkwijze in drie fases: het ontwerp vertalen naar herbruikbare bouwstenen, de juiste bouwroute kiezen, en gestructureerd nabouwen met responsive gedrag en beheer in het achterhoofd. Die werkwijze lopen we hier door.
Fase 1: denk in componenten, niet in pagina’s
De grootste fout die we bij dit soort projecten zien: pagina voor pagina nabouwen alsof elke pagina uniek is. Een goed Figma-ontwerp bestaat in werkelijkheid uit een beperkt aantal terugkerende componenten: een header, een held-sectie, een tekstblok met afbeelding, een kaartenrij, een call-to-action, een footer. Inventariseer die componenten éérst. Meestal kom je op tien tot vijftien bouwstenen uit die samen alle pagina’s vormen. Die lijst is je echte bouwplan: elk component bouw je één keer goed in WordPress en hergebruik je overal, precies zoals de ontwerper het in Figma met componenten bedoeld heeft.
Leg in dezelfde fase de ontwerptokens vast: de exacte kleuren, lettertypes, korpsgroottes en vaste tussenruimtes uit het ontwerp. In Figma zijn die via de inspectiefunctie per element af te lezen. Deze waarden zet je straks één keer centraal in WordPress (in de sitestijlen van een blokthema of de globale instellingen van een page builder), zodat elke bouwsteen automatisch de juiste stijl krijgt en een latere kleuraanpassing één wijziging is in plaats van honderd.
Fase 2: kies de bouwroute die bij het project past
Er zijn drie serieuze routes, en de juiste keuze hangt af van wie er bouwt en wie er straks beheert.
Blokthema met de Site-editor. De moderne WordPress-eigen route: je vertaalt de componenten naar blokpatronen en de ontwerptokens naar sitestijlen. Licht, snel en zonder afhankelijkheid van externe plugins. De beperking: zeer specifieke ontwerpen vragen soms eigen blokken of extra CSS, en dat is developerwerk. Onze keuze voor ontwerpen die redelijk binnen de blokmogelijkheden vallen en voor teams die een snelle, toekomstvaste site willen.
Page builder zoals Elementor of Bricks. De route met de meeste visuele vrijheid: vrijwel elk Figma-detail is zonder code na te bouwen, inclusief animaties en afwijkende layouts. De prijs is extra gewicht (builders laden meer code mee) en afhankelijkheid van de plugin. De logische keuze wanneer pixel-perfecte trouw aan het ontwerp zwaarder weegt dan maximale snelheid, of wanneer de beheerder straks zelf visueel wil kunnen bouwen.
Maatwerkthema in code. Een developer bouwt het ontwerp om tot een eigen thema. Maximale controle en prestaties, maar ook de hoogste kosten en volledige afhankelijkheid van een developer voor elke wijziging. Verstandig voor grotere organisaties met doorlopende developmentcapaciteit, overdreven voor de gemiddelde bedrijfssite.
En de automatische Figma-naar-WordPress-tools en AI-converters? Eerlijk: als inspiratie of ruwe eerste opzet soms aardig, maar de uitkomst is in de praktijk vrijwel nooit schone, beheerbare code. Reken er niet op als bouwroute; reken op een van de drie hierboven.
Fase 3: gestructureerd bouwen, responsive vanaf dag één
Bouw in deze volgorde: eerst de ontwerptokens centraal instellen, dan de header en footer, dan de componenten van je lijst uit fase 1, en pas daarna de pagina’s samenstellen uit die componenten. Werk niet op de live site maar in een aparte omgeving, en zorg voor een back-up op elk belangrijk moment; hoe je zo’n veilige werkopzet regelt lees je in onze complete gids over WordPress back-ups en migratie.
Het punt waar Figma-projecten het vaakst kwaliteit verliezen is responsive gedrag: het ontwerp is gemaakt op desktopformaat, en de mobiele weergave “komt later wel”. Andersom werkt beter: controleer bij élk component direct hoe hij zich gedraagt op tablet- en telefoonformaat, en overleg met de ontwerper waar het ontwerp geen mobiele variant voorschrijft. Meer dan de helft van de bezoekers ziet alleen die mobiele versie. Let in dezelfde fase op de afbeeldingen: exporteer ze uit Figma in webformaat en gecomprimeerd, want ontwerpbestanden op volle resolutie zijn de snelste manier om een prachtige site traag te maken.
Bij Surver: begin je het bouwproject op een vers hostingpakket, dan staat WordPress er via Installatron met één klik op en heeft de site standaard SSL. Kies je de Elementor-route, dan kan de installatievariant met builder en Astra-thema je eerste inrichtingsuur schelen.
De vergeten fase: overdracht naar beheer
Een Figma-project is pas klaar als degene die de site daarna bijhoudt ermee uit de voeten kan. Spreek af wat de beheerder zelf mag en kan aanpassen (teksten, foto’s, nieuwe pagina’s uit bestaande componenten) en wat bij de bouwer blijft (componenten wijzigen, ontwerptokens aanpassen). Lever een korte instructie op met die grens erin, en richt de gebruikersrollen ernaar in: de redactie een redacteursrol, de bouwer de beheerdersrol. Zo blijft het ontwerp ook ná oplevering overeind, en dat is uiteindelijk waar het de ontwerper én de eigenaar om te doen was. De dagelijkse kant van dat beheer, van teksten aanpassen tot updates, staat in onze complete gids over WordPress-beheer, en wie het bouwen zelf nog onder de knie moet krijgen begint bij onze startgids voor het maken van een website met WordPress.
Tip van Surver: wil je het bouwen of het latere onderhoud liever uitbesteden, dan kan dat via onze webmasterservice. En onze support is zeven dagen per week bereikbaar voor de hostingkant van je project.
