Creating Consistency with Design System
Design system, Visual design
2023
Research-driven approach in transforming UI kit into design system, in order to create consistency in product and increase efficiency in design and development process.
- Reduce design time by 30%
- Made the design system more scalable and promotes reusability
- Create 18 components, 268 total variants
How can we create consistency in design and development to increase efficiency?
As our platform grew and we added new features, we faced an issue: many different styles between pages were slowing down the design process. Additionally, I also found that the design in Figma and live product from development is inconsistent.
Survey & design system introduction for product and developer team
Learning from other designers, creating a design system is an ongoing process. It doesn't stop after making it. We need to make sure it's adopted and maintained. To ensure it, I did a survey and organized a design system workshop.
The workshop began by talking about the issues we're dealing with. I then showed a demo of my design system proposal. The design followed by a Q&A session and a discussion about our vision.
– Transforming the existing style guide into modular components to facilitate a scalable design system.
– Ensure the system not only developed, but adopted and maintained by all.
Legacy Component
While we did have a style guide for the existing design, it didn't cover all UI components. Therefore, I meticulously inventoried each element, detailing their various states, variants, and unlisted components.
I used Coda to organize and labeled these as legacy components.
Atomic Design method to promotes consistency with modular thinking
Atomic design works by breaking down interfaces into smaller, reusable components called atoms. It is also modular, allowing designers to rebuild the section from atoms.
Naming tokens in design system
Applying token naming for a consistent understanding of visual style across design, code, and interdisciplinary handoffs.
Foundations
Color
Typography
Reusable Components
Button
Sidebar
Dropdown
Table
Local Variables
In Figma's Config 2023 keynote, Local Variables for the Design System are introduced. It is essentially design tokens that allow us to define and store values for design elements. So, I decided to migrate the current color styles to local variables.
Create a good foundation and maintain it
– Having a good design foundation makes the design process more efficient and speeds up product development.
– Reusable components and established design patterns also make scaling the product easier.
– I'd also like to mention that a design system is a living document, so maintaining and updating it is as important as creating it.