Design System
Design systems are not set in stone things, these are living and breathing system that requires maintenance for as long as the project is developing.
I built over 3 design systems and contributed to over 12 different ones.
Sub-atomic elements
I approach the design system structurally, on the basis of Atomic Design methodology, where the first step is defining the Sub-atomic elements, such as Typography, color variables, Shadows, Spacing etc. It requires structural thinking as one of the main thing about the design system is its's scalability - hence it is expected to be able to adapt to the multiple themes and color modes.
Aa
Aa
Aa
Aa
Atoms
The second step of creating design system is creating Atoms - fundamental, indivisible building blocks like buttons, input fields etc.
This stage requires already to define not just the main colors of the elements, but also it's states: hover, click, success, error, disabled.
Title
Molecules
The third stage are the Molecules - groups of atoms bonded together to form simple, functional components, such as a search bar made from a label, input, and button. On this stage the earlier defined rules will be tested whether they can be working together harmoniously.
Organisms
The forth step are the Organisms - even more complex, standalone UI sections composed of molecules and atoms, such as a header that includes a logo, a navigation menu, and a search form.
Password
Templates
The fifth step are the Templates -the pre-final step, where I create a structural arrangement of organisms to form a page, without the final content. An example can be a blog post template showing where the header, content, and sidebar organisms will be placed.
Form
input lable
input lable
Secondary button
Company name
Link
Link
Link
Pages
The sixth and the last step represents Pages - the real, representative content filled into the template structure. The example of it can be the actual, live blog post with its specific title, text, and images.
Login
Password
T&C
X
Youtube