Getting Started with Atomize Design System ⚡️
Create screen design much faster than ever!
⚠️ This article has been updated with the launch of Atomize 4.0
Updated article Link
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.
Atomize Design System(ADS) primarily has 4 sections:
- 💈 Theme Setup
- ⚙️ Typography Setup
- 💎 UI Components
- 🚀Auto-Updating Style Guide
Here you can change all the base elements like Colors, Outlines, Gradients, and Shadows. All these elements have Shared Styles applied to them, which means any change you do gets automatically applied to its instances across the document.
Atomize has 6 sets 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 come with the System or change it according to your brand needs.
Adding a new color:
- Go to the Symbols page. Select and duplicate an existing color Symbol.
- Change its layer color as desired.
- Assign a new Shared Style to this color — For example: Color / Blue / New-Blue.
- 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 the inspector panel and click on Update Shared Style.
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.
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 can be used independently or combined with other elements from bigger UI components. Clicking on any of these elements will show you its customizable properties under Overrides menu.
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
Input elements include — Checkboxes, radio buttons, Toggle Switch, Input fields, Text-area and Dropdown menu.
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 🔌
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:
- Rename It
- Sketch Style Generator
- Sketch Style Master
- Sketch Symbol Manager
- Sketch Text Style Manager
- Replace Text Colour
- Library Symbol Replacer (If you use Atomize as a Sketch Library)
Get Atomize 🚀
Tweet @atomize_design or send your feedbacks directly to firstname.lastname@example.org