Converting a Figma design to WordPress: how I work
I have been building WordPress sites from designers' files since 2020, mostly in Figma and sometimes in Adobe XD. The goal is always the same: a live site that looks like the design at every screen size, and that the client can still edit months later without breaking the layout. Here is the process, the build options and what you need to send me.
The process, step by step
- Design review. I go through every frame before quoting: the page list, unique templates, components, states such as hover and open menus, and anything dynamic like a blog, filters or forms. Questions and gaps go back to you in one list, so nothing is guessed later.
- Design system and global styles. Figma colour styles, text styles and spacing become global colours, global fonts and theme styles in WordPress. Buttons, form fields and links are styled once, so every new element matches the design from the start.
- Responsive breakpoints. I map your desktop, tablet and mobile frames onto WordPress breakpoints and agree how in-between widths should behave, such as when a three-column grid drops to two.
- Build on staging. The header, footer and repeating sections are built as templates first, then pages, on a private staging copy so nothing is public before you approve it.
- Pixel QA. I compare each page side by side with the Figma frame at every breakpoint, checking spacing, type sizes, line heights, alignment and image crops, then test interactions, forms and menus in current browsers on real phones.
- Handover. A video-call walkthrough, a short note on which global styles and templates control what, and a full backup. For agencies, the handover can go to you or straight to your client.
Elementor, block theme or custom-coded theme?
There is more than one way to turn a Figma file into WordPress. Which suits your project depends mostly on who will edit the site and how strict the speed targets are:
| Factor | Elementor build | Block theme | Custom-coded theme |
|---|---|---|---|
| Client editing | Visual drag-and-drop editing of layout and content | Block editor with locked patterns and custom blocks | Structured fields; layout changes need a developer |
| Design accuracy | Close match with global styles and custom CSS where needed | Close match through theme.json and custom blocks | Full control over every element |
| Page weight | Heavier, kept lean by careful building | Light | Lightest |
| Build time | Usually quickest | Moderate | Longest |
| Plugin dependency | Elementor, usually Elementor Pro | WordPress core only | WordPress core only |
| Best for | Marketing sites edited often by non-technical teams | Content sites that need speed and consistent layouts | Complex sites with strict performance or editorial rules |
Most of my Figma to Elementor builds go this way because clients want to change pages themselves. Elementor vs Gutenberg compares the two editors, block themes and full site editing explains the newer approach, and page builder, block theme or custom theme goes deeper on choosing.
What designers should prepare in Figma
A tidy file makes the build faster and closer to the design. The things that help most:
- Auto layout on sections, cards and buttons, so padding and gaps are real values rather than shapes nudged into place. Auto layout maps neatly onto Flexbox containers.
- Colour and text styles named by role, such as primary, heading 2 or body small, instead of loose hex values and one-off font sizes.
- Components with variants for buttons, cards, form fields and navigation, including hover, active and disabled states.
- Mobile frames, at least for the homepage and each unique template. Tablet frames help too. If you only have desktop, I propose mobile layouts for your approval.
- Exported assets: icons and logos as SVG, photos at full resolution, and font files or a link to the licensed font.
- Real content where possible, because placeholder text rarely matches the length of the final copy.
The Figma to WordPress handoff guide covers file preparation in more detail; it is worth sharing with your designers before they finish the file.
What is included, and what is not
A conversion includes the design system set up as global styles, templates for headers, footers and repeating layouts, every page in the agreed list, responsive layouts, working forms, basic speed and on-page SEO settings, cross-browser testing and the walkthrough. Not included unless the quote says otherwise:
- Design work. I build your design; I do not redesign it. Missing mobile layouts and small gaps are the exception.
- Elementor Pro, premium plugin and font licences, which are bought in your or your client's name.
- Hosting, the domain, copywriting and photography.
- New pages or design changes after approval, which are quoted separately.
How long a conversion takes
The number of unique templates matters more than the number of pages, since ten pages built from one template go much faster than ten different layouts. A single landing page usually takes a few working days once the file and content are final, and a full business site a few weeks. Complex interactions, WooCommerce, missing mobile frames or late content add time, and I give you a timeline with the quote after the design review.
Who this is for
- Freelance designers who design in Figma and want a developer who respects their spacing and type choices rather than approximating them.
- Design and branding agencies without an in-house WordPress developer, who need builds delivered under their own brand. White-label Elementor development explains how that works, and WordPress development for agencies covers ongoing partnerships.
- Businesses and startups that already have a finished design from a designer and need it turned into a working website.
If you do not have a design yet and want one built straight in WordPress, my Elementor development service is the better fit.
What you get at the end
- A responsive WordPress site that matches your Figma frames at desktop, tablet and mobile.
- Global colours, fonts and templates set up from your design system, so future pages stay on brand.
- Tested forms and interactions, and a site checked across current browsers and real phones.
- A video-call walkthrough, a short editing note and a full backup, with every login and licence in your or your client's name.
Share your Figma link for a free review and a fixed quote.
