The Objective of the project

As many designers on the internet who find design system useful, most of them are only seeking for one thing "Components". It is rare to see people to referencing on the infrastructure that you build. I am not saying design engineering is not important! But "Components" are something people get used to understand how your design system work and visualise it. It is important to understand what users really cares, and minimise the infrastructure of system behind. In our high level statement. And Slash/UI have to following objective

1. Helping slasher and designer to build MVP much faster.

2. A design system simple yet promising to use and rebrand for different project.

3. The minimal touch with higher customisation and style changing.

Key challenges to face

1. Documenting the design system that is up to date.

2. Dealing with the changes for integrate into existing design.

The Research Process

The book "Atomic Design" from Brad Frost have share a lot of insight of how design system is created. Especially, from a perspective of atomic level. Like periodic table itself, all design components are composite of the smallest part UI elements like label, button, input, etc. Which is essential to create consistent and scalable UI design. And helps a lot on cutting the cost of redesign and alignment.

To gain insight of what components/elements to be create from scratch. A "Competitor Analysis" is conducted before start the initial design.

I have make referenced to a useful website called "UI Guideline". It showcase all different existing UI library and design system. And showing you how they handled it. Especially, when you have no idea of the anatomy for the UI component. It is recommended to study the specific design system if you think that fits your need!

Meanwhile, there are still tons of design system that I do recommended. Carbon from IBM, Fluent 2 from Microsoft, Material Design from Google, Spectrum from Adobe.

The Design Process

To create a design system that could help on building UI directly. Figma is a great tool that provide a lot of useful function, like variable newly added in 2023.

The first thing to do, is the design token. It is essential to have if you are planing on building a consistent system while allowing to have some small flexibility. Unless using colour style, design token means to separate these "style" into several levels. Like "Semantic Token" for raw value like padding, color code, radius, text style, etc. While Design token/ Alias token that share same semantic token value on the UI components directly. Allowing designer to have some sort of changes without changing all other components parameter that share same value.

The more flexibility the design, the more complex of the levels of tokens. In my case, I separated into only 3 levels for the purpose of simplicity. Reference to the following example from Spectrum to understand how it work in nutshell.

The next step is to create those element in atomic level. Buttons, input fields are handled in first priority as they are most commonly used in all design. By implement the value from the design token, It would be easy to build a consistency design as they should share similar designed value. Meanwhile, it is important to setup variant of the design for catering different use case. And help to simulate in different parameter.

The Documentation Process

To enhance the communication and collaborate with other designers/developers. Documentation is a good approach for users to understand what and how to use your design system. Provided with guideline that indicate "Do & Don't" of each elements to prevent misleading usage for the design.

Like mentioned Anatomy in the above "UI Guideline" website. Information should be also shown to indicate the different state of the components. Also the parameters like touch area size, spacing and colours used for the component.

The Next phase

To enhance the experience of documenting the design system. Slash/UI is managed to publish on the internet with Zeroheight. It allow us to manage the continuous updates on Design File while publishing documentation online. Help to deliver the design system efficiently.
(TAKE A PEEK HERE)

Summary

The Slash/UI Design System is based on the idea of simple and clean design for adaptive system design. Referencing from existing design system and UI Library, an approach of atomic design is implemented. Starting working from Design Token, Atomic UI element, to complex components like Modal and form, etc. The Slash/UI Design System is demonstrating how to implement the design system in early project cutting off tons of time cost, enhancing the efficiency of initial design.