Short answer: A good Figma to WordPress build turns each design template into reusable blocks and patterns in a custom block theme, matches the design at every breakpoint, and gives your client an editor they cannot easily break. For a typical 5–8 template business site, expect one to two weeks and a cost that depends mostly on the number of unique templates and interactions. The quality of the result depends heavily on how well the Figma file is prepared — so a little preparation saves both time and money.
Many agencies design in Figma and outsource the build. Done well, it is fast and profitable. Done badly, the site looks "almost right", the client struggles to edit it, and your team spends days fixing spacing. This guide explains what a good build looks like and how to set it up for success.
How to prepare a Figma file for development
- Desktop and mobile frames for every unique template. Tablet frames help but are optional — a good developer will make sensible decisions in between.
- Components and styles: buttons, cards, headings and colours set up as components and styles, so they become reusable blocks and design tokens.
- Auto layout: it tells the developer how elements should stretch and wrap, which removes a lot of guesswork.
- Real content where possible: real headings and text lengths show how the layout should behave.
- Interaction notes: hover states, menus, sliders and animations — a short note or prototype link is enough.
- Fonts and assets: licensed fonts, exported icons (SVG) and images at good resolution.
Block theme or page builder?
There are two common ways to build a WordPress site from a design:
- Native block theme (Gutenberg): custom blocks and patterns, settings in theme.json, no extra page-builder plugin. Usually faster, lighter and easier to maintain, and the editing experience can be controlled precisely.
- Page builder (such as Elementor): familiar to many clients and quick to adjust visually, but heavier, and clients can more easily break the design.
For most new sites we recommend a block theme. If your client already knows a page builder, or the site must be edited heavily by non-technical staff in a visual builder, that can still be the right choice. Agree this before the build starts.
What should be included
- Every template built responsively from your frames.
- Reusable blocks and patterns based on your components.
- Colours, typography and spacing from your Figma styles in theme.json.
- Basic SEO: clean heading structure, meta tags, schema where relevant.
- Performance: optimised images, minimal JavaScript, good Core Web Vitals.
- Accessibility basics: semantic HTML, keyboard navigation, focus states, colour contrast.
- A staging site for review, cross-browser testing and launch support.
- A short guide (often a video) showing your client how to edit the site.
Typical timelines and costs
The biggest factors are the number of unique templates (not pages), custom interactions, and integrations such as forms, CRMs or e-commerce:
- Single landing page: a few days.
- Business site with 5–8 templates: around one to two weeks.
- Larger site with 10–20 templates: two to four weeks.
- WooCommerce store from a design: three to five weeks, depending on products and checkout changes.
Offshore teams can usually do this for a fraction of local agency rates. Our own starting prices are on our Figma to WordPress page.
How to review the build
- Compare each template side by side with the design, at the breakpoints in your file and in between.
- Test on a real phone, not only a resized desktop browser.
- Try editing as your client would: add a page from a pattern, change an image, add a card.
- Run a quick speed test and check headings with an accessibility checker.
- Collect feedback in one list, so the developer can fix everything in one round.
Common mistakes
- Designing only for desktop. Mobile is where most visitors are; missing mobile frames means guesswork.
- Too many one-off sections. Every unique section is extra build time. Reusable components keep cost down and editing simple.
- Feedback in many places. Comments spread over email, chat and Figma get missed. Keep one list.
- No editing plan. Decide early what the client should be able to change, and what should be locked.
If you are an agency looking for a reliable build partner, see our Figma to WordPress service and our white-label partnership for agencies.
