A design system is technical documentation for assets, themes, or component-component in the field of the user interface. Usually, this is document will be used for someone who works as UI/UX Designer or a Digital Product Designer.

This technical documentation will be used from time to time to make consistency for the product you develop. that is why Design System will be a place for you to put your assets, theme, or any component-component related to User interface design.

If you have any experience as a Graphic Designer, you will come across similar documentation called Brand Guideline. These two documents have similar rules, one for brand and one for the product you develop.

What is Design System Use for?

Design system has many things inside them such as:

  1. Color

Color is one of the aspects where any documentation related to graphics will be always there. Because as we know, one of the golden rules of graphics is color. So that is why color will be in the Design system as well

Color in design system consists to put a rule on what kind of color the product will use for:

  • Primary 
  • Primary Variant
  • Secondary
  • Secondary Variant
  • Background
  • Surface
  • Error

2. Typography

Not so different from color, Typography will also be there in any technical documentation for graphic purposes. But in the design system, Typography there use for:

  • Scale Categories
  • Typeface
  • Font
  • Size
  • Case
  • Letter Spacing

3. Design Component

Design system

Hal inilah yang membedakan design system dengan jenis dokumentasi desain yang lainnya.

This in this element, will be set apart from any documentation. A design component is a group of assets that will be used in creating a user interface screen. and that component is:

  • Button
  • Wrapper
  • Icon
  • Navigasi 
  • etc.

What is the Design System used for

After we know what is inside a design system and now we should learn about what is design system used for.

1. Konsistensi

After we create all the components for our user interface design. Now we can use it to create the template or page on our screen for the product. In this manner will become out as unity, or have the same consistency through every screen.

Having great consistency will also create a good user experience for the user to use. Not leaving the user feel left out or having the same feeling on the screen.

2. process development will be easier

Having documentation for any elements you will use for your screen will help you develop your prototype. not just make it easy to design your screen, the developer will also be helpful because will be using the same module.

Get notif with new course or article realted to Product Designe

So that why having a design system will be a great help for your team. Not just for designing your screen, but will surely help your developer.


Follow me
Facebook | Instagram | LinkedIn