Many design teams, big or small, are currently using some sort of design system to speed up their design process. This not only makes your day to day work easy but also helps to maintain consistency across different designs done by different team members. The below quote talks about the power of reusing atoms or smallest particles to make bigger UI components-
“Rather than creating a limited and vast set of UI elements, you define the system in terms of its particle properties, thus limiting the available styles but opening potentially unlimited avenues of creativity for the actual pieces of UI” — Daniel Eden, Designer @ Facebook.
Every team is different and have their own preferences of working towards organizing their design library, and in this post, we will share our approach.
Together as a team, we decided that we want to start with very basic and smallest design elements. This made a lot more sense as we were inclined towards the rules of atomic design. Simply put, it explains how one can use basic elements (like color, type, shapes) to create more complex elements (like buttons, tables, cards).
Step 1: Building our first atom: Colors
We started cleaning our color palette and decided on primary, secondary colors. Also, worked on how and where a specific color will be used in the UI, which resulted in a much simpler guide to using colors. Documenting the usage scenario for each color made this guide helpful for new designers in the team.
Once that was done, it was time to start creating the shared style palette in the sketch. We started creating rectangle boxes and filling them with each color and naming each box in a logical manner for eg-Palette/orange/primary/solid and so on. Using / in the naming helps to group in the sketch. Once all your colors are named and you have created the style, it should look something like below-
Step 2: Building our second atom: Type
Our type system is a combination of 16 styles (bold and regular) that support the needs of our product and the content. It contains reusable categories of text, each with an intended application and meaning.
Step 3: Building buttons using colors & type
Next, we decided to use colors and type to create another element like a button. So, we created a rectangle with rounded corners of 2px, filled it with a solid primary color from the shared style and placed a white text inside it. We created full and half-width buttons for both Android and iOS keeping the left, right and in between padding of the buttons constant. We kept going to create primary, secondary, tertiary, active, de-active and loading states of the buttons. Once the buttons are created convert them into symbols to share!
Step 4: Creating an icon library
We purchased an icon set from streamline icons which have 53 categories consisting of 31,500 icons. It was necessary that we tweaked them around to align with our color palette and grid. We converted the frequently used icons to symbols for easy access and reuse across the designs.
Step 5: Creating bigger UI elements using atoms
Once we had our design library in place, it was time to use it for creating bigger UI elements like text placeholders, snack bar, cards, toolbars and more! Below are a few UI elements that were created by using the library and converted to symbols.
Step 6: Using the library in other sketch files
Next step is to share this library with all your team members. We uploaded the library to sketch cloud and added team members there. Once your team member gets an invite they can add this sketch file as a library and start using the shared styles and symbols.
Whenever there is any change made to the library, all the files that are using this library would get a notification on the upper-right corner. Clicking on it would inform you of the change and you can decide to update or not!
Step 7: Your library is a live document
The best part about this library is that you can keep updating it with time. Once you start using the symbols and shared styles, you may realize that some things are not working out, so you can go back, change and update. As a team, we made a couple of changes to text style once we actually started using the library.
That’s all for now. If you like our experience, then share it. Also, let us know in comments how does your team work with libraries.
Currently, we are a team of 4 designers at Zilingo. This design library was a collaborative exercise that we did as a team :)
Illustration Credits to Divya Jyoti Singh