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.

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.

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.

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.