How we built an Atomic design system with Sketch libraries @Capital Float
Lessons learned while setting up a modular design system in a FinTech company.
Being in a startup with a couple of designers, we were working on different products and never had to cross each other’s path! But soon our products started looking different! Be it internal dashboards or client facing mobile applications, most of our designs were framework dependent to match our fast-paced product development.
We soon realised the need to unify our products. The only way to do that was to define a visual guideline. But how and where to start?
Few brainstorming meetings and a month later, we defined our first style-guide.
We were using Sketch template as our boilerplate, we haven’t created symbols yet! After using this file for few weeks, we started facing problems. Being in a startup we were working on multiple features and started seeing the inconsistency in designs because our designs were much more than just colours and typography. Also, it was difficult to stay in sync via file-sharing. It was a waste of time managing so many files. The difficulty of conveying design to developers was another challenge. Our goal of building a design system wasn’t working out!
Time to execute and build the real design system
Being a computer engineer turned UX designer, I knew the power of modularity. But how to do it for design, I had no clue on where to start! Being a huge Google design admirer, I started reverse engineering and questioning their Material design system. I also explored Bootstrap and Angular framework to understand how they have defined components.
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.
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 outside 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 the higher/latest version of a component)
- Symbols as a mask
Changelog
Please consider below comment as my open letter!
I would like to mention/point out here that the above article is meant to showcase our learnings and process of achieving the Atomic Design. It doesn’t imply to be my own creation! This is a humble attempt of implementing Brad Frost’s “Atomic Design” concept.
A huge thank you to Alexandre Trimoulet, Brad Frost and Oliver Jahn for inspiring me to get started with Design System.
If you have feedback/question for implementation of a design system or want to discuss other things please feel free to comment.
