Designing for Clients Using Figma Systems and WordPress Block Themes

Derek Hanson:
Well, welcome everybody to the very first episode of the Publishing Flow podcast, part of the Content Spark series here on openchannels fm. I’m Derek Hansen and I’m going to be your host here for this series and I’m really excited. Today this show is going to be all about how to gain efficiencies in the web design and development process, especially when you’re working with clients from an agency perspective. And we’re joined by Ash Shaw today, the founder of Lightspeed WordPress design and development agency based in Cape Town, South Africa. He’s been in WordPress for over two decades and if you were at WCEU, WordCamp Europe or if you have watched any of the talks he was there and presented on what we’re going to chat about today. Bridging Design and Development Figma Design systems for WordPress success so Ash, welcome and thanks for joining us today.

Ash Shaw:
Thanks a lot Eric. Yeah, I’ve had a really inspiring couple of months. The months leading up to WordCamp Europe was nerve wracking and mind expanding. I had to brush up on a lot of topics that I hadn’t actually gone so deep into and it changed my workflow even more than I expected my team’s workflow, should I say.

Derek Hanson:
Yeah, I’ve been thinking about Figma a lot recently. Our team with the special projects at Automattic designed all of our sites with Figma. And I know one thing why I was really excited about your talk and you have some blog posts that will point people to on your agency’s website is how to make that handoff from design to development feel almost seamless. But Figma still feels like I’m not a designer, but Figma still feels like a pretty new tool in the realm of design and web design. So when did you start your team start using Figma and how has that really transformed how you work with clients on your projects?

Ash Shaw:
We started with Figma in about the last quarter of 2022. Before that we worked with Sketch, so we had a lot of, well that we didn’t call them design systems Back then, but design system ish files we built modules, I can’t remember actually what you call them in Sketch. They’re components in Figma. We built them to match our classic WordPress theme. And when we started off with Figma, we decided to build around about maybe nine months before we started on our journey of building a block theme, our own block theme. So that block theme then laid like a path for us to decide how we were going to design for that block theme. And when I did research into moving to figma, the idea of building a design system was being spoken about all over. Maybe not as much as now. Now it’s, it’s incredible how many design systems are out there. And we started off and there were not as many features with regards to variables. Most, most of the style related values we put into Figma styles. It wasn’t until last year that we truly leveraged the power of FIGMA variables. Yeah, and they also released a load of new functionality last May after the Figma config conference, which enabled us to do so much more, you know. And this year they released a whole bunch more around AI and many other aspects as well. It was one of the biggest releases I’ve seen in software ever. I’d go as far as saying that.

Derek Hanson:
Wow, with Figma, do you. So you have a theme And I want to come back to block themes, I think because we also, every site we’re building now is just straight site editor block theme. But starting in Figma, do you have like one particular file that you always work from and that’s your template or do you, you know, change it based on the project? Like how, how vast is your collection of design systems?

