Thought I’d share my journey on creating the first Product design system at my company.

I remember the first day I joined Capital Float, I asked my colleague if there was a style-guide I could use in Sketch. He told me we didn’t have any style-guide and only had some screens designed, most of them in Photoshop.

The problem is that we have multiple products (internal and external), and they were based on different front-end frameworks. He told me that my mission was to define a visual guideline to unify all of our products.

I understood I will have to make a style-guide, to have one source of truth and make our products consistent, while working on new features planned in the roadmap.

Few brainstorming meetings and a month later, we decided to quickly make a first style-guide. It looked like this:

The first attempt style-guide

We used this Sketch file as a starter template, we haven’t created Symbols yet! After using this method for few weeks, we started facing problems. We had to design many features and faced many inconsistency issues as products were becoming more complex. It was also often difficult to stay synced together, and with developers. We were loosing too much time doing always the same small tasks. Till now we had a goal of building a design system but hadn’t worked on one!

The day we started to build an actual system

I was really inspired by design systems from big companies like Salesforce, Atlassian, Shopify, IBM and of course Google Material design. So I started to learn everything about design system to understand how to build one. I also searched for the best design workflow and got really inspired by all the great content written on Medium.

Goals of Our Library

In order to understand some of the thinking that went into our decisions, here’s a brief overview of what we were trying to achieve with our design system:

1. Standardized elements and a Unified design system for all of our products, regardless of platform.
2. Creating a 1:1 match as far as possible with our coded components and sketch symbols, both visually and structurally.
3. Easy to maintain. Component updates or additions should be simple so that designers and developers get the latest without much wait.

First thing first

Before we jump to what all things to be added, we had to define certain rules to make Elements reusable and atomic in true sense. So we decided to go for a nested libraries instead of single source file. Doing so allowed us to split things like colors and icons into different Sketch files and then reference symbols across those files. If you make an update to a symbol in one of the files, it will still propagate to the other files that reference that symbol. (Great feature, Sketch! 🙌)

We have outlined certain patterns/rules to maintain “Workplace Hygiene”

1. File and folder structure
2. Pages and Art-boards management (Art-board as variant of a screen, Pages as features)
3. Don’t repeat yourself (Use Symbols)

File and folder structure

Pages and Artboard management

Level 0: Quarks and electrons

Adding a layer under the Atomic system might seem a strange move, but it made the file easier to use. Also, it helped us balance between pre-built design elements and reusability. I consider colors and icons not as atoms but more like attributes of elements like electrons and quarks. Colors can be used everywhere, as backgrounds, text, borders etc. Treating colors as elements made icons file more consistent. These are symbols but mostly being used as over-rides in atomic level symbols.

Design System Colors - Download sample file: https://goo.gl/9WdLYR

We defined formula symbol to generate variation of a color and reuse it to generate palette. So that we just have to worry about base colors. Formulas arenothing but an overlay on a base color and works the same way as Shades & Tint.

Level 1: Atoms

Atoms represent singular elements of UI design which carry unique functionality. While defining atoms we also consider how these elements behave in HTML.

Everything that can be defined and used individually are atoms. For example card, tooltip, shadow, divider, button, logos, cursors etc.

A lot of these elements have different states and variations from which designer can choose. All these states are named exactly how it is used in development. Atoms are also likely to be used as overrides unless you are creating a custom UI.

Level 2: Molecules

This is the section where most of the magic happen! Molecules help us reduce our repeated work and allow us to bring consistency in design. Every molecule is built to offer exchangeable content, e.g. button states change, removing/hiding some elements.

Whole idea of molecules is to think generic.

Variations of a generic component

A Molecule generally consists of multiple elements (text, images, symbols) but yet designed to be abstract and reusable. They have an intermediate level of complexity, such as Tabs, status-bar, action-bar, list-rows, modals, alert messages etc.

Level 3: Organisms and Pages

At this moment, this level contains very few elements like page-headers, tables, Play/App Store mockups, date-pickers, keyboards etc. The reason for this is that I find it difficult to see sense in providing pre-built organisms, as this level designing often depends on the project we are working on and features and content that should be displayed.

Of course, all project has repeating organisms in pages, but they are often derived from individual needs and requirements. So better to use symbols here.

Pages or templates are actual output of a design process, so we decided not to include these level in the Atomic design system.

Last words

Sketch libraries will definitely change the way we design today. Here are few other things we learned while building atomic system:

1. Order of layers in your symbol matter. As they will appear in the same order in the Override panel. You can also lock some layers to avoid clutter.
2. Use Sketch runner to search and insert symbols as it has better preview than what Sketch currently has.
3. Use Sketch Styles Generator to generate shared text and layer styles.
4. If you are from a non-programming background and want to know how developers see design elements, use Sketch Measure plug-in to export your designs. It also helps in easing design handover.

Undoubtedly sketch is improving our design process but there are still few important missing features such as..

1. Shared text and layer styles are not actually shareable outside your file!
2. Exporting assets from symbols with overrides is a pain! Check out this thread for more info.
3. Versioning control for libraries. (Unlike developer’s version control, Sketch allows to move only to higher/latest version of a component)
4. Symbols as a mask

If you have feedback/question for implementation of design system or want to discuss other things please feel free to comment.

About the Author

I am Pratik Shah, an Indian multidisciplinary designer with 5+ years of experience in UI/User Experience & web development. Check out his website here: http://pratikshah.website/