Creating an atomic design system for SpatialChat involves breaking down the user interface of the application into smaller components that can be reused across different parts of the platform.
In the second year of the product’s existence, a design system (DS) was needed to connect two layouts: a Dashboard and Space. Previously, there was only a UI kit for Space with outdated components. When the need to create a Dashboard arose, Space components were insufficient to cover the need for new functionality, so new components had to be created. This presented an opportunity to update not only the visual language but also create a unified design system. When creating new components for the Dashboard, only the colors from the old UI kit were retained, while all other styles (rounding, shadows, fonts) were changed, and new elements were added.
• Tokens
• Atoms
• Molecules
• Organisms
"Design systems are the foundation upon which great products are built. They allow teams to work more efficiently, create consistency across platforms, and ultimately deliver better user experiences."
Jina Anne, Designer
DS structure in Figma
Having a separate file for styles and another for components is a common practice in design system projects. It helps to keep the project organized and makes it easier for designers and developers to find what they need. Having different pages for each element also makes it more manageable to maintain and update the design system.
Atomic design methodology
When creating the DS, we decided to use the principle of atomic design because it has several advantages. For example, you can mix and combine components, which allows you to create several types of pages simultaneously. Additionally, ready-made elements make it easy and quick to design pages and create prototypes.
The component approach helps designers speed up work on layouts, making it easy to maintain consistency and relevance in product design. The main disadvantage of the component approach is that it can be time-consuming since the development of components requires time, attention, and effort.
.png)
.png)