Ash Shaw:
So we originally, as I mentioned, started off with creating a design system specifically for our block theme. And then I think it was around about. Yeah, it was last year sometime the 2025 theme default theme came out for WordPress and when I had one or other project I decided to use 2025 and I came to the conclusion that we couldn’t build a better theme than that. It was just incredible. Uses all of the latest block theme functionality within WordPress core and the latest theme JSON values, schema values to refactor our own LSX design theme would have taken us a lot longer than to actually build with 2025 default. And that combined with Create Block Theme, which is a plugin by the WordPress community, allows us to design in the site editor according to our block based design system in Figma and then export a site specific theme. So the talk that I did at WordCamp Europe spurred me to get my teammate to refactor our design system to not be specific to our theme LSX design, but rather be a general block theme design system for the WordPress community. And I’m very happy with that change. You can easily extend it if, for example, the 2025 theme has accent 1 through to 6 for colors and base and contrast. If you need another few colors for whatever reason, for shades or whatever it might be, you can easily expand that by adding additional custom colors in the site editor. Then you would ideally plan out all of that in your figma design system file. So what we do for new projects is we duplicate the design system file. We don’t use it as a library because each project has its own requirements. So, for example, before we did the refactor, we had the number of button variants and like, that was incredible. It was too many, way too many. And we realized that we don’t need a pill button. We don’t need button that has sharp corners or four, radius of four or something like that. All you need is one or maybe two button components to align with the core WordPress blocks. So there’s the standard button and then you’ve got an outline button. So those two are sufficient. Obviously, if a project demands another type of button, you can for that project generate an additional button, for example, and then that will become a block style. So what we’re trying to do within, or we’ve done it in our design system, what we now do on a project by project basis is decide what section styles to create what block styles. You don’t really, on a client specific project need a variety of typesets. Like in the default WordPress theme, I think it’s got seven different typesets and seven or nine different typesets. And same with colors. You really don’t need that. You only need one typeset that probably has a pair, one for headings, one for body, and that should be sufficient. We then would, in the design system say the project used a different set of fonts to what we typically would use. Then we would swap those out in the design system for that specific project. Same with the.

Derek Hanson:
Yeah, 2025 has been, yeah, a great theme because of its flexibility to be a lot of different things to a lot of different genres and use cases. But when you’re working directly with a client, they have a brand, a color scheme, a specific font combinations. So you know, yeah, you strip all of that stuff away, but you kind of are touching on something that is very Curious to me, and that’s something I appreciate is like sticking close to core. So changing your design system to be more aligned with a core like default theme like 2025. Where are you finding yourself within FIGMA and designing for a site? Because if you’re sticking close to core, that means you’re sticking close to the block editor in Gutenberg and the blocks that are available there. We know that there’s some blocks that we would like to see within Core that are not and they’re fulfilled through other, you know, products that offer like block libraries, like generate blocks, Cadence, you know, what have you. So when you’re designing and feeling a little bit more free to meet the goals of a client and you have something that has like a more custom need, say like, you know, an accordion or something like that, how are you staying close to core throughout that process and you’re finding yourself like missing like a block or a feature in WordPress that you’ve designed in Figma.

Ash Shaw:
Well, in my experience, Cadence blocks, for example, or many of those multitude of blocks within one plugin, they aren’t that much different to the core blocks. So we create block styles so that like you said in Accordion, the details block is exactly that. So create a block style for it and then whatever you’ve done within your design system for that project, you create a block style and you put it under the forward slash styles blocks and then you can choose to apply that block style or you can make it the default if you prefer. It’s entirely your choice there. But. Well, here’s an example. Like we have Tour operator plugin which allows tour operators to build a tour operator website. So that has a load of blocks that are very specific to a tour operator, post types that are specific to them, tours as a post type, accommodation and destinations, those are all in Core. So we are currently doing a refactor of the design that design system. And because we’ve created custom blocks, we’re working towards refactoring the design system for the custom blocks that are maybe missing. So we’ve specced out a number of new blocks that we want to do. And because they’re going to be custom blocks, they’re going to have their own block JSON which you can tie into FIGMA values and potentially even define naming conventions that align the custom blocks within your project to whatever’s in your design system. And I haven’t quite got there yet. We’ve been a little bit too busy for that. And I’m not sure if it’s really going to be valuable, but we would like to be able to export the JSON that we need directly from figma. So I’ve done a bit of testing on my own and the current design system is much closer to being able to export JSON that you can use for theme JSON, but it’s still that quite a distance off. And there are some plugins that are available for figma that can help you export theme JSON. My ultimate goal would be with our Tour Operator plugin to link it up with Storybook. And that’s a much. That’s one of the next stages. We’ve still got a lot of work ahead of us around refactoring design and code, so when we recoded our classic Tour Operator plugin to be a block based plugin, we didn’t understand enough at the time about how the best approach would be to structuring folders. And I’ve been doing an audit this week of some of the code and I feel that’s where we really need to clean things up. And as I’m, as I’m planning out the refactor, I’m planning out the design system changes.

