Collaborate With the Team Through Design System

I am sharing a sample of the design system I have been working on currently in this post. After working for four years on various projects and collaborating with multiple development teams, I have come to realize that the role of a UI Designer is not only to be creative and generate great ideas or follow the design principles to bring ideas to life, but also to possess the skill of working effectively with other designers and development team.

Sample 1. Color palette in my recent project

Why is this important?

It’s because if a designer is like an architect who designs a visually stunning house but cannot effectively communicate their ideas to the builders, the final product will not meet the intended expectations. Thus, it is crucial to have clear and effective communication with the developers to convey our vision for the product.
For this reason, I have found that the best way to achieve this is by working collaboratively through a design system where we can communicate directly with each other and ensure that we are all on the same page.

Sample 2. Typography definition in the same project


Being in sync with developers means understanding what they require to “build the house”. This includes:

  • The color codes
  • The typeface, font weight, and line height
  • Decorative elements (borders, radii, padding, and margins)
Sample 3. Buttons Defenition in the same project

It is also beneficial to have additional information, such as:

  • The definition of color codes used
  • The maximum and minimum character count 
  • The maximum and minimum size of particular elements
  • The attribute of each element
  • Provide a detailed explanation of how, where, and why each element should be used
  • What should and should not do in the design
Sample 4. The anatomy of the buttons
Sample 5. Combobox definition in the same project
Sample 6. The advance specification of the combobox
Sample 7. The Anatomy document of the Combobox in the same project