A structured way to build fast and stable digital products with design system
Building digital products with component-based design
There are many design systems, also called UI pattern libraries, that allow you to keep all graphic elements consistent. Unfortunately, they don’t tell you how to implement these elements in your product. The reason is that these design systems don’t know how your product works and interacts with the user.
UI dashboard
I wanted to create a UI dashboard and use it in different ways while keeping consistency in the design style. My dashboard displays text with charts and provides the user with the most important data. I’m using my design system to create a dashboard and potentially add new features to it as the product grows.
Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.
―Alex Schleifer, Airbnb
Why use a design system?
A design system is a collection of repeatable components ready to use when the designer and developer need them. They bring a structure into individual screens by putting components in a certain way, forming a specific feature that can be reused. Reusing allows us to move faster. Not bad at all.
For the implementation of the UI dashboard with my design system I’m applying Atomic Design methodology with the best practices by Intercom. It is a SaaS solution company who successfully implemented its design system with a live chat for the CRM businesses. It Is a structured way to implement design products not as a series of screens but as a system of components. This is usually performed by the product design team, covering conception, design, development and service desk.
Levels of implementation
- a shared functional model that explains how your product works at a system level. What are the main components in the product? How do they interact?
- shared name conventions that designer, product owner and developer use to refer to the components.
- shared design resources to quickly create mockups that accurately reflect your design system. This might be a single Figma file that everyone has access to. The file contains a symbol for each component, and often multiple variations for displaying the same component at different sizes or In different contexts.
- shared source code components that allow developers to build these components and their variations, often with a single line of code. There should be a 1:1 mapping of the components in Figma and the source code.
In each case, the components don’t just represent a UI widget. They mean something very specific in the context of the product. It is an environment that allows me to be specific about my product and is directly relevant to anyone involved In making It.
Design is not just what it looks like and feels like. Design is how it works. -Steve Jobs
Robust
If I want to change a component in some way, I can consistently change it across all levels. That is why I call it a live design system. Weather it is described, designed or coded. I work in an isolated environment, which leaves no room for ambiguities. In this way the product design expands and still remains consistent.
Building fase
Once I’m familiar with the product and Its concept, I start putting the components in the HTML template. I consciously refer to my design system and I know what each component is going to be used for. There are still generic pieces involved, but when I assemble them, UX wise, they form something specific, like the cards of a specific subject. I do not just assemble, I actually picture my core product concept at many levels.
Isolated environment
These are the components of my UI dashboard: Titel, Cover chart, Card, Footer
For demonstration purposes, I’ll be showing a “Card”, which is one of the core components of my UI dashboard.
Functional model
Here, I explain what each component is and how it interacts with the broader system using user stories
User story describing the component functionality
Card title component
Card title component in Figma file
Each component listed has a link to open directly in my Figma file.
Code snippet of the card title component
Adding new features
Card title component has 1:1 relationship with my LESS file
Why It works for me
In my Directory I describe naming conventions, so that everyone involved in the product design uses the same language.
If I want to add new features to my UI dashboard, I ask myself how to solve the problem using the components I already have. I look at the set of components from my design system and I link them with specific workflows. As my UI dashboard expands and the system gets more complex, new features are introduced in a coherent way so that I can merge the concepts.
These practices allow me to build multiple UI dashboards that are used In many different ways. They remain lean and consistent despite growing in features. I have a HTML template where I stick to while the product Is being built. The idea is to put all the smallest components into my UI dashboard template so it is coherent overall.
Feel free to visit my repo when I regularly work on my live design system on Github and, my UX process description in Figma you will find here. To see the live demo of the UI dashboard, click here.
To do that, look at the big picture first. Capture the aesthetic qualities as a whole and identify the patterns that are particularly effective at expressing it. Then you can follow a similar process for all the styles: start with the key roles a style has in the context of your product, audit existing instances, and then define patterns and building blocks. The guiding principles help to connect everything together and link it back to the purpose.
― Alla Kholmatova, Design Systems
Originally published at https://anetastojanowska.medium.com on March 5, 2021.