Derek Hanson:
Nice. I want to step back a little bit because I’m curious. So figma to WordPress and your design system that you’re building to essentially make this transition from designer handoff to developer as smooth as possible. Go back and describe for me before your current process, what were the pain points, what you know, what were the timelines for that part of the project and you know, where things were like more in the back and forth state. What were the inefficiencies prior to you getting to this point now with your system?

Ash Shaw:
Well, the developer handoff part of the process was nowhere near what it is now. We were using Dev mode within figma, but I was unaware of developer annotations and how you could add them to components to describe how a component would work. You can add them to the prototype, but quite often they’re not visible. If you’re going to fix the size of the screen within the prototype, the annotation might refer to something that’s lower down, so then it makes it more difficult. So what we do is we’ve started now adding to all of the more interactive components some kind of notes about accessibility, functionality, what the transition would be on rollover or various states. What this does is it helps communicate to the developer more than just showing them a component or showing them a prototype. And that I feel was a big hole in what we were doing. Now that we’re able to do that. I’ve started onboarding a new developer and it’s made the process of onboarding him that much easier because now he has that context. And before we were pretty good about collecting content in advance, but now I’d say in the last couple of years, with AI, generating any missing content has made a radical difference to our workflow. Because using Lorem Ipsum just really isn’t an option, in my opinion.

Derek Hanson:
Right, yeah, yeah, you could always. Something could always slip through the cracks and then somebody’s seeing Lorem Ipsum on a site.

Ash Shaw:
Right, yeah. And clients don’t really get a good concept of what it is they’re going to get. If you can’t show them what some kind of form of real content will look like, then I’m trying to think of other things that we’ve improved. I’d say we just. All round, we tightened step by step through our process, just improvements to how we use variables to allow us to build better prototypes. Prototypes now used for handing off to developers as well as clients. So first, obviously, we will get input from the developer on the prototype and the components, using comments on the prototype and annotations within the design system. If they think all of that is feasible and it’s ready to go to the client, then that’s where we would pass it off to the client. One of the biggest changes we’ve made, I’d say even in the last six weeks since my talk, was to add a table of contents to prototypes, the difference it’s made is chalk and cheese. Now, when a client opens a prototype, it starts with the table of contents, which explains how the prototype works as a start. Because we were finding that when we sent prototypes to clients, they misunderstood what the purpose of a FIGMA prototype was. They thought it was the website, because now they’re clicking and oh, but it doesn’t do this and it doesn’t do that and they give us all this irrelevant feedback. So now you explain that, you give them context. How does it work? Then the next context we give them is what is it we want feedback on? I don’t want to know that this little thingy is somewhere. Yeah, I don’t know. The feedback that clients give, it’s sometimes quite challenging. So we want to specifically know what kind of feedback you have on fonts, colors, interactions. There are a host of things that we request feedback on and it changes from project to project. Then that section is followed by an exact list of links to prototype frames that we need them to comment on. And interact with before we relied on the fact that they would hopefully know to click all of the links right. And that didn’t happen.

Derek Hanson:
Yeah, so you’re creating a high fidelity prototype that is interactive in the same way that it would be interacted with on the actual website. So when you’re looking at what is traditionally like a static mock up on Figma, there would be links like embedded within the designs and then clients were missing that they needed to click on some of these to experience the future interaction. Interesting.

