Frequently Asked Questions

LSX Design System

  • What is theme.json, and how does it integrate with the LSX Design System?

    The theme.json file in WordPress centralises theme settings like colours, typography, and layout. When using the LSX Design System, you can extract design tokens from Figma and apply them to theme.json, ensuring consistency across the entire site in both front-end and editor experiences.

  • How does Figma Developer Mode help with the design-to-code handoff?

    Figma Developer Mode allows developers to access design specifications such as colours, typography, and spacing. Developers can extract CSS, download assets, and implement styles directly from Figma into their codebase, streamlining the handoff process.

  • Can I customise the components and templates in the LSX Design System?

    Yes! All components and templates are fully customisable. You can modify the colours, fonts, and layouts to align with your brand. The system is built with flexible variables and properties, making it easy to adapt to any project.

  • How do I get started with the LSX Design System in Figma?

    To get started, download the design system file from lsx.rocks/design-system. Then, follow the setup steps to assign your brand’s colours, typography, and other variables before starting your design.

  • What is the LSX Design System, and how does it benefit my project?

    The LSX Design System is a comprehensive toolkit built in Figma that includes pre-built components, templates, and patterns for building websites and WooCommerce stores. It ensures consistency, speeds up the design process, and helps designers and developers collaborate more effectively.

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.