Steeds vaker ontvang ik ontwerpen van klanten of ontwerpers die in Figma zijn gemaakt. Een prachtige tool — maar wél eentje die net even anders werkt dan het CMS waarin de website uiteindelijk gebouwd wordt.
Daarom deel ik graag wat handige tips en aandachtspunten, zodat je als ontwerper of klant weet wat wel en niet goed werkt als je een ontwerp in Figma aanlevert voor een website die gebouwd wordt in YOOtheme Pro (Joomla) of YOOtheme/Divi (WordPress).
Waarom dit belangrijk is
Figma is een ontwerp- en prototypingtool. Het maakt geen werkende website, maar een visueel ontwerp. Het bouwen in een CMS werkt anders:
- Sommige effecten zijn standaard beschikbaar
- Andere vereisen extra CSS
- Sommige dingen zijn praktisch niet haalbaar of niet wenselijk in een dynamische website.
Met een beetje voorbereiding voorkom je verrassingen — én bespaar je mij als webdesigner veel tijd (en frustratie).
Wat werkt goed / wat kan prima worden nagebouwd
- Heldere pagina-indeling in logische secties en kolommen
- Gebruik van standaard webtypografie (liefst Google Fonts of goed in te stellen fonts)
- Gebruik van standaard kleuren (opgegeven in HEX, RGB of HSL)
- Gebruik van vaste afbeeldingen (PNG, JPG, SVG)
- Buttons met standaard vormgeving (kleur, tekst, hover in basiskleuren)
- Eenvoudige hover-effecten (bv. kleurverandering, lichte schaduw)
- Hero-sectie met beeld en tekst
- Standaard navigatie en footer-structuur
Wat vraagt extra werk of maatwerk (en is niet altijd wenselijk)
- Complexe overlappingen van tekst en beeld
- Elementen die buiten hun kolom/frame uitsteken
- Hele specifieke hover-effecten (bv. schuiven, transparantie, 3D-rotaties)
- Speciale blendmodes (bv. Multiply, Overlay) → vaak niet ondersteund in builders
- Schaduw op tekst of op specifieke delen van een afbeelding
- Gebruik van onbeschikbare fonts (niet in Google Fonts of in het CMS te laden)
- Animaties die niet standaard beschikbaar zijn in builder
- Pixelperfect positionering → CMS werkt met flexibele layout (responsiveness!)
Wat kun je beter vermijden of vooraf overleggen
- Volledige fixed positionering van elementen (bv. sticky elementen op rare plekken)
- Specifieke mobiele versies als apart ontwerp (CMS werkt met responsive design → beter ontwerpen met responsiveness in gedachten)
- Te complexe grid-layouts (bv. masonry, complexe asymmetrische grids → vaak slecht te bouwen in builders)
- Inline SVG’s met complexe animatie → beter als statisch beeld aanleveren
- Volledige pixel-perfect eisen → CMS heeft eigen dynamiek
Aanleveren van SVG’s en samengestelde beelden
- Lever SVG’s die samen als één beeld worden gebruikt (bv. boven- en onderdecoratie in een kaart) als één gecombineerd SVG-bestand aan.
- Alleen SVG’s die apart geanimeerd moeten worden, graag los aanleveren.
- Voor samengestelde beelden die op mobiel anders opgebouwd moeten worden, graag ook een aparte mobiele versie meeleveren.
Tips voor het aanleveren van het ontwerp
- Lever altijd een PNG-export per pagina mee op 100% ontwerpmaat → dit helpt bij analyse & bouw.
- Lever eventueel een extra PDF met overzicht / flow (voor navigatieoverzicht).
- Lever alle afbeeldingen apart aan als losse bestanden (PNG, JPG of SVG).
- Geef per element aan wat belangrijk is om exact over te nemen, en waar flexibiliteit mogelijk is.
- Denk aan responsiveness → werk in het Figma ontwerp al met breakpoints of laat zien hoe je het op mobiel ongeveer bedoelt.
Project in Figma delen (indien mogelijk)
Indien de licentie of het projecttype het toelaat, graag het Figma-project met mij delen (met ‘view access’ of ‘inspect access’).
Dit maakt het mogelijk om:
- eventuele interacties (bv. hover states, animaties, transitions) goed te beoordelen
- eventuele rollover-buttons of speciale effecten tijdig te signaleren (voor zover dit in de offerte is opgenomen)
- aanvullende elementen die mogelijk niet als losse bestanden zijn aangeleverd, zelf uit Figma te halen indien noodzakelijk
Belangrijk: ik vraag wél om zoveel mogelijk alle benodigde elementen vooraf en los aan te leveren (afbeeldingen, SVG’s, varianten voor mobiel).
Het Figma-project dient hierbij als ondersteunende referentie — dit voorkomt extra werk en nabewerking.
“Figma maakt een ontwerp – maar het CMS maakt de site. Een goede afstemming voorkomt veel ruis.”
Samenvattend
Figma is een fantastische tool om designs in op te bouwen.
Maar een CMS met framework (zoals YOOtheme of Divi) werkt nét even anders.
Met deze checklist zorgen we er samen voor dat het eindresultaat niet alleen mooi is, maar ook goed werkt en prettig is voor de gebruiker.
Wil je hier vooraf even over sparren of je ontwerp laten beoordelen? Neem gerust contact op — dan voorkom je verrassingen tijdens het bouwen.