Ash Shaw:
So you say high fidelity, but our design system already has different prototypes built in. So with the standard LSX design system that’s aimed at block themes in general, we have a WooCommerce prototype built in. So with any WooCommerce project we already have components built for a variable product. Say it was a T shirt and it adds medium, small, medium large, white, blue, red, and maybe with print, without print, whatever the variables or the variable product options would be. And we have all of those put together in a variety of different block templates that are interactive already. So that took us a lot of time. So when our next commerce project we would start with putting in the branding, which means swapping out the placeholder logo in the component, which then updates the whole design system. You pick the colors and the typography that you want to use. You update those within no time flat. You already have a design system that uses their colors, applies their recommended or our recommended fonts for them, and the prototype updates. So now with maybe an hour’s worth of work or less, you can send them something obviously not with their content yet, but something for them to interact with for very early stage discussion. And we also in the same prototype have a very basic website under a slightly more advanced website that has posts and categories and things like that. So when you update all of the colors and branding, those also update. With Artur Operator design system we do the same thing, except then there it Updates a load of templates. Because the tour operator sites are quite involved, they need archives for destinations, archives for tours, accommodation, single templates, you’ve got template parts that you want to adjust and by simply updating a few small areas, you can then send them that early stage prototype. I actually before we’d refactored our tour operator plugin to be a block based plugin, I sold my first tour operator site based on the prototype and doing exactly what I just said.

Derek Hanson:
Oh, that was the pitch essentially.

Ash Shaw:
Yeah. Wow. And it took us very little effort to achieve that. Obviously the next steps, getting their content in and the next amount of work that, that did take a lot longer. But the other cool thing with AI now and Figma is you can easily populate components with AI content. Just so if you wanted to customize that content a little bit further within the prototype, you can use Figment’s built in AI.

Derek Hanson:
Yeah, it’s just all right there. Yeah, that makes it so much, so much easier. And you mentioned content and having like a content first approach, which is something that I, as an account manager that’s leading a project through its life cycle from design to development, content being the core to design from the beginning. I’m curious these like really awesome working prototypes. If a site is complex as like this touring website or like a large E commerce store, do you ever start like steps before that? Like we’re just going to work on the site architecture workshop that get that in place and then we’re going to work on wireframes and not apply any styles to the design. We’re just going to sort of like lay things out so we get a sense of the template layouts and the post layouts and things like that. Do you, is that a part of your process or do you, is this system allowed you to just like move right into like fully branded designs?

Ash Shaw:
Well, our first step is we have an existing client questionnaire and that will extract depending on the type of client. If it’s an E commerce client, we’ll ask a selection of questions that we wouldn’t ask a normal straightforward business website. If it’s a tour operator client, then we’ll also need to ask a number of questions that aren’t a part of the standard. But we have questionnaires for each of these industries and we gather this information which informs us on what we need to know to be able to make choices on color and typography based on branding and the feedback that they provide us on voice and tone. So that questionnaire is a vital part of the kickoff with the client. And we can’t start any kind of design without understanding who they are, what who their customers are and what they’re trying to convey. So that one of the next things that I do is I provide the client with a document that is again related to industry. And it’s a content collection checklist. So that’s accompanied by a set of content collection instructions which define naming conventions, folder structure. We give them the option of choosing a variety of file sharing services. We prefer Google Docs, Google Drive for us, that works. Sometimes clients don’t. They’d want to use something like Dropbox or whatever system. It really doesn’t matter. What does matter is agreeing on naming conventions upfront for files and folders. A site that I’m working on now is a main site with four sub brands and the four sub brands are different teams. So the size is collected by one person and each of the sub brands are different people that have been allocated. So the instructions there are rather key because we don’t want them to give us IMG11098JPEG as an image for the homepage, we want them to name it maybe something like Hero, some kind of descriptive text for the image. Right. Because when that’s uploaded to WordPress then that’ll already give WordPress some useful information, especially when you’re going to be searching the media library at a later stage. So if they actually follow these instructions, it makes the job a lot easier. If they don’t follow the instructions and we do an audit of the content collection, we will persist in trying to get them to do the renaming and structuring the way we like. It’s not just for our benefit, it’s an archive for future.

Derek Hanson:
Oh yeah. Yep.

Ash Shaw:
If they need to reference something later down the line or find files, it. It all follows quite a logical structure.

