A Powerful Open-Source Tool for Designers and Developers
Designing and building a modern WordPress website can be a complex process. Especially when striving for consistency between design and development. The LSX Design System, crafted specifically for WordPress block themes, bridges that gap and simplifies the workflow for designers, developers, and project managers alike. We’re thrilled to announce that our LSX Design System has surpassed 1,100 users on Figma! Proving its value as a comprehensive tool for creating seamless, user-friendly WordPress experiences.
Why did we create the LSX Design System?
Initially, it was to scratch our own itch. Designing a flexible system to support our LSX Design theme, versatile enough to be used on multiple client projects. The first version of the design system was built in 2023, before Figma introduced features like variables. When those new features became available, we refined and released an updated design system file in 2024.
We also used the LSX Design System as a way to deepen our practical experience with Figma. What started as a project to serve our theme evolved into something much broader. While it was initially built with LSX Design in mind, we quickly realised it was flexible enough to apply to any block theme. Making it a powerful resource for WordPress professionals.
We also leverage AI tools to streamline the design process. By inputting brand attributes, our AI suggests font pairings, color palettes, and tone of voice guidelines. Ensuring that global styles are consistent and on-brand from the outset. These AI-driven recommendations can be directly applied to the LSX Design System. Further speeding up design workflows and maintaining consistency across components.
For a deeper dive into the origins of the LSX Design System, check out our earlier blog post:
Who Will Benefit from This Blog Post?
Whether you’re a freelance designer looking to streamline your projects, a developer aiming to speed up theme creation, or a project manager seeking to improve collaboration between teams, the LSX Design System has something for everyone.
1. Freelance Designers
Freelance designers working on WordPress websites can benefit from using the LSX Design System to improve design consistency, reduce repetitive tasks, and streamline handovers with developers.
2. WordPress Developers
WordPress developers can use the LSX Design System to quickly access variable values, populate theme.json files, and ensure that their themes adhere to modern WordPress standards.
3. Agency Project Managers
Project managers in digital agencies can leverage the LSX Design System to ensure their teams are delivering consistent results across multiple projects and clients.
4. WooCommerce Store Owners
Small business owners running WooCommerce stores who need to build a beautiful, user-friendly store without relying heavily on custom development.
5. Figma Designers in Medium to Large WordPress/WooCommerce Companies
Figma designers at medium to large WordPress or WooCommerce agencies who need a comprehensive design system to create consistent designs across multiple client projects while collaborating effectively with development teams.
What Is the LSX Design System?
At the heart of the LSX Design System is a comprehensive variable library, which includes design tokens for colors, typography, spacing, and more. These variables are essential for maintaining consistency across all elements of a WordPress website. Making it easy to apply global styles with minimal effort.
In addition to its variable library, the LSX Design System offers a vast collection of components, template parts, templates, and patterns that are ready to use. This means users can quickly assemble complete pages without starting from scratch, ensuring both efficiency and design consistency.
One of the standout features of the system is its extensive pattern library, which includes a wide range of pre-built designs for various website sections. The pattern library covers essential website elements such as:
- Hero sections
- Content and layout sections
- Call-to-action (CTA) sections
- Team showcases
- Testimonials
- Archive layouts
These patterns are designed to align with WordPress block theme defaults. Ensuring that your site remains compatible with core WordPress functionality. Users can easily customize these patterns by adjusting the linked variables. Making it simple to adapt the design to meet unique brand requirements.
Variable-Pattern Integration
What sets the LSX Design System apart is its deep integration of variables across all components, templates, and patterns. The design tokens for colors, typography, and spacing are all linked to the properties of each component. Ensuring that updates to variables are automatically reflected throughout the design system. This makes it easy to maintain consistency and make global changes with minimal effort.
The system also includes a robust set of text styles, covering everything from headings and subheadings to links, buttons, and body text. These text styles are further divided into primary and secondary font styles. Allowing users to define a distinct typographic hierarchy for their projects. Each text style is configured and linked to the corresponding variables. This ensures that font choices are applied consistently across all components and templates.
Another key feature is the Style Guide page, where users can see all their chosen colors, typography, and global styles reflected in one place. This page provides an at-a-glance view of the project’s design language, helping users ensure brand consistency across their sites. The Style Guide page also serves as a valuable reference for development teams, making it easier to translate design decisions into code.
At its core, the LSX Design System is designed to work with any WordPress block theme, offering flexibility for both general-purpose websites and more complex WooCommerce stores. The use of component-driven design and variable-based styling means that users can create websites that are not only visually consistent but also easy to maintain and scale over time.
For a detailed breakdown of how the LSX Design System is structured and how to get started, explore the LSX Design System Documentation. This resource provides practical guidance on using the design system and implementing it into your WordPress projects.
Open Source and Designed for WordPress Professionals
The LSX Design System is an open-source project created to support WordPress professionals—designers, developers, and agencies—by providing a flexible and comprehensive design resource. Built with the needs of block theme development in mind, the system is freely available on Figma for anyone to use, adapt, and build upon.
Our goal with the LSX Design System is to empower the WordPress community by offering tools that reduce the time spent on repetitive tasks, ensure consistency across projects, and streamline collaboration between design and development teams.
Why Use Figma First Instead of Going Directly to the Block Editor?
One question we often hear is: why would someone use Figma first instead of going directly to the WordPress block editor? The answer lies in the versatility and control that Figma offers during the design phase.
Figma allows designers to:
- Visualize the Entire Design System:
In Figma, you can see how all components, patterns, templates, and variables come together in a holistic view. This helps ensure consistency across all pages and templates before implementation in WordPress. - Refine Global Styles Before Development:
By adjusting colors, typography, and spacing in Figma, designers can visually test different styles and ensure brand consistency before exporting values to a theme.json file for WordPress. - Create Fully Interactive Prototypes:
Figma’s prototyping tools allow users to build and test user flows, making it easier to communicate ideas to stakeholders and clients. This reduces the risk of rework once the design is implemented in WordPress. - Ensure a Smoother Designer-to-Developer Handoff:
Using a design system in Figma provides a central reference point for both designers and developers. Developers can easily extract variables and components from Figma’s Dev Mode, speeding up the process of creating block themes.
While the WordPress block editor is a powerful tool for building websites, starting in Figma ensures that the foundational design decisions are well-thought-out and consistent across the entire project. This approach ultimately saves time and effort during the development phase. Making it a key part of an efficient WordPress workflow.
For a deeper dive into our Design System with practical examples and prototyping, read our second post in this series:
