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.

Workflow

Figma

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

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”.

Structure and the menu

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

theme.json

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

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.

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.