Quick answer
A Figma design becomes a WordPress site in six stages: design sign-off at desktop and mobile sizes, a handover of styles and assets, a theme build that turns the layouts into editable templates, content entry, testing on real devices, and launch. The build itself is often the quickest part; content and decisions are what usually slow it down.
Figma has become the standard tool for designing websites. It lets a designer show you exactly what your homepage will look like, click through a prototype and leave comments on every element. It also creates a common misunderstanding: that once the design is approved, the website is nearly done. In fact, a Figma file is a picture of a website. It does not load, cannot be edited by you, does not adapt to every screen and does not send enquiries to your inbox. Turning it into something that does all of that is a separate piece of work, and knowing how it goes helps you plan, budget and avoid the usual delays.
What a Figma file is, and is not
A Figma design contains page layouts, colours, typefaces, spacing, images and, if the designer is thorough, reusable components such as buttons and cards. It may include a clickable prototype that shows how pages link together. What it does not contain is working code, content management, forms, search engine settings or anything that responds to a real user. Figma is a design tool, and it is very good at that job.
WordPress, on the other hand, is a content management system that runs a large share of the web, as the project describes on its about page. A WordPress theme controls how content looks. The job is to build a theme that makes your content look like the Figma design, while letting you edit that content without touching code.
The six stages, in order
1. Design sign-off
Before building starts, the key pages should be approved at both desktop and phone width. Any page that will be built from a template, such as a service page or a blog post, needs at least one designed example. Changing the design halfway through the build is the most expensive kind of change.
2. Handover
The designer hands over the file with defined styles (colours, type sizes, spacing), exported images and icons, the fonts and their licences, and notes on behaviour: what happens on hover, how the menu opens on mobile, what the form does when sent.
3. Theme build
The developer turns the layouts into WordPress templates and reusable blocks, so that a new service page can be added later with the same design. This is where decisions about editing happen: which parts you can change, which are fixed, and how much freedom you get without breaking the layout. The official WordPress theme handbook documents how themes are structured.
4. Content entry
Real text and photographs go in. This is where designs meet reality: headings are longer than the placeholder, photographs are a different shape, and a page that looked balanced with lorem ipsum suddenly feels crowded. Expect small adjustments here.
5. Testing
The site is checked on real phones, tablets and browsers, forms are tested end to end, page speed is measured, and accessibility basics are checked: contrast, keyboard use, image descriptions.
6. Launch
The domain is pointed at the site, SSL is set up, any old pages are redirected to their new addresses, analytics is connected and the site is submitted to search engines. Our website launch checklist covers this stage in detail.
What a good handover file looks like
The quality of the Figma file has a big effect on the speed and accuracy of the build. A developer can work from a messy file, but every gap is a question, and every question is a delay or a guess. A good handover file has:
- Named colour and text styles, so the developer sets them once rather than measuring every element.
- Components for repeated parts: buttons, cards, testimonials, the header and footer, each with their states such as hover and active.
- A spacing system, usually a small set of sizes used consistently, rather than slightly different gaps everywhere.
- Every page state shown: the open mobile menu, a form with an error, an empty search result.
- Images exported or marked for export at the right sizes, with the original photographs available separately.
If your designer works this way, the build is faster and the result closer to the design. If the file is a set of loose frames, budget a little more time for questions.
Editing after launch
A WordPress site built from a design should give you freedom in the right places and protect the design everywhere else. In a typical small business build, you should be able to edit all text, swap images, add new pages from the existing templates, publish blog posts and update opening hours or prices. You should not normally be able to change the layout of the header, the brand colours or the spacing system by accident, because that is how sites drift away from their design over a year or two.
Ask to see the editing screens before launch. If changing a phone number means opening three different settings pages, ask for it to be simplified. If you have struggled with this on a previous site, our post on not being able to update your own website covers what good editing looks like.
How the build approach changes the result
| Approach | How it works | Result |
|---|---|---|
| Automatic converter | Plugin turns Figma frames into page-builder layouts | Quick, but often heavy code and awkward editing |
| Page builder by hand | Developer recreates the design in a visual builder | Familiar editing, slower pages, builder lock-in |
| Ready-made theme, restyled | A theme is adjusted to look like the design | Cheaper, but compromises where the theme differs |
| Custom theme | Developer codes templates and blocks to match | Faithful, fast and clean to edit; more upfront work |
None of these is wrong for every project, but they lead to very different sites. Our comparison of themes and page builders and our guide to bespoke WordPress versus a theme go into the trade-offs.
Where projects slip
- No mobile designs. The developer guesses how things stack, and you disagree with the guesses.
- Late content. The build waits for text and photographs. Our guide on planning website content helps you get ahead of this.
- Design changes during the build. Small tweaks are normal; a new homepage concept is not.
- Missing font licences. A typeface licensed for desktop use may not be licensed for the web.
- Unclear editing needs. Decide early what you will want to change yourself.
What you should get at the end
A finished site should come with admin access in your name, a short guide to editing pages, the Figma file or an export of it, font and image licences, and clarity on who hosts and maintains the site. You should be able to change a heading, swap a photograph and add a blog post without calling anyone.
Ask about speed too. A design that relies on large background videos or many web fonts can be slow on phones, however good the build. Our guide to website speed for small businesses covers what to watch for.
A worked example
A physiotherapy practice in Exeter had a Figma design from a freelance designer: a homepage, a services overview, a single treatment page, a team page and a contact page, all at desktop and phone width. The build turned the treatment page into a template, so the practice could add its other seven treatments using the same layout. The team page became a list that the practice manager updates by adding a photograph and a short biography. During content entry, the treatment names turned out longer than the design allowed, so the heading size was reduced slightly across all treatment pages. Testing found that the booking button sat below the fold on smaller phones, so it was moved into the header. None of those changes needed the designer, because the design system in the Figma file made the right answer obvious.
Questions to ask before the build starts
- Will the site be built as a custom theme, a restyled theme or with a page builder?
- Which parts will I be able to edit, and which are fixed?
- Who supplies the final text and photographs, and by when?
- Are the fonts licensed for web use?
- How many rounds of changes are included once the site is built?
- Who hosts the site after launch, and who keeps WordPress and plugins updated?
Clear answers to these six questions prevent most of the arguments that happen late in website projects.
What drives the cost
The price of turning a design into a site depends less on the number of pages and more on the number of different templates. Ten service pages that share one layout are one template plus content entry. Ten pages that each have a unique layout are ten templates. Other cost drivers include custom features such as booking, shops or member areas, complex animations, the number of form types, migration of content from an old site, and how much of the content you supply ready to paste. Our website cost calculator gives a quick estimate for your own project.
How we build
Our custom WordPress website is £499 one-off for up to eight pages, hand-coded with no page builders, built over two to four weeks. It includes custom design, a mobile-first build, the SEO foundation, contact forms connected to your inbox, Google Analytics, a written guide to editing, and 30 days of support. You own the code and can host it anywhere. If you already have a Figma design, we can build from it. All our prices are on the pricing page.
Get the UK Website Project Brief Template (free)
A two-page template for briefing any UK web designer: sitemap, integrations, audience and deliverables. Cuts revision rounds in half.
No spam. UK GDPR compliant. We only use your email to send this resource, unless you tick the box to hear from us.
Frequently asked questions
Can a Figma design be converted to WordPress automatically? +
There are plugins and services that claim to convert Figma files straight into WordPress pages, usually by generating page-builder layouts. They can be a quick start for simple pages, but the result is often heavy, hard to edit and not responsive in the way the design intended. A hand build takes longer and gives you cleaner code and a site you can maintain.
How long does it take to build a WordPress site from a Figma design? +
For a small business site of up to eight pages, the build itself is usually a matter of weeks rather than months, once the design and content are ready. Our custom WordPress builds take two to four weeks. The most common delay is not the build but waiting for final text, photographs and decisions.
Do I need a mobile design in Figma as well? +
It helps a great deal. A designer who shows key pages at phone width answers questions the developer would otherwise guess at, such as how the menu works and how columns stack. At minimum, the homepage and one inner page should be designed at mobile size before the build starts.
Who owns the Figma file after the website is built? +
That depends on your agreement with the designer. Ask for the Figma file, or an export of it, as part of the handover, along with the fonts and image assets used. It is useful when you add pages later or change designers, and it saves paying for the same design work twice.
Will the live site look exactly like the Figma design? +
Very close, but not pixel for pixel on every device. Real text lengths, real photographs and different screen sizes all shift things slightly. A good build keeps the spacing, type and colours faithful and handles the in-between screen sizes sensibly. Agree in advance that the design is the target, and review on real devices.