Derek Hanson:
Yeah, A lot of times that the. Yeah. Communicating with a partner or a client, these sort of like best practices that seem like non important really like work to your mutual benefit down the road for sure. So I’m curious though, something that I’ve done recently and I’m going to talk about this on a future episode of the show with the content collection process because this, I think this is within agency work within web development that is a major sticking point and oftentimes a blocker to the successful progression of a project in its timeline. And something that I’ve done a little bit more recently is move partners into the block editor sooner as the content collection process. So instead of like filtering through Google Docs and, you know, sharing lots of files and folders, just bringing folks directly into the editor to write their content. So it’s just in the space that it’s going to be built in the first place. And we’ve had pretty good success with that recently. But the question I want to ask to you is, do you ever find yourself, you have this really elaborate Figma system. Are you ever in scenarios where you feel like you need to skip that part of the process and just jump straight into the site editor and the block editor in WordPress? Because either like you have a quick turnaround site, you have enough, you know, tools within the editor to design and style things just right there. Maybe it’s like a simple brochureware site. Are you ever designing directly in the editor or are you always using Figma and do you see that ever, you know, changing in the future?

Ash Shaw:
So personally I design in the editor in site editor. When I’m working on my products, I find quite often achieving what I want can be quicker in the editor. But when it comes to clients, there’s. Even though personally I feel the block editor is extremely simple to use, it is not to the end user, I would love to say it is. But if you have watched some of the screen shares that I’ve watched where I’m dealing with customers that are struggling with the browser, not with the block editor, they’re struggling to use just their browser.

Derek Hanson:
Right.

Ash Shaw:
Yeah, that is a problem. So when working with like a Word document, for example, I mean, I’d accept them in Word documents, they can write it in Word offline, they, I mean, I had hoped for their benefit that they were using AI to generate some content and that. But again, a lot of people do not understand that sort of thing. To expect them to do that is still too much. So I, I haven’t found many customers that would fit the use case that you just mentioned of going straight into the site editor. Unless I had done a significant amount of training and given them practical exercises to build things. They just do not understand WordPress.

Derek Hanson:
Yeah.

Ash Shaw:
And that is a blocker and it prevents things. And I’m talking about dealing with large corporates or smaller companies or medium sized companies. Especially with larger companies you have people or lots of people that could be responsible for things. And I’ve done training with people on how to use the block and then I look at what it is they do after I’ve unleashed them on the system. And one of the biggest issues that I have with the content that people upload are with images not renaming the files in advance. And I do consider that to be a really important part of a process because down the line, if you come back to a site a year after you’ve unleashed the client and all they’ve done is upload IMG number, number, number images, it’s, it’s a real problem. Or just WhatsApp images.

Derek Hanson:
Yeah, images come in all different types now. And especially with smartphones, like, you know, any user can have such random file types that they’re going to upload to their site for sure.

Ash Shaw:
And also WebP, for example. That’s, that’s not. Yeah, not always that. Maybe they just save it from somewhere and they don’t. You don’t know the size. At least when you evaluate everything in a folder structure, you can see, okay, well this is a 15 kilobit image. Maybe we need something a little bit bigger, right?

Derek Hanson:
Yeah. Or you got like a five megabyte image. Like we need something smaller, right?

Ash Shaw:
Yeah, exactly. Exactly. Yeah. So I, I do hear where you’re coming from and in an ideal world I would love to do that, but I don’t find ideal with those clients.

Derek Hanson:
Yeah, yeah, that’s interesting. Well, it seems like you’ve really tapped into a massive pain point and you’re solving a very real problem. And what I think is amazing is that you have a heart to make this available to other people like yourselves who are building websites for clients working and running agencies. So just talk me through the future of your design system. And you just published a new post that you’re going to open source this design system in figma. Like why? Like you could have made this proprietary. You could have like kept it just for yourselves, but you’re releasing it to everybody using WordPress and Figma.

