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:
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:
- Standardized elements and a Unified design system for all of our products, regardless of platform.
- Creating a 1:1 match as far as possible with our coded components and sketch symbols, both visually and structurally.
- 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”
- File and folder structure
- Pages and Art-boards management (Art-board as variant of a screen, Pages as features)
- Don’t repeat yourself (Use Symbols)
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 like atoms but more like attributes of elements like electrons and quarks. Colors can be used everywhere, as backgrounds, text, borders etc. Treating colors as element made icons file more consistent. These are symbols but mostly being used as over-rides in atomic level symbols.
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 are nothing 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.
Molecule is generally consist of multiple elements (text, images, symbols) but yet designed to be abstract and reusable. They have 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 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 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..
- Order of layers in your symbol matter. As they will appear in same order in the Override panel. You can also lock some layers to avoid clutter.
- Use Sketch runner to search and insert symbols as it has better preview than what Sketch currently has.
- Use Sketch Styles Generator to generate shared text and layer styles.
- If you are from 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..
- Shared text and layer styles are not actually shareable out side your file!
- Exporting assets from symbols with overrides is a pain! Check out this thread for more info.
- Versioning control for libraries. (Unlike developer’s version control, Sketch allows to move only to higher/latest version of a component)
- 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.
Don’t forget to visit my website.
Originally published at medium.com (Design + Sketch) on February 7, 2018.
