Getting Started with Atomize Design System ⚡️

Create screen design much faster than ever!

Akash Tyagi
Jun 5, 2018 · 4 min read

⚠️ This article has been updated with the launch of Atomize 4.0

Updated article Link

Introduction

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

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

Theme Setup

Colors

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:

Type System

Text Styles:

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

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

Base Elements:

Buttons

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

Just like Buttons, Input Fields also have their individual customizable 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 🔌

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

  1. Rename It
  2. Runner
  3. Sketch Style Generator
  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 🚀

Support/Feedbacks

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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