In my spare time I have been creating my own design system called StandOut. The aim for StandOut is to be a "full-fat" solution for everyone. I have put all my learning and best practices into it and in time I will make a Webflow component library that anyone can use to create feature rich websites very easily.
But.... Thats the end game. How did I get there? Let me tell you.
To create a strong Design System that utilises the full suite of features within Figma such as:
Once the Design System is complete in Figma, the creation of a Webflow Template should be started. It is vital to keep the same variables setup to keep things consistent. Naming conventions should also be maintained for continuity across the platforms.
Every project comes with its own challenges that need to be understood and solved. This projects challenges included:
In order to maintain the integrity of the components within the design system, I constructed them on a foundation that allows new features to be included and tested with minimal impact to the overall system. There would need to be mandatory testing and documentation to accompany any components update. The same is true for new feature intergration into existing components. In the past, the best way to implement these new features is to host a voting forum space where designers and colleagues can upvote and suggest new features for components that the are published and released in weekly uploads and pushes. This then requires users to update components within Figma.
Firstly, it starts with a HUGE task and thats the initial component audit. It requires a thorough look through all the components that currently exist or need creating depending on the User Journeys/Wireframes. You then collate all of the components into similar groups.
From here its all about the atomic design principles. You break down the required components down to its core elements (for example Text and Iconography). Before any of the component construction begins, I like to establish the variables. As a rule of thumb I find it helpful to define the variable values for:
Once the components are created, I find it incredibly helpful to create strong and informative guidelines that break down the components into smaller, identifiable chunks to help with the education of how the system works.
The final vital stage of production comes down to the stress testing of the created components. This will be device testing and pushing the use case of each component to the limit so that we can launch a component that is as robust and future proofed as possible.
StandOut UI has been a love project for me. It has allowed me the freedom to explore and experiment with new features, as well as hone my craft as a Design System Specialist. It has allowed me to refine my design process to maximise output and integrate feedback very efficiently. The overall Design System has not launched officially yet but I am really excited about what creatives and business owners will be able to create with the toolkit.
I get so passionate and enthusiastic about Design systems that I welcome the opportunity to talk in more detail about my processes.
