Figma to WordPress service

A Figma file shows what a site should look like. Each screen is a frame: a container, drawn at a set size, that holds the text, shapes and images of one layout. A WordPress theme is what makes a real site look that way. In WordPress's own words, a theme "can control everything from colors, to fonts, to the entire layout".

This service turns the first into the second. It is a build, not a move. There is no live content to carry across and no old site to copy, only a design to be made into a working WordPress site.

It is for the point where the design is finished and agreed, and you need it built.

Who it is for, and who it is not

It fits when all of these are true:

• the design is finished, and whoever has to approve it has approved it
• it is in a Figma file you can share
• you have, or can get, the words, the images and the fonts the design uses
• you want pages you can edit yourself afterwards, in the WordPress editor

A different page fits better in these cases.

• There is no design yet, or it is still changing. We build what the file shows. For the designing, see WordPress design and development.
• The design only restyles a WordPress theme you already run: its colors, its type, its spacing. A child theme holds your changes to a theme, so the parent can be updated without losing them. How to create a WordPress child theme shows how, and it may be all the build you need.
• The design replaces a live site on another platform. The build is only half of that. Carrying the old site's content across and redirecting its addresses is a platform migration, quoted in writing as well. Say so in the assessment.
• The design shows a store, a booking calendar or a form that has to work. A design shows what a feature looks like, not how it works. The quote says whether each is included or is a separate job of custom development.
• You only want changes to a site you have. New text, a replaced image or a menu item are website edits.

What you get

• A WordPress theme built from your design. The theme controls how the site looks. Your text and images are stored by WordPress, apart from the theme.
• Each page layout in the file, made as a WordPress page you can edit. You change the words and pictures in the WordPress editor. The quote lists the layouts by name.
• The design at the screen sizes the file shows. If the file holds a desktop frame and a phone frame for a layout, both are built as drawn. A file does not show every width a screen can be. Sizes it does not show are worked out with you.
• A staging copy to look at. The site is built on a staging copy, and you go through it there before it goes live.
• A fixed quote in writing before any work starts.

What we need from you to start

The request goes through the free migration assessment form. It asks for your name and an email address for the reply. Under "Where is the site now?" choose "A Figma design (not built yet)", and under "Where do you want it?" choose "WordPress". In the message, say how many layouts the file holds and when you would like the site live. Then we need these.

• The Figma file, with view access. Use "Share" in the file to invite us or to copy a link. View access is enough. Figma lets anyone with view access export assets, unless the file's owner has restricted copying and sharing, so leave that restriction off or send the assets yourself.
• The fonts, and their licenses. Figma includes Google fonts and Apple fonts in a file by default. A font installed on the designer's own computer is not there for anyone else who opens the file. Tell us which fonts the design uses, and check that your license for each one allows use on a website.
• The images at full size. Figma exports assets as PNG, JPG, SVG or PDF, which suits logos and icons. Send photographs as their original files, not as they sit in the design, so that each can be prepared at the size its layout needs.
• The text. Send the final words for each page, or tell us that the sample text in the file is final.
• Which layouts are in scope. Name the frames you want built. A file can hold drafts and alternatives beside the agreed design.

How it works

What it does not cover

• The design itself. We build what the file shows. We do not design it, and a layout that is not in the file is not in the build. For design work, see WordPress design and development.
• Hosting. You buy the hosting plan and the domain. The site is built to go onto it.
• Writing the content. The words and pictures are yours to supply.
• Looking after the site afterwards. Updates, backups and monitoring from then on are a care plan. See the WordPress maintenance service.
• Moving an existing site. If the design replaces a live site on another platform, carrying its content across and redirecting its addresses is a platform migration, quoted in writing as well.

Before you ask: do it yourself, or check first

Count the frames first. The quote lists the layouts to be built, so open the file and name the frames you want, leaving out drafts and alternatives. Add a phone frame for each layout you want built to a set phone design.

Each of these is free to use.

• How to create a WordPress child theme. The do-it-yourself route when the design only restyles the theme you run.
• WordPress launch checklist. What to check in the days before a new or rebuilt site opens: content, settings, accounts, forms and email, and search.
• How to set up a WordPress staging site. What a staging copy is, if the word is new to you.

If the design replaces a live site, its old addresses matter as much as the new pages.

• How to migrate a website without losing SEO. What Google and Bing document about a move, and why each old address gets a redirect of its own.
• Website migration checklist. The order of work before, during and after the switch.
• WordPress migration cost. Which job a quote is for, what moves the price of a change of platform, and what a quote should say.
• Redirect map builder and redirect checker. The first turns a list of old and new addresses into redirect rules. The second shows where an old address leads now.
• Platform detector. Reads what the present site is built with, from outside.
• Moving a WordPress site or changing platform. Every page we have on the subject, in one place.