A deep dive into my talk at WordCamp Europe 2025
I recently had the privilege of presenting at WordCamp Europe 2025 in Basel, focusing on one of my favourite topics: bridging the gap between designers and developers through Figma-based design systems tailored specifically for WordPress projects.
Why create a Figma-based design system?
A solid design system isn’t just a fancy style guide. It ensures consistency, enhances efficiency, and dramatically improves collaboration between designers, developers, and clients. By integrating your Figma system directly with WordPress’s theme.json and block templates, you reduce the friction between design and code, resulting in quicker project cycles and fewer post-launch fixes.
Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.
Alex Schleifer, Airbnb
Embracing content-first design
Content shapes design, not the other way around. Real content leads to better layouts, clearer user journeys, and more meaningful feedback from clients. In my session, I stressed the importance of designing around real content rather than placeholders, referencing Jeffrey Zeldman’s powerful words.
Content precedes design. Design in the absence of content is not design, it’s decoration
Jeffrey Zeldman
The power of discovery and audit
Before even opening Figma, it’s essential to understand the project deeply. This means comprehensive content and design audits to uncover pain points, strengths, and gaps. Only after thorough documentation and insights can meaningful design work begin. We discussed the practical benefits of employing a structured Discovery Toolkit, including AI-assisted prompts for design insights.
Building from foundations up
Starting your Figma library with clear design tokens, consistent naming conventions and robust accessibility practices helps set a solid foundation. Utilising tools like the LSX Design UI kit (available on Figma Community) accelerates the initial setup and ensures alignment with WordPress block themes.
Interactive prototyping for accurate feedback
Interactive prototypes bridge the communication gap, providing clients and stakeholders with a realistic experience. Clear and contextual feedback collected through interactive prototypes greatly reduces miscommunications and project delays, helping teams move confidently toward the development phase.
Seamless developer handoff
An organised Figma setup simplifies developer handoff dramatically. Tokens, consistent naming, and annotated interactive prototypes serve as the blueprint for development, minimising guesswork and ensuring that the delivered WordPress site matches precisely with the approved design.
Case studies in action
To see these principles in action, explore our detailed case studies:
- African Safaris Ltd – Highlighting the transformation of a safari travel website.
- Novus Media Design System – Our most extensive case study showcasing design at scale for multiple regional publications.
Final thoughts & invitation
WordCamp Europe 2025 was an incredible opportunity to share these insights, and I deeply appreciated the engaged audience and vibrant conversations afterward. I warmly invite you all to explore and collaborate using our open-source LSX Design UI kit—let’s keep refining how we design and build WordPress websites.
Visit lsx.design to get involved. Download the UI kit, experiment, and use it as a practical starting point on your next project. Your comments, suggestions, and insights help this design system evolve, keeping it valuable for everyone.
Thank you again to everyone who attended! Until next time, keep building, keep collaborating, and stay inspired.
For more detailed examples, visit our portfolio.
