Figma to WordPress: My Process and What It Costs
Turning a Figma design into a WordPress site is more than matching the layout. Here is my step by step process, how to choose between a custom theme, Gutenberg and Elementor, and what affects the cost.
You have a finished design in Figma. It looks exactly right. Now it needs to become a real WordPress site that looks the same, works on every phone, loads fast, and can be edited without calling a developer every week.
That last part is where many Figma to WordPress projects go wrong. The site matches the design on launch day, but the client can't change a heading without breaking the layout.
This post explains how I turn a Figma design into WordPress, step by step, and what affects the cost.
Step 1: Review the Design Before Quoting
I go through the Figma file before giving a price. A good design file makes the build faster and cheaper. A messy one hides extra work.
Here is what I check:
- Mobile designs. Is there a mobile version of every page, or only desktop? Without mobile designs, I have to decide how things should stack, and that should be agreed up front.
- Repeated components. Are buttons, cards and sections designed as reusable components? This shows how the site should be built in WordPress.
- Fonts and images. Are the fonts licensed for web use? Are images exportable at good quality?
- States. Hover effects, form errors, empty states, menus when they are open. If they aren't designed, someone has to invent them.
- What is dynamic. Blog posts, products, team members, testimonials. Anything the client adds over time needs to be built as content, not hard coded.
Any question I raise at this stage is far cheaper to answer now than after the build has started.
Step 2: Choose How It Will Be Built
There are three common ways to build a Figma design in WordPress.
| Approach | Strengths | Watch out for |
|---|---|---|
| Custom theme | Fastest loading, cleanest code, pixel accurate | Editing is limited to the fields the developer builds |
| Block theme with Gutenberg | Native WordPress editing, good speed, reusable blocks | Complex layouts need custom blocks |
| Elementor or another page builder | Very easy for the client to edit visually | Heavier pages, and the layout can be broken by accident |
There is no single right answer. A marketing team that changes landing pages every week may be happier with Elementor. A business that cares most about speed and rarely changes the layout is better with a custom theme. I recommend one based on who will edit the site and how often.
Step 3: Build the Front End
I build the layout in clean HTML, CSS and JavaScript first, using Bootstrap or Tailwind where it helps. This is where the design comes to life.
- Pixel accurate spacing and typography, matched to the Figma values.
- Responsive on every device, including the in-between sizes that designs often skip, like small laptops and large phones.
- Cross browser testing in Chrome, Safari, Firefox and Edge.
- Optimized images and fonts, so the site loads quickly from the start.
Step 4: Turn It Into WordPress
Next, the static layout becomes a WordPress theme. This is the step that decides whether the client can manage the site on their own.
- Text, images and buttons become editable fields, not hard coded content.
- Repeated items like services, testimonials or team members become post types the client can add to.
- Menus, footer content and contact details are editable from the dashboard.
- Forms are set up and tested, so messages actually arrive.
- Basic SEO settings are in place, with clean headings and proper page titles.
Step 5: Test and Hand Over
Before handover, I compare every page with the Figma file on desktop, tablet and mobile. I check page speed, forms, links and emails.
Then the client gets a short walkthrough of how to edit their content. A site that only the developer can update is not really finished.
What Affects the Cost
Figma to WordPress prices vary a lot, because the projects vary a lot. These are the things that make the biggest difference:
- Number of unique page layouts. Ten pages that share one layout cost much less than ten different layouts.
- Mobile designs. If they are missing, the developer has to design the mobile version as well.
- Animations and interactions. Simple hover effects are quick. Scroll animations and custom sliders take longer.
- How much needs to be editable. Making every section flexible takes more time than editing a few fields.
- WooCommerce or other features. A shop, bookings, memberships or custom forms add their own work.
- Content entry. Adding all the real text and images is a separate task from building the site.
As a rough guide, here is how projects usually compare in size:
| Project type | Typical size |
|---|---|
| Single landing page | Small, a few days |
| Business site, 5 to 8 pages | Medium, one to two weeks |
| Larger site with blog and custom post types | Two to four weeks |
| WooCommerce store from a Figma design | Larger, depends on the products and features |
The best way to get an accurate price is to share the Figma file. I can then quote for the actual design, not a guess.
How to Keep the Cost Down
- Design mobile versions of the key pages.
- Reuse components and layouts where you can.
- Decide early which parts you need to edit yourself.
- Have your final text and images ready before the build starts.
Changes to the design halfway through the build are the most common reason a project goes over budget.
Final Thoughts
A Figma to WordPress build is not just making the site look like the design. It should also be fast, work on every device, and be easy for you to edit after the developer has gone.
If you have a Figma, XD or PSD design ready to become a WordPress site, take a look at my services or send me the file through the contact form below. I will review it and give you a clear quote.
