More and more often I receive designs from clients or designers that were made in Figma. A fantastic tool — but one that works quite differently from the CMS in which the final website is built.
That’s why I’d like to share some useful tips and points of attention, so you as a designer or client know what works well (and what doesn’t) when delivering a Figma design for a website that will be built in YOOtheme Pro (Joomla) or YOOtheme/Divi (WordPress).
Why this matters
Figma is a design and prototyping tool. It doesn’t produce a working website — it creates a visual mock-up. Building in a CMS works differently:
- Some effects are supported out of the box
- Others require extra CSS
- Some elements are not practical or desirable in a dynamic website
With a bit of preparation, you’ll avoid surprises — and save me a lot of time (and frustration) as a web designer.
What works well / what can be easily recreated
- Clear page layout with logical sections and columns
- Use of standard web typography (preferably Google Fonts or well-configurable fonts)
- Use of standard colours (specified in HEX, RGB or HSL)
- Use of static images (PNG, JPG, SVG)
- Buttons with standard styling (colour, text, basic hover effect)
- Simple hover effects (e.g. colour change, subtle shadow)
- Hero sections with image and text
- Standard navigation and footer layout
What requires extra or custom work (and is not always ideal)
- Complex overlays of text and images
- Elements that extend outside their column/frame
- Very specific hover effects (e.g. slide-ins, transparency, 3D rotations)
- Special blend modes (e.g. Multiply, Overlay) → often not supported in builders
- Text or shadow applied only to parts of an image
- Use of unavailable fonts (not in Google Fonts or not loadable in the CMS)
- Animations that are not supported by the builder
- Pixel-perfect positioning → CMS uses flexible layout (responsiveness!)
What’s best to avoid or discuss in advance
- Fully fixed positioning of elements (e.g. sticky items in unusual places)
- Separate mobile versions as separate designs (CMS uses responsive design → better to design with responsiveness in mind)
- Overly complex grid layouts (e.g. masonry, asymmetric grids → often hard to build in builders)
- Inline SVGs with complex animation → better to deliver as static images
- Strict pixel-perfect requirements → CMS layout is dynamic by nature
Delivering SVGs and composed images
- If multiple SVGs are used as one visual (e.g. top and bottom decorations in a card), deliver them as one combined SVG file.
- Only SVGs that need to be animated separately should be delivered as individual files.
- For complex compositions that display differently on mobile, please include a separate mobile version.
Tips for delivering your design
- Always provide a PNG export per page at 100% design scale — this helps with analysis and implementation.
- Optionally include an extra PDF with flow or overview (for navigation structure).
- Send all images as separate files (PNG, JPG or SVG).
- Indicate per element what must be followed exactly, and where flexibility is okay.
- Think about responsiveness → work with breakpoints in your Figma design or show how you envision the mobile version.
Sharing your Figma project (if possible)
If the license or project type allows, please share your Figma project with me (‘view access’ or ‘inspect access’).
This makes it possible to:
- Assess any interactions (e.g. hover states, animations, transitions)
- Identify special buttons or effects early on (especially if they’re included in the quote)
- Extract additional elements that may not have been delivered as separate files, if needed
Important: Please deliver as many of the required elements separately and in advance as possible (images, SVGs, mobile variants).
The Figma project serves as a supporting reference — this helps prevent extra work and rework.
“Figma creates the design — but the CMS builds the site. Good alignment prevents confusion.”
Summary
Figma is a fantastic tool for building visual designs.
But a CMS with a framework (like YOOtheme or Divi) works a bit differently.
This checklist helps ensure that the end result not only looks great, but also works well and is pleasant to use.
Want to double-check your design or avoid misunderstandings? Feel free to contact me — and we’ll build something smooth and solid.