Creating Consistency with Design System

What I do

Design system, Visual design




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.

Mocaas Design System
  • 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.

Documentation Tree
Research + Workshop

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

Coda documentation

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.

Atomic design example

Naming tokens in design system

Applying token naming for a consistent understanding of visual style across design, code, and interdisciplinary handoffs.

Naming design token



Color swatch



Reusable Components


Button component


Sidebar component


Dropdown component


Table component

Local Variables

Color in local variable

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.

Lesson Learned

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.