Getting Started with Atomize Design System ⚡️

Create screen design much faster than ever!

Atomize Guide

Introduction

Atomize Design System is the most advanced UI design framework for Sketch that helps designers to create well structured and scalable user interfaces for the web. The entire system is built using Nested Symbols and Shared Styles.

Implementing Atomize design system is easy! Anyone who is familiar with Sketchapp can use it to design beautiful apps.

This quick start guide will help you get started with Atomize and show you how to customize it according to your brand needs.

Overview

Atomize Design System(ADS) primarily has 4 sections:

  1. 💈 Theme Setup
  2. ⚙️ Typography Setup
  3. 💎 UI Components
  4. 🚀Auto-Updating Style Guide

Theme Setup

Here you can change all the base elements like Colors, Outlines, Gradients, and Shadows. All these elements have Shared Styles applied to them, that means any change you do gets automatically applied to its instances across the document.

Colors

Atomize has 6 set of Solid colors — Black, Grey, Blue, Red, Green, and Yellow. Each set has 9 shades ranging from 100 to 900 and one of them is used as base color. These colors have been carefully chosen to easily work with one another. You can either use the default colors that comes with the System or change it according to your brand needs.

Adding a new color:

  1. Go to the Symbols page. Select and duplicate an existing color Symbol.
  2. Change its layer color as desired.
  3. Assign a new Shared Style to this color — For example: Color / Blue / New-Blue.
  4. Now update the Symbol name and Layer name of the new color.

Shadows and elevations:

Elevation indicates the amount of separation between surface. There are 5 card elevations from Z-index 1 to Z-index 5. Apart from elevations, there are directional Shadows having different X and Y axis. You can simply adjust Shadow properties in inspector panel and click on Update Shared Style.

Type System

Text Styles:

Text Styles have been organized from H100, H200, H300, H400, H500, H600, H700, and H800 respectively.

These Shared Text Styles having different colors, font weights, alignments, and line heights. You can customize these Text styles by selecting them and changing their properties in the inspector panel. After that, you need to click on Update Style icon to change it everywhere in the document.

Note: Atomize uses SF Pro Text and SF Pro Display as the default font. If these fonts are not present on your computer, then you might see Missing Fonts notification on the top right corner in Sketch.
Note: Install Rename It and Sketch Style Genereator plugins before you add a new Text size.

UI Components

Atomize is based on Atomic Design methodology which has atoms and molecules as foundational building blocks. In this context, Atoms include Color, typography, grid, and everything that can’t be broken down further.

You can read more about Atomic Architechture here: http://atomicdesign.bradfrost.com/chapter-2

Base Elements:

Base elements can be used independently or combined with other elements to from bigger UI components. Clicking on any of these elements will show you its customizable properties under Overrides menu.

Buttons

There are 4 button types available in Atomize — Default Text , Left Icon, Right Icon, and Icon Button. They are further grouped into 2 categories: Solid and Hollow.

They have individual properties like Text color🖍, Shape ⬛️, State ⚠️, Button Color 🎨, and Icon 💚.

Note: To change the Border radius of the Solid buttons, you need to change the border radius of the mask in the Symbol page. Similarly, for Hollow buttons you can change it by changing just the outline border radius

Form Elements

Input elements include — Checkboxes, radio buttons, Toggle Switch, Input fields, Text-area and Dropdown menu.

Just like Buttons, Input Fields also have have their individual cutomizable properties like — Label and Input Text Color 🖍, Border 🔲 (with cap options), Alert Message Type⚠️, Background fill Color 🎨, and Icon 💚.

Creating a simple Sign Up form:

Useful Sketch Plugins 🔌

You don’t necessarily have to install any plugin to use Atomize, but using these would save you a lot of manual and repetitive tasks — like renaming layers, creating Shared Styles and Symbols.

Here are some Sketch Plugins that you need to maintain a Design System more effectively:

  1. Rename It
  2. Runner
  3. Sketch Style Genereator
  4. Sketch Style Master
  5. Sketch Symbol Manager
  6. Sketch Text Style Manager
  7. Replace Text Colour
  8. Library Symbol Replacer (If you use Atomize as a Sketch Library)

Get Atomize 🚀

Visit atomizedesign.com to explore more about the product. A Demo version is also available if you would like to give it a spin.

Support/Feedbacks

Tweet @atomize_design or send your feedbacks directly to info@atomizedesign.com