How To ‘Design’ a Design System — Part I
We decided to create our own design system because of the increasing complexity of the code between the components and the inconsistency between them. It began like a tiny snowball and with time it rolled and became a very huge one.
Design Systems are, in the simplest manner, reusable user interface components with clear operating instructions, shared between designers and developers. Everyone knows LEGO bricks. With LEGO bricks you can assemble a lot of things. The Design System is like built-in LEGO objects. For example, you want to build a car and some of your friends already built some car and they offer it for free or for a price. At this point you need to decide if this already built-in car meets your expectations or you want to build it by yourself as you wish!
1st Step — Research & Design
As Insider, our first step was to analyze the existing components we use in our web app and create their simpler and better versions. This analysis is carried out by developers and designers to provide technical and design knowledge simultaneously. We tried to choose the simplest form of components to reduce complexity. After some time, our design team came up with ready components given in Figma.
2nd Step — Creating the Structure
Once the designs were ready, we were ready to construct the Design System. Of course, we did research on other Design System libraries like IBM’s Carbon or Google’s Material UI . We decided to move forward with the Atomic Design Principle. There is a very good resource about it here.
3rd Step — Building Storybook
We decided to store our Atomic Components in a separate repository. And it was going to be an npm package that we could publish and use in our main application by installing it as a dependency. A Design System also requires documentation, guidelines about the components, fonts, icons and color palette. To provide these, there is a built-in application called Storybook. Most of the Design Systems are using Storybook. For initiating the Storybook, you can follow this simple guide to create one.
Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.
I will talk about our structure here.
- Under the
assets, our fonts and sprite lies. - Under the
components, our Atomic Components lie. - Under the
storybook / stories, documentation and controls lies for the components. You can read more stories here. - And finally under the
index.jsbasically where magic happens. It registers each component under the components that can be imported separately by restructuring.
index.js
With that configuration we can easily use our Atomic Components in our main application. Of course we installed our package first.
npm install @useinsider-design-systemThen;
So, I have shown how we built our Atomic Components and an example usage in our main application.
I have talked a lot about javascript part, now it's time for styling 🥁🥁
We decided to create our own classes to provide almost all styling that we created in our style guide. This also helped us not to write any custom styling in the Vue components. Before that, there was styling all over the components. It was really messy.
Also style guideline is our handbook, for example;
Defined spacings in the guide are 4px/8px/16px… , therefore when our designers designing something new they can’t say
‘Hey yoo! this button’s margin-left should be 7px and margin-right should be 13.5px’.
So there is a ruleset to follow for everyone.
As mentioned, we have built our own classes, each one representing a single style. We used SCSS to create these classes dynamically. Below you can see a simple display class structure built with SCSS.
$display:
"n" none,
"i" inline,
"i-b" inline-block,
"b" block,
"t" table,
"t-c" table-cell,
"t-r" table-row,
"f" flex,
"i-f" inline-flex,
"g" grid,
"i-g" inline-grid;
@each $shorthands, $prop in $display {
.d-#{$shorthands} {
display: $prop;
}
}If we use d-n which will result to display: none; in the page. With this method, we tried to cover most used styles.
So if we use classes shown below it will result to;
display: grid;
background-color: #ffffff;
cursor: pointer;
margin-left: 8px;
padding-left: 16px;
padding-right: 16px;At first glance it may seem complicated, but in time, developers get used to it and we are usually writing common suffixes without looking at the documentation.
We created these suffixes relevant to their naming for example; we combined margin and padding suffixes in _spacing.scss. Same goes for _colors.scss , _display.scss and so on… And finally we imported all those SCSS in a single file insiderDesignSystem.scss and imported in index.js file referenced above.
So the updated version would look something like that;
// Global and component styles
import '../design-tokens/insiderDesignSystem.scss';// import components
import Example from './components/Example/Example.vue'; // exports components
export { Example };
And in the main repository to register it globally, we imported CSS file which is bundled from Webpack like shown below
import Vue from 'vue';
import '@useinsider-design-system/insiderDesignSystem.css';
Thank you so much for taking the time to read the article! In the following part, we will talk about the components that are not at the atomic level and the communication scheme between them!
