Figma file enabling creativity & consistency when designing for the file WordPress site editor & WooCommerce store blocks
At LightSpeed, we’re excited to announce the release of our LSX Design System on Figma, a tool that promises to revolutionize the way you design WordPress sites. This system is not just a toolkit—it’s a game-changer for web designers, developers, and content creators aiming to craft visually stunning and highly functional websites.
A Comprehensive Style Guide for Streamlined Design
The LSX Design System features a meticulously crafted style guide accessible directly within Figma. This guide is designed to streamline your design process, ensuring consistency and efficiency from start to finish. It includes detailed specifications for typography, colors, buttons, inputs, and more, enabling you to maintain a cohesive look and feel across your projects.
Harness the Power of a Full Spectrum Color Palette
One of the standout features of our design system is the expanded color palette, which now registers over 100 shades, ranging from subtle hues to vibrant tones. Each color is graded from 100 to 900, offering a broad spectrum that adds depth and versatility to your design toolkit. This rich palette allows you to experiment with gradients, overlays, and shadows, pushing the boundaries of traditional design to create unique and compelling digital experiences.
Figma Variables: Simplifying Design Changes
Our integration of Figma variables brings unprecedented ease to updating styles across your projects. When you adjust a variable—be it a color, font, or spacing—it cascades throughout the entire project. This means that you can make significant changes to your design with just a few clicks, ensuring that updates are uniformly applied without manual adjustments to each element.
Enhancing Accessibility in the LSX Design System
At LightSpeed, we believe that accessibility is a fundamental aspect of modern web design. Ensuring that our design system is accessible to all users, regardless of their abilities, is a priority for us. We strive to create an inclusive experience that aligns with the best practices and standards in the industry.
To achieve this, we leverage two powerful tools:
- BrowserStack: This tool allows us to test our design system across a variety of devices and browsers. By doing so, we can ensure that our designs are not only visually appealing but also functional and accessible on different platforms.
- Stark Accessibility Checker: Stark is an invaluable tool in our accessibility toolkit. It helps us identify and address potential accessibility issues within our designs, ensuring compliance with the latest accessibility standards, such as WCAG (Web Content Accessibility Guidelines).
Through the use of these tools, we are committed to making the LSX Design System a robust and accessible solution for everyone. Our goal is to empower designers and developers to create websites that are not only beautiful but also inclusive, providing a seamless experience for all users.
Feel free to explore the LSX Design System on Figma and see how we prioritize accessibility in every aspect of our design process. We welcome your feedback and are continuously working to improve our accessibility practices.
By prioritising accessibility, we aim to contribute to a more inclusive web, ensuring that everyone can benefit from the digital experiences we create.
Designed for Adaptability and Speed
The LSX Design System has been built with adaptability in mind. It’s set up to be duplicated and customized with project-specific details and design variables, making it incredibly versatile for different types of web projects. Whether you’re building a brand-centric e-commerce site or a minimalist blog, our design system provides the foundation for rapid development and creative expression.
Integrating with WordPress and WooCommerce
LightSpeed continues to focus on deep integration with WordPress and WooCommerce, ensuring that our design system aligns perfectly with the needs of WordPress developers. The naming conventions used in the theme’s code have been meticulously linked to the style guide and variables within Figma, facilitating a seamless transition from design to development.
Open Source and Community-Driven
True to our open-source mission, the LSX Design System is freely available on Figma.com, allowing it to be accessed, shared, and improved by the global design and development community. We encourage you to explore, customize, and contribute to the system, helping us evolve and refine it further.
Get Started with the LSX Design System
We invite you to explore the LSX Design System today on Figma. Start by integrating it into your workflow to see how it can enhance your design efficiency and creativity. Download the system, tailor it to your needs, and begin transforming the way you design WordPress and WooCommerce sites.
Figma.com Community File Changelog
Added:
- Merged the design system files (Style Guide, WordPress, and WooCommerce) into a single file for simplified library – configuration.
- Completely redesigned the style guide from scratch.
- Introduced variables for colors and fonts to enhance flexibility and consistency.
- Created new components including WordPress blocks and smaller atomic components.
- Built larger patterns of components, including full-page layouts.
- Expanded the color palette to over 100 colors using variables.
- Added icons, including a selection of Heroicons.
- Updated placeholders to use new colors.
- Added small SVG graphics for use as repeated background graphics.
Changed:
- Merged style guide and WooCommerce files into the WordPress file, resulting in a new structure for all elements.
- Transitioned from using styles to variables for colors and fonts.
Removed:
- Deprecated the old style guide.
