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! :)