Design System using Sketch Library

Payal Vats
Apr 8 · 5 min read
Rule of Atomic Design

Step 1: Building our first atom: Colors

Color Guide
Shared style in a sketch file
Applying a shared style from the inspector

Step 2: Building our second atom: Type

Type system
Shared style in a sketch file
Applying a shared style from the inspector

Step 3: Building buttons using colors & type

Button system
Converted to symbols

Step 4: Creating an icon library

Z Design Library- icons

Step 5: Creating bigger UI elements using atoms

Step 6: Using the library in other sketch files

Once the file is uploaded to sketch cloud, it should look like this
Notification for library update

Step 7: Your library is a live document



Zilingo Design

UX design insights from Zilingo design team

Payal Vats

Written by

Design Head at Zilingo

Zilingo Design

UX design insights from Zilingo design team