Getting Started with Atomize Design System ⚡️(update 4.0)
Create UI design faster than ever!
Introduction
Atomize Design System is the most advanced UI design framework for Sketch that helps designers create well-structured and scalable user interfaces for the web.
Working with Atomize is easy! This simple guide will help you get started with Atomize and show you how to customize it according to your needs.
⚛️ Foundation
The basic foundation of Atomize is derived from Atomic Design Methodology (by Brad Frost) which has atoms and molecules as foundational building blocks of a system.
The idea is to start with setting up the base elements and standards and then follow them while designing the interface.
Spacing and measurments:
Use multiples of 8 to define the base sizes, paddings, margins, and vertical rhythm across the screens. Always try to position elements and components using the 8pt baseline. 4pt baseline provides more flexibility when aligning Typography, Icons, and other small components.
Increments of 8pt — 8, 16, 24, 32
Increments of 4pt — 4, 12, 20, 28
Containers: come in different shapes and have multiple corner radii and caps.
Radius — 4pt, 8pt, 12pt, 24pt, Round.
Caps — Left, Right, Top, Bottom. (Applicable to all border-radius)
Type Scale: is grouped into 2 categories:
Normal display size: H100, H200, H300, H400, H500, H600, H700 and
Big Display size: HBD1, HBD2, HBD3, HBD4
Overview
Atomize Design System now has 2 variations — Light theme and Dark theme. They both have similar functional elements but have different shared Layer and Text styles. The sketch file primarily has 3 sections:
- 🚀 Style Guide
- 💎 UI Components
- 💈 Theme Setup
1. Style Guide
Atomize comes with an advanced auto-updating Style Guide. Any change that you do with the shared layer and text styles is immediately reflected in the Style Guide. You can easily test how a particular font or color will look like if you use it for a project.
2. UI Components
You can use the base elements independently, or in combination with other elements, to create bigger UI components. Click on any of the elements to view its customizable properties under the Overrides menu.
For example — Buttons, Input fields, Dropdown menus, List items, Cards, and Dialogue boxes.
3. Theme Setup
Here you can change all the shared styles used in the system like Colors, Outlines, Gradients, Shadows, Fonts, and States. Any changes made are automatically applied to its instances across the entire document.
🎨 Colors:
Atomize Light Theme has 7 sets of Solid colors — Black, Grey, Brand, Red, Blue, Green, and Yellow. All these sets have 9 different shades ranging from 100 to 900, and one among them is also used as the base color. The dark theme has 5 shades ranging from 500 to 900. These colors have been chosen after careful deliberation to ensure that they work with each other. You can either go for the default colors that come with the System or change it according to your brand needs.
A set of gradient and new pastel colors are also provided to give you a wider range of fill options.
🌖 Shadows and Elevation:
Elevation indicates the amount of separation between the surfaces. In Atomize Light theme, you get 5 card elevations from Z-index 1 to Z-index 5, whereas you have 10 elevations from E0 to E9 in the Dark theme.
⚠️ States
You can apply State shared styles like Active, Disabled, Hover, Progress, and Focus on different elements depending on the use-case.
Icon System
Atomize has 2 sets of utility icons: Solid and Line. You can add as many icons as you want in the system. Watch the video below and follow the steps.
👉 Adding a new icon in Atomize
Type System
Inter is used as a Primary font and WorkSans as a secondary font. The secondary font is mostly used for bigger text sizes. If any of these fonts are not available on your computer, then look out for the ‘Missing Fonts’ notification at the top right-hand corner in Sketch.
Atomize Text Styles also have varied colors, font weights, alignments, and line heights. You can also customize these text styles by selecting them and changing their respective properties in the inspector panel. Don’t forget to click “Update Text Style” after you have made the changes.
Note: Please install plugins Rename It and Sketch Style Genereator before you work with the Type System.
👉 Adding a new color in Type System
👉 Adding a new font size
👉 Adding a new font-weight
Useful Sketch Plugins 🔌
While you don’t necessarily need to have any other plugin to work with Atomize, using some plugins can help you save a lot of time and effort by automating manual and repetitive tasks — like renaming layers, creating, and managing Shared Styles.
Here is a list of Sketch plugins that you may need to maintain a Design System more effectively:
- Rename It: by Rodrigo Soares to rename and replace layer/artboards.
- Sketch Style Generator: by Luca Orio to generate multiple shared styles at once.
- Sketch Manager: by Jaer Pollux to manage Symbols, Text and layer styles.
- Library Symbol Replacer (If you use Atomize as a Sketch Library)
Get Atomize 🚀
To know more about Atomize, please visit atomizedesign.com. A Demo version is also available for those who wish to try it before upgrading to the full version.
Support/Feedbacks
Tweet @atomize_design or you can send in your feedback or suggestions to info@atomizedesign.com
