Bridging Design and Development
For as long as I’ve worked with WordPress (and it’s been quite some time), there’s been a stubborn gap between design and development.
Designers work in tools like Figma, producing beautiful static visuals. Developers, meanwhile, wrestle those designs into code—often guessing how colours, spacing, and typography translate to CSS or theme settings. It’s a game of Chinese whispers that leads to inconsistencies, blown budgets and frustrated teams.
The problem only intensified with the arrival of WordPress block themes and the introduction of theme.json, the configuration file controlling a theme’s colours, typography, spacing, and block styles. theme.json is incredibly powerful—but it’s also deeply technical, and most designers have never even heard of it.
Earlier this year, I spoke at WordCamp Europe 2025 about how we’re solving this problem at LightSpeed. We’re building the LSX Design System—an open-source design system in Figma that maps directly to WordPress block themes, using advanced Figma features to make design-to-code handoff seamless.
Today, I’m sharing why we believe this is the next logical step for WordPress design—and why we’d love to collaborate with Figma to help bring it to the wider community.
Aligning with Twenty Twenty-Five—and beyond
At WordCamp Europe, I showed how we’re aligning the LSX Design System with the Twenty Twenty-Five default WordPress theme.
Twenty Twenty-Five sets the benchmark for theme.json standards. By aligning our Figma Variables with the same naming conventions and values used in Twenty Twenty-Five, we ensure:
- Colour variables match WordPress presets like –wp–preset–color–accent-1.
- Typography scales translate fluidly between Figma and the browser.
- Spacing variables map to WordPress’s spacing presets for perfect consistency.
The result: designers and developers finally speak the same language. No more guesswork.
The vision: A universal design system for WordPress block themes
Most Figma design kits you’ll find online are tied to a specific theme or brand. They’re not reusable, and they certainly don’t speak the same language as WordPress theme.json.
Our goal is different.
- We’re building a theme-agnostic design system that:
- Uses Figma Variables aligned with theme.json presets—so developers can copy values directly from Figma into WordPress.
- Provides core block components for every default WordPress block and WooCommerce block.
- Offers patterns and template parts for headers, footers, product listings, and more.
- Allows for brand variations using Figma Modes (perfect for multi-brand networks like we built for Novus Media).
- Comes with advanced prototypes that simulate real WordPress and WooCommerce flows.
Prototyping WooCommerce Like Never Before
One of the most exciting areas we’ve tackled is advanced prototyping for WooCommerce. Our WooCommerce prototype isn’t just a clickable slideshow. It’s an interactive shopping experience that demonstrates:
- Product variations—users can select sizes, colours, or other product attributes.
- Mini-cart functionality—add items, adjust quantities, and watch totals update dynamically.
- Checkout flows—users fill in shipping details, choose payment methods, and see a confirmation page.
- Dynamic expressions and conditions—we use Figma’s new expressions and conditionals to change what appears based on user inputs.
We’ve leveraged powerful new Figma features — like variable modes, conditionals, and expressions — to make these prototypes feel like real applications, not just static screens. These capabilities let us map out real user flows and test interactions visually, before writing a single line of code.
This means stakeholders can test the entire WooCommerce journey inside Figma, long before we touch a single line of WordPress code. It’s been a game-changer for our clients—and for our team’s efficiency.
Some of the advanced features we’re tapping into include:
- Variable Modes in Prototypes
- Expressions in Prototypes
- Multiple Actions and Conditionals
- Connect Your Prototype
- Advanced Prototyping Examples
This work isn’t just academic — it’s becoming essential. WordPress users increasingly expect eCommerce sites that feel as smooth as Shopify or any SaaS experience. Prototyping at this level helps bridge the expectations gap.
Why this matters to the WordPress community
Here’s why we believe this matters so much:
- Speed: We’ve cut dev handoff time drastically because variables and components already match WordPress.
- Accuracy: Developers no longer guess how designs should look in code—values transfer seamlessly.
- Scalability: When working on projects with multiple brands, we swap variables in seconds using Figma Modes, rather than rebuilding designs from scratch.
- Community benefit: We’re keeping the LSX Design System open-source so others can contribute, evolve it, and build their own WordPress block themes faster.
Collaboration Across Borders
A highlight for me at WordCamp Europe was connecting with the talented team from Dekode.no, a Norwegian WordPress agency deeply passionate about open source. We’ve since started collaborating to improve and expand the LSX Design System together.
We share the vision that WordPress needs a shared, open source design system — one that anyone can build on to create consistent, accessible, and performant block themes. By pooling our resources, we hope to set a new standard for how design and development teams work together in the WordPress space.
Looking ahead: collaborating with Figma
After my talk at WordCamp Europe, agencies like Dekode in Norway reached out to collaborate. We’re also talking with the developer behind 10up’s Figma-to-WordPress theme.json exporter, exploring how we can connect our variables directly to automated theme.json generation.
But I believe this story belongs on a bigger stage.
Figma’s tools have made this possible. Variables, Modes, Dev Mode and advanced prototyping are precisely what the WordPress platform needs to finally close the design-to-build gap.
I’d be excited to explore opportunities to contribute to Figma’s editorial platforms—perhaps through a guest post on the Shortcut blog or DesignSystems.com, sharing insights into how the LSX Design System is helping to improve collaboration between designers and developers in the WordPress space.
Looking ahead, it would be an honour to share this journey at an event like Figma Config 2026. While it’s rooted in WordPress, the story also highlights the broader impact of open-source collaboration and design tools on modern web development.
A Call to the Community
In my talk at WordCamp Europe, I closed with an invitation:
“If you’re passionate about design systems, about Figma, about WordPress — let’s work together. Let’s build the tools we wish we had.”
The WordPress community thrives on collaboration. Whether you’re a designer, a developer, an agency owner, or a freelancer, your insights can help shape a design system that works for real-world projects.
If you’re curious to see this in action, I encourage you to check out my WordCamp Europe session here:
Let’s keep building the bridges that bring our designs closer to the code — and closer to the people who use our websites every day.
Watch my WordCamp Europe talk
Want to hear more about how and why we built this design system?
In our WordCamp Europe talk, we share the thinking behind it, how it’s evolved, and how it’s helping streamline WordPress block theme design.
You can read the blog post or just watch the talk in the video below.
