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.

Our first style-guide

Time to execute and build the real design system

Goals of Our Library

  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

  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

Download sample file: https://goo.gl/9WdLYR

Level 1: Atoms

Level 2: Molecules

Variations of a generic component

Level 3: Organisms and Pages

Last words

  1. 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.
  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 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.
  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 the higher/latest version of a component)
  4. Symbols as a mask

Changelog

Above article is covered under CC0 — No Rights Reserved. I waive all copyright and related rights to the fullest extent allowed by law.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store