How to use

Implementing Atomize design system is as easy as picking & dropping components, each of which can be
fully customized. See it here (Video tutorial) - https://youtu.be/aOx4bMoXVm0
Follow these steps to get started:

Step 1: Start by using this as your base sketch file for your new project. If you already working on existing project, copy all the
symbols from Atomize Sketch file to your existing project Sketch file. You can easily do this by going to ‘Symbols’ page
and pressing Command + shift + A to select all and then Command + C to copy them.

Step 2: Click on ‘Insert’ button.

Step 3: Select ‘Symbol’ and then Symbol type (For example: button, icon, image or input).

Step 4: A Symbol can have more nested options to choose from. For example: A button can have 2 types (Default filled or
Hollow button).

→ Default button

Step 5: Then again you have more options like default button or Icon button. If this seems to be confusing, you can also copy
and paste UI elements from the Style guide provided.

Default Button or
Default Icon button. → Left icon, right icon or
center icon button

Atoms [
Note: As metioned in 3rd step, Atoms are properties of an element like color,
state, text. Properties can be later altered from inspector panel.

Step 6: Click on the element to see its properties in the inspector panel. You can customize properties like color fill, text color,
shape and state(default, hover, disabled) from inspector’s Overrides option.

Button

Step 7: If you want to change a color fill, border and text color or weight globally you can do it by going to symbols page and
then changing its attributes.

Note: You can also create new Atom symbols using existing Atom symbols as shown below.

copy

Press option + shift and Now rename it and change

drag to make a copy of → its color you want. →
symbol.