Ash Shaw:
I’ve been using open source software since about 2001. Personally, I believe in the ethos behind open source and I wouldn’t be the person I am today without the open source community, specifically the WordPress community. What they have done for, for, well, globally, everyone. But for me personally, I’m forever grateful. So I’ve always made an attempt to release whatever we can that makes sense. I’ve learned over time what does make sense and what doesn’t make sense to release as open source. And I’ve also learned that if you want something to be a success, it should, shouldn’t necessarily be too niche, like extremely niche. Tour operator plugin only worked with our classic theme. And if you wanted to use the tour operator plugin, you would have had to have used the classic theme. And a lot of people didn’t want to use that. They wanted to use whatever big name classic theme was on Envato or some premium theme out there. If you look at WooCommerce, WooCommerce builds in compatibility with all the default themes over the years. A lot of those are classic themes. Obviously the last few years are block themes, but that, that makes it easier to adopt. So when we did our work on the Figma design system, I thought to myself, well, we’re open sourcing our block theme, so why don’t we open source our design system? But then last year when I came to the realization that we couldn’t do a better job than the default theme, and that it’s easier to use that as a base and customize it to our needs, I decided to halt, at least for now, work on our block theme. And I still wanted to keep working on the open source theme design system because I believed it would benefit the whole community. And with the components in there, they’re all components for core WordPress blocks and typical templates like blog templates or page templates, things like that, everyone will need. And you use WooCommerce. We built all the components for WooCommerce blocks, so I think that would really benefit the community. And then when I finished my talk at WordCamp Europe, I appealed to the audience to get involved and I made an open call to see who would be interested in collaborating. And a Norwegian company, Decode, who are an incredible agency, are now going to be collaborating with us. Admittedly, I took leave after WordCamp and when I came back from leave, I was a little bit flooded with work. So it’s also. Europe is holiday time in July, so our objective is to kick off with collaboration in August. Again, we’ve already had a meeting. They showed us their design system, we have added them to our design system, they’ve added us to theirs. We are going to try to collaborate on improving the structure. I’m by no means saying that our design system is perfect, but I do feel we’ve put a lot of work into it and it could benefit a lot of folks out there. So with Decode behind us and they’ve got four designers in house, I looked at the way they structure their components and the way they use sections within Figma. It’s amazing what they’re doing. So we can definitely benefit from that collaboration. And they seem to think that we have things to offer them. So it’s a two way street. How can we improve our workflow on both sides? And as an output benefit the community.

Derek Hanson:
Yeah, that’s the heart of open source, right?

Ash Shaw:
Yeah, absolutely.

Derek Hanson:
And yeah, just building each other up and learning from each other and as you do that, like it only makes it better for everybody else and I think in particular WordPress, which has made it really strong and sustainable and long lasting. So Ash, I really, really appreciate you taking the time to talk about this and that you are giving back to the ecosystem through this I think crucial step in building websites with WordPress. Something that you know either might be overlooked or not given enough, enough thought and care. And I think you’re giving it great care to really just improve it, not just for designers and developers, but like for the client. I think you said, as you’re talking through how the clients that you work with have really benefited through your templates and your prototypes and the table of contents I think is really inspiring and really great to hear. So thank you for coming on today, Ash, if you want to learn more. Yeah, absolutely. And I think we’re going to have you back on because I think you have a lot of other great things that we hinted at that I’d love to chat with you more about. If you want to learn more about Ash and their work with Figma, go to LightSpeedWP agency to check out the blog and the recent blog post about why they’re building an open source WordPress block theme system for Figma. And if you haven’t watched the WordCamp Europe presentation bridging design and development Figma Design Systems for WordPress success, I highly recommend you go watch that now and read Ash’s companion blog post to that. And as Ash said, and you’ve heard from the Open Channels network before, if you are not involved in the open source side of the WordPress project yet, there are easy ways to get in. And it doesn’t matter if you’re a designer, a developer or even an end user, we highly encourage you to join the community and become a part of this great tool for users. So Ash, thank you so much and we’ll catch everybody on the next episode.

Ash Shaw:
Cheers.