Create Figma designs for WordPress Block Theme

[OlaIola]

Every so often designers are going very creative with their designs and styles and using layout that are looking cool and can be put on a magazine cover but giving a developer a headache and all theme styles and scripts are going to a huge mess with a lot of exceptions, adjustments and fixes. There should be a way to create great design and keep things simple and straight forward for developers.

And if you are building a site with Blocks abilities should be limited to keep balance between amount of blocks and patterns and good look. And there should be a way to create a great look while keeping the design system.

This is the idea about best design practises I want to learn from someone and present as example for everyone.

[juanmaguitar]

@jasmussen @ndiego your insights for such a post would be very valuable

[hanneslsm]

I am currently building a Figma UI Kit exclusively for block themes and am happy to support here.

[bph]

@hanneslsm Thank you - would you want to write about your experience and share your learnings? We'd be happy to support your writing.

[hanneslsm]

Sure!
I'm busy the upcoming weeks but will try to get a draft done in parallel and as soon as possible.

[hanneslsm]

JFYI: I have started writing the outline. I'll keep you updated.

[bph]

Thanks for the update @hanneslsm - when you are ready for feedback share here in a comment

[hanneslsm]

Sorry for the delay. Life got in the way. Breakup. Moving. Distance from the screen. Now, I'm back.

Here is the outline with the key takeaways:
https://docs.google.com/document/d/1poK0u1WFWQBMgDFgFuAbMzRgCU1-Wr5ukso76XNlJwA/edit?usp=sharing

Combining Figma and WordPress is a fairly complex topic due to the different feature sets. Therefore, I think it makes sense to focus on the fundamentals.
Let me know if this goes into the right direction and if it sounds interesting to you. Happy to remove or add as much as you want - I have so many insights from building my Figma UI Kit & Block themes, I could talk ages about this topic. :)

[mattdwoodman]

I have some thoughts that I would like to contribute to this topic! I’ve been working with WordPress for the last 10 years of my career and Figma for around 4 years now. I recently built a boilerplate template of Gutenberg Core Blocks in Figma for my current employer, matching as many of the block settings as possible to Figma Component Properties. The thing I’d most like to share is how I used Figma’s Variables to setup the block Alignments (full, container, wide, etc.), so that the block width could be changed on both desktop and mobile by switching its Mode in Figma.

[justintadlock]

I think you've hit got a pretty good outline for two of the three primary points for the post:

• Mindset & prerequisites / Knowing the rules that you are going to break
• How to build a design system for block themes:

But I think the third point is really this one:

• Transfer your designs to your WordPress Block theme. This should be relatively easy if you have applied the above principles

As someone who doesn't work from Figma, I'd caution referring to this as easy, even relatively. But maybe by the time I read through the post, it will be easy. Mostly, I just want to say that I'd expect this part of the tutorial to be as important of the other bits.

Overall, I think you're good to move forward with fleshing the post draft out.

[flexseth]

As someone who doesn't work from Figma, I'd caution referring to this as easy, even relatively.

Agreed.

That said, I'd love to see some demos on using core components, extending core UIs with transitions in Figma, and creating custom components that can easily be ported to WordPress via Figma to React.

[hanneslsm]

@justintadlock Thanks for the feedback! I'll move forward with fleshing out the article.

As someone who doesn't work from Figma, I'd caution referring to this as easy, even relatively. But maybe by the time I read through the post, it will be easy.

Correct, this would be the idea - the article should make this process easier. But you're right, calling it still easy might be not correct.

That said, I'd love to see some demos on using core components, extending core UIs with transitions in Figma, and creating custom components that can easily be ported to WordPress via Figma to React.

@flexseth Thanks your input. I'm not sure if I can follow though, with core components you mean the Figma components or WordPress core blocks? Transitions is a topic by it's own, I'm not sure if this is in scope of the article. I'd focus on core blocks and styling of the blocks via theme.json.

The thing I’d most like to share is how I used Figma’s Variables to setup the block Alignments (full, container, wide, etc.), so that the block width could be changed on both desktop and mobile by switching its Mode in Figma.

@mattdwoodman Looks like we have worked on the similar thing in parallel 😄 Using different modes is in fact a topic I haven't fully optimized my Figma components for yet and I'd love to get your input, especially when considering intrinsic design.

[flexseth]

@flexseth Thanks your input. I'm not sure if I can follow though, with core components you mean the Figma components or WordPress core blocks?

Easily styling/building with WordPress Core components in Figma > WordPress.

There are Figma design boards for the components already I think (again, not great with Figma)
https://www.figma.com/design/e4tLacmlPuZV47l7901FEs/WordPress-Design-Library?node-id=1-2

Following the conversation!

[mattdwoodman]

@hanneslsm

@mattdwoodman Looks like we have worked on the similar thing in parallel 😄 Using different modes is in fact a topic I haven't fully optimized my Figma components for yet and I'd love to get your input, especially when considering intrinsic design.

Sure! Excited to contribute in some way. So I created a new Variable Collection called ‘Gutenberg Alignment’ with Modes for Full, Wide, Container and Narrow. I then created two Variables in this Collection for ‘—desktop-alignment’ and ‘—mobile-alignment’ and assign the values from WordPress to each Variable Mode. Finally, I have another Variable Collection with Modes for different devices (ie. ‘Desktop’ and ‘Mobile’), this is where I change my spacing values etc. on different devices. I created another Variable in this Collection called ‘—gutenberg-alignment’ and link my ‘—desktop-alignment’ Variable to the Desktop Mode (then follow the same principle for the Mobile Mode). Finally, I apply the ‘—gutenberg-alignment’ Variable to the width of my Components (and any device specific Variants). It’s long winded for sure but once setup it easily allows a Designer to switch the Alignment (width) of any Gutenberg Component in Figma just by changing Mode! 😅

