Design WordPress sites at light speed
LSX Design UI kit for WordPress
LSX Design is a WordPress-first, block-theme oriented UI kit built entirely in Figma. It’s a free, open-source Figma Community file that gives you everything needed to rapidly design and prototype WordPress websites – without starting from scratch.
Trusted by over 1,200+ users, LSX Design comes packed with components, styles, and variables, all meticulously aligned to the WordPress Block Editor and WooCommerce.
Whether you’re a solo maker, part of an agency team, or a WordPress core contributor, LSX Design provides a common design language that bridges design and development for faster, more consistent projects.
Open it in Figma to kickstart your next site, or reach out for a free consultation on making the most of LSX Design in your workflow.
Bridging design and development
The LSX Design UI kit is a free, Figma-based UI Kit built for real-world WordPress block themes. Whether you’re designing, developing, or doing both — this system helps you move faster, deliver with precision, and stay perfectly in sync from brief to build.
Built for WordPress Block Themes
Every component, token, and pattern in the kit is structured to align with WordPress block theme conventions — including theme.json, template parts, and block pattern structures. When your Figma file setup maps to WordPress’ theme.json and block template structures, implementation becomes predictable and exact.
Smart
Foundations
From colour variables and typography to spacing and layout, every decision follows a predictable token-based system. Designed for flexibility, built for scale.
Built for the Block Era
We use WordPress’s native design system language and naming conventions as our blueprint. By starting with variables that already match core standards, handoff is frictionless and the end result stays true to the design.
Who’s it
for?
Agencies & freelancers creating repeatable themes
Product teams standardising design across plugins or sites
WooCommerce builders needing a polished, scalable UI
DIY designers & developers building smarter prototypes
What’s inside
193 variables and tokens
All colours, typography, and spacing tokens aligned with WordPress naming conventions.
427 Components
Buttons, navs, tables, cards, accordions and more — 427 components, and over 1000 variants in total.
100+ Patterns
Over a hundred patterns, template parts, templates and full page layouts.
Three Prototypes to Kick-Start Any Build
Basic Website
A clean, five-page click-through prototype that’s perfect for simple brochure-style websites. Includes realistic hover and pressed states for buttons and links, helping you map out key user interactions. Ideal for portfolios, small business sites, and quick mockups.
Standard Site
A more advanced prototype designed for content-rich sites. Features include paginated blog layouts, a responsive dropdown navigation menu, and an editable text field in the search bar. Great for businesses, agencies, and service providers who need more than just static pages.
WooCommerce Store
A fully interactive eCommerce prototype showcasing the complete customer journey. Includes product listing pages, an add-to-cart flow, a sliding mini-cart, and a full checkout process with order confirmation. Perfect for online store owners and developers building WooCommerce shops with a block theme foundation.
Current Stats:
Version
1.6
Variables
193
Components
427
Styles
345
Users
1,200+
Get Started
Explore the kit – Dive into a UI kit built for WordPress block themes.
Test it out – Dive into a UI kit built for WordPress block themes.
Give feedback – Your input helps us improve it for everyone.
Make it yours. Make it better. Make it available.
Use the system
Read the docs
Need help adapting it?
Frequently asked questions
Got questions? We’ve got answers. Explore common questions about LSX Design and how to get the most out of it.
If you can’t find what you’re look for here, feel free to Contact Us.
General
- Is it really free?
Yes. It’s 100% open-source and published on Figma Community by LightSpeed WordPress Agency.
- Who is it for?
Designers, developers, agencies, and WordPress product teams who want a token-based workflow that matches real-world site builds using the block editor.
- What is the LSX Design UI kit?
It’s a free Figma-based design system for creating WordPress block themes and WooCommerce storefronts. It includes components, variables, styles, and prototypes—all mapped to WordPress core naming conventions for seamless handoff.
Design System Features
- What prototypes ship with the kit?
• Basic 5-page site – With scrollable and navigable pages
• Standard website – With everything from the Basic prototype, plus working pagination.
• Full WooCommerce flow (add-to-cart ➜ mini-cart ➜ checkout ➜ confirmation) – all interactive out of the box .
- What’s new in v1.6?
Updated token collections aligned to TwentyTwentyFive, new variable names, refined WooCommerce patterns and a detailed changelog on our blog
- Can I customise the design system for my own brand?
Absolutely. The system is built to be forked, themed, or expanded. You can duplicate and adjust tokens, styles, and components as needed.
- How many components are included?
427 components, plus over a thousand variants, including buttons, headers, navs, filters, pricing tables, modals, and WooCommerce-specific elements.
Getting Started
- Can I contribute?
Yes! We welcome contributions, issue reports, and feedback via GitHub or direct contact.
- Can I use this with any block theme?
Yes. It works with any theme that supports theme.json, including custom themes, Twenty Twenty-Four, and the LSX Design theme.
- How do I start using LSX Design UI kit?
Just click “Open in Figma,” duplicate the file, and begin customising. No installation or setup required.