Je hebt een ontwerp in Figma liggen. Het ziet eruit 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 formulier op invullen. Om er een website van te maken, moet het ontwerp worden vertaald naar code.
Dit stappenplan laat zien hoe dat gaat, of je het nu zelf doet of laat doen. Eerst de vier routes naast elkaar, daarna zes stappen van ontwerpcheck tot livegang.
Waarom een Figma-ontwerp nog geen website is
Figma legt vast hoe iets eruitziet, niet hoe het zich gedraagt. Kleuren, marges, lettertypes en de plek van elke knop staan erin. Wat er gebeurt op een telefoon van 360 pixels breed, of als een kop twee keer zo lang is als in het ontwerp, staat er meestal niet in.
Die vragen beantwoordt de bouwer. Daarom is omzetten geen kopieerwerk maar vertaalwerk, en die vertaling bepaalt of je site snel, vindbaar en bruikbaar wordt.
De vier routes vergeleken
Er zijn vier manieren om een Figma-ontwerp online te krijgen. Ze verschillen vooral in snelheid, in hoe netjes de code is en in wie de site daarna beheert.
| Route | Hoe het werkt | Voordeel | Nadeel | Past bij |
|---|---|---|---|---|
| Conversieplugin | Een Figma-plugin zet je frames om naar pagina's in een page builder zoals Elementor | Snel een eerste versie | Gegenereerde code, mobiel gedrag moet je vaak zelf nalopen | Experimenten, prototypes |
| Page builder, handmatig | Je bouwt het ontwerp na in Elementor of de blokeditor | Je past later zelf secties en pagina's aan | Meer code en scripts dan strikt nodig, dus vaak trager | Wie de site zelf veel wil aanpassen |
| Eigen WordPress-thema | Een ontwikkelaar bouwt alleen de code die jouw ontwerp nodig heeft | Snel en stabiel bij updates | Opbouw van pagina's wijzigen vraagt een ontwikkelaar | De meeste bedrijfssites |
| HTML en CSS zonder WordPress | Het ontwerp wordt als losse pagina's gebouwd | Zo snel mogelijk, weinig dat kan breken | Elke tekstwijziging loopt via de bouwer | Landingspagina's en sites die zelden wijzigen |
Voorbeelden van conversieplugins zijn UiChemy en Figmentor, die Figma-ontwerpen omzetten naar Elementor. Ik noem ze als voorbeeld, niet als aanbeveling; ik heb ze voor dit artikel niet getest. Welke route past, hangt af van één vraag: wie werkt er straks in de site?
Stap 1: controleer het ontwerp voordat je bouwt
Begin met kijken, niet met bouwen. Een uur doorlopen voorkomt gaten die anders halverwege de bouw opduiken. Loop deze punten langs:
- Zijn alle pagina's ontworpen? Vaak is alleen de homepage af en ontbreken contact, diensten of een blogpagina.
- Is er een mobiele versie? Zo niet, dan moet die eerst worden ontworpen of in elk geval afgesproken.
- Zijn kleuren en tekststijlen als stijlen vastgelegd? Losse instellingen per tekst leiden tot kleine verschillen die je pas op de live site ziet.
- Welke lettertypes zijn gebruikt? Betaalde fonts mogen niet zomaar op een website. Controleer de licentie, of kies een gratis alternatief dat er vrijwel hetzelfde uitziet.
- Wat moet later aanpasbaar zijn? Een pagina die je maandelijks bijwerkt, bouw je anders dan een pagina die jaren hetzelfde blijft.
Stap 2: kies je route
Kies op basis van beheer, niet op basis van wat het snelst klaar is. Wil je zelf secties en pagina's opbouwen, dan is een page builder het waard. Lever je vooral teksten aan en telt snelheid, dan is een eigen thema beter. Voor één landingspagina die zelden wijzigt, is HTML zonder WordPress vaak het simpelst.
Een conversieplugin kan in elke route helpen om snel een eerste versie te zien. Reken er alleen niet op dat het resultaat zonder nawerk live kan.
Stap 3: bereid je bestanden voor
Zet alles klaar wat de bouw nodig heeft, zodat je niet halverwege hoeft te zoeken. Dat scheelt meer tijd dan welke tool dan ook.
- Afbeeldingen exporteren op de afmetingen waarop ze getoond worden, en omzetten naar WebP of een goed gecomprimeerde JPEG.
- Iconen en logo als SVG, niet als screenshot.
- Kleuren en lettergroottes als lijst, zodat ze één keer in het thema of de page builder worden ingesteld.
- Teksten per pagina, desnoods ruw. Lorem ipsum in het ontwerp is geen tekst.
- Toegang tot hosting en domein, of een besluit over waar de site komt te staan.
Stap 4: bouw het ontwerp na, desktop én mobiel
Bouw het ontwerp nauwkeurig na: marges, regelafstanden, kleuren en hover-effecten. Het doel is dat ontwerp en gebouwde pagina naast elkaar vrijwel gelijk zijn.
De grootste valkuil zit op mobiel. Wat op een breed scherm naast elkaar staat, moet op een smal scherm onder elkaar. Dan blijkt dat een menu niet past, een tabel buiten beeld valt of een knop half onder de rand verdwijnt. Test daarom op echte schermformaten, ook op de smalle, zoals een dichtgeklapte Galaxy Fold. Dat klinkt overdreven tot je site daar stukloopt.
Stap 5: techniek en SEO
Een ontwerp zegt niets over wat er onder de motorkap gebeurt, en juist daar bepaalt Google of je site wordt opgepikt. Deze punten horen bij elke omzetting:
- Koppenstructuur. Eén H1 per pagina, daaronder logische H2's. In Figma is een kop een lettergrootte; in HTML is het een betekenis.
- Title en meta-omschrijving per pagina, geschreven op de zoekterm waarop die pagina gevonden moet worden.
- Gestructureerde gegevens (schema), zodat zoekmachines begrijpen wat voor bedrijf je bent en waar je zit.
- Snelheid: caching, gecomprimeerde afbeeldingen, lazy loading en geen overbodige plugins.
- Formulieren met een echte testverzending naar je eigen mailbox en een bevestiging aan de afzender.
Sla je dit over, dan heb je een mooie site die weinig mensen vinden. Meer daarover lees je in hoe je beter gevonden wordt in Google.
Stap 6: testen en livegang
Test de site op je telefoon voordat hij live gaat, en zet hem daarna op je eigen hosting en domein. Loop bij de livegang deze lijst af:
- SSL-certificaat actief, zodat de site via https laadt
- Formulier getest vanaf een telefoon, bericht komt aan in je gewone inbox
- Sitemap aangemaakt en de site aangemeld bij Google Search Console
- Oude URL's doorgestuurd als er al een site was
- Inloggegevens en eigendom van domein en hosting op jouw naam
Hoe lang het geheel duurt, hangt vooral af van hoe compleet ontwerp en teksten zijn. Meer daarover in hoe lang duurt het om een website te laten maken.
Zelf doen of laten omzetten?
Zelf doen kan prima als je WordPress kent en tijd hebt voor het mobiele werk en de techniek uit stap 5. Laten doen is logisch als de site klanten moet opleveren en je die uren liever aan je eigen werk besteedt.
Wil je het laten doen, dan staat mijn aanbod op Figma naar WordPress laten omzetten. Kort: een complete site tot en met vijf pagina's kost bij mij €749 excl. btw, extra pagina's €95 en een webshop €1.149. Alle tarieven staan op de prijzenpagina. Twijfel je of je eigenlijk een uniek ontwerp of echt maatwerk nodig hebt, lees dan maatwerk website of template.
Veelgestelde vragen
Kan een plugin mijn Figma-ontwerp automatisch omzetten naar WordPress?
Welke route kies ik: page builder of eigen thema?
Wat als mijn ontwerp geen mobiele versie heeft?
Kan ik de site daarna zelf aanpassen?
Wat kost het om Figma naar WordPress te laten omzetten?
Kort samengevat
Een Figma-ontwerp omzetten naar WordPress is meer dan natekenen. Controleer eerst het ontwerp, kies de route die past bij wie de site beheert, zet je bestanden klaar, bouw desktop én mobiel, regel de techniek en test voor de livegang. Dan heb je een site die er niet alleen uitziet zoals bedoeld, maar ook doet wat hij moet doen.