Took me a while to suss it all out but it was well worth the effort in terms of being able to adjust my designs to meet Gutenberg’s capabilities!

[hanneslsm]

Hello @mattdwoodman
Thank you for your answer. I tried to follow your instruction but couldn't follow with the different collections. Could post the screenshot of the variable collections? It would help immensely to understand how you build it!

Thank you very much!

[mattdwoodman]

Hello @mattdwoodman Thank you for your answer. I tried to follow your instruction but couldn't follow with the different collections. Could post the screenshot of the variable collections? It would help immensely to understand how you build it!

Thank you very much!

No problem @hanneslsm I will post some screenshots tomorrow when at my work computer! Would be great to get a credit in the article for the technique, if possible?

[hanneslsm]

Would be great to get a credit in the article for the technique, if possible?

absolutely! :)

[mattdwoodman]

Thanks @hanneslsm – let me know if any further questions 👍 if you could please credit Matt D Woodman https://mdwoodman.co.uk it'd be much appreciated!

[bph]

Just a note regarding credits: Our external link policy doesn't allow to unofficial sites, only to personal WordPress profiles. @mattdwoodman could you please share your WordPress profile URL, so we have it on record, one @hanneslsm starts drafting an article and before it will be published.

[bph]

@hanneslsm What is your timeline to get a draft shared? Are there any blockers, I can assist you with?

[mattdwoodman]

@bph no problem my wordpress.com username is ‘mdwoodman’ 😊

[hanneslsm]

@hanneslsm What is your timeline to get a draft shared? Are there any blockers, I can assist you with?

I plan to get it done by end of this week. No blockers so far, I just realized it's very complex and I focus on the basics first.

[hanneslsm]

Here is my take on the article:
https://docs.google.com/document/d/1bt5Z460YvcyyNFOJNCEqf5OHwxoiNanG1QLxvKNYdQU

As said, I've worked on the article and realized that, given the complexity, I needed to focus on the basics and create a simple design system that aligns with how block themes are set up. To avoid the article becoming too long and detailed, I've structured it as a step-by-step guide. If more information is needed, I'm happy to add it.

@mattdwoodman As a result, I didn't include the different modes this time. Perhaps that could be something for part two. 😄

I'm eager to get feedback from you all! Specifically:

• Are the steps too detailed or am I making too large leaps?
• Is everything clear and understandable?
• Does the parts on Intrinsic Design and Auto Layout add value and make sense where it's included?

Thank you!

[bph]

@hanneslsm Thanks for sharing your first draft. Would you mind opening up the Google Doc for "All who have the link" and give them "commenting access", please?

[hanneslsm]

Thanks for sharing your first draft. Would you mind opening up the Google Doc for "All who have the link" and give them "commenting access", please?

Oh, sure! Changed the role of everyone who has the link to commenter.

[bph]

@hanneslsm This is great start! Thank you. I am fascinated how Figma can give a designer a head start on the Block themes.

Also, you probably could shorten the intro quite a bit in favor of being more specific in your instructions, at the beginning to get a newbie started.

I left a few comments and links on your Document. It's not a first review yet, as you would need to rewrite the piece to avoid the royal "we" See in the guidelines for writers: . Although the link goes to the particular space, reading the rest of the document might be interesting as well.

Are the steps too detailed or am I making too large leaps?

It's not clear, what the skill level is you assume your reader has. If I were your target audience, I wouldn't have any prior knowledge of Figma and would need a quick Step-by-Step instructions, on how to start with the variable part and then the design system. The screenshots, don't seem to guide me well here.

Does the parts on Intrinsic Design and Auto Layout add value and make sense where it's included?

I love that you favor of intrinsic design, and the AutoLayout makes perfect sense

I hope this first run through helps. I'd also be happy to go on a screen sharing session with you to discuss things a bit more. If you'd like to do that DM me on WPSlack, also as bph and we can coordinate date/time

[hanneslsm]

@bph Thank you very much for the prompt and good feedback!
I have started to rewrite, incorporate your suggestions and will continue doing so.

It's not clear, what the skill level is you assume your reader has. If I were your target audience, I wouldn't have any prior knowledge of Figma and would need a quick Step-by-Step instructions, on how to start with the variable part and then the design system. The screenshots, don't seem to guide me well here.

The article is for designers who already have experience with Figma and know the autolayout and variable function. I will make this clear in the intro.

I hope this first run through helps. I'd also be happy to go on a screen sharing session with you to discuss things a bit more. If you'd like to do that DM me on WPSlack, also as bph and we can coordinate date/time

Much appreciated! I'm going to incorporate your feedback first and will gladly walk you through the new version to get your opinion then.
Thanks a lot!

[bph]

Excellent. Thank you for working further on the article and I am looking forward to read the updated version.

[hanneslsm]

FJYI, I rewrote the first two pages already and will continue with the next section in the upcoming days.

[hanneslsm]

Hello everybody, I hope you're all doing well!
As already mentioned in my previous comment, I rewrote the full article. Uff, this took much more time than anticipated!

The article now consists of three parts (four if you count in the Intro)

1. How to set up your Figma file for WordPress block themes
2. Creating a block theme design in Figma
3. a. Transferring the Figma design system to a WordPress theme.json
4. b. Transferring the content from Figma to the block editor

There are still some minor things I need to check and links to add, but other than that the article is ready for a review.
https://docs.google.com/document/d/1jFIqNJOaZG9FdaTy2v2mflwphVPvJ6u5EMejyoR-qJA/edit?usp=sharing

[bph]

@hanneslsm I got through your introduction, (= approx first 700 words, then I had to lie down again). It could use some shortening. It's a long runway to get to the meat of the matter or the article.