From Figma to WordPress

How do you get from a creative idea in Figma to something that actually works in WordPress?

Watch this interesting one hour tutorial by Damon Cook and Sharah Snow from WordPressTV:

Damon’s Figma

In a sticky comment Damon Cook linked to his Figma file. See below.

DX – “Designer Experience”

This video is interesting for several reasons. First of all because it is a fine demonstration of the ideas behind the new theme creation process. First all desig elements like colors, fontfamily for the headers (h1 – h6) were designed in Figma by Damon. The Figma production more or less had the same structure as a WordPress theme.

Then Damon had to define the colors and fonts in theme.json. Now the DX became interesting. Editing a complex theme.json file is not a trivial thing to do for a web designer. The DX also demontrated how things will break down if you forget to add the odd comma, curled / sharp brackets and so on.

If you forget just one of these characters the design breaks apart.

Here we must remember, that Damon is an experienced web developer. Editing the theme.json by hand is not easy at all.

However, when everything is debugged the theme looked almost exactly like the design suggestions in Figma.



From the video we can deconstruct a WordPress development model based on Figma prototypes:

Figma Workflow

  • Develop your prototype like a style tile in Figma.
  • Add colors and show your hex codes. Be systematic when you name colors. Name according to usage: “Background” is better than “green”.
  • Show all paragraphs with fonts
  • Add hedings: h1 to h6 with the fonts you’ll use.
  • Add buttons and similar design elements.

In WordPress

Most of the work in WordPress consist in the somewhat difficult editing of the theme.json file. However, in order to check if everything works you’ll need a “style tile page”.

Style Tile Page

  • Create a blank theme, eg. via a plugin or this page.
  • Add colored squares for your colors
  • Headers
  • Paragraphs
  • Buttons
  • etc. etc.

Make sure to add every styled element to this pages so that you can test your theme.json before creating content.

Structure and the menu

After the style type page add the structure. Create the static pages – then you can add the menu.


Before you begin you’ll need to know the JSON syntax. This webpage – – will give you a clear idea of how the key-value pairs work in JSON.

Source (op.cit.)

The we can follow Damons way of editing theme.json. He worked his way from element to element. Basicly the steps looked like the ones above. But now we add the styles to theme.json. As soon as you add your primary color, you can see the result in your style tile page.


  • Add colors by hex codes.
  • Add hedings: h1 to h6 with the fonts you’ll use.
  • Add buttons and similar design elements.
  • Etc. add elements one by one.

Sometimes you may want to edit the theme.json file. At other times it’s more easy to edit the specific blocks in the WordPress Style Editor. I’d suggest that you follow that approach as soon as the basic elements works.

Add fonts and theme colors manually in theme.json

Here is a sample of the json you can add for the colors in theme.json:

// this is should be placed under colors

"palette": [
  "slug": "foreground",
  "color": "#000000",
  "name": "Foreground"
  "slug": "background",
  "color": "#ffffff",
  "name": "Background"

Now you can edit the blocks in the editor – since this is more easy than editing the theme.json.

Efter editing all relevant blocks you can download the theme as a zip file – again this is one of the options in the theme editor.

Do we really need Figma here?

Of course you could work out everything in your favorite editor and as a tweak of say one of the block based themes. However, it is far easyer to work in a systematical manner if you know what you need to do. The workings become far more easy if you know what you want to do.

Probably many designers stay too long in Figma. IMHO Figma is the place where you develop the way the elements should look. When you have a clear vision here move to WordPress.

Figma Introduction

How do we get started with Figma. The following video is a really good starting point.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Enable Notifications OK No thanks

We use cookies - more information will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.