For a quick overview of Atomic check out the Getting started in Atomic sample prototype

Setting up your page canvas

Set the dimensions of your page in the properties panel or select a preset mobile, tablet or desktop size from the dropdown menu. Just make sure nothing on your canvas is selected to see these options. 

Here you can manually enter the width (W) and height (H) of the page in pixels, or select a preset size (for example iPhone, android, tablet, or desktop). 

Resize the page to fit the content

You can resize the page to fit all contents on the page with one swift click. Just select ‘Fit Page to Content’ and the page dimensions will automatically resize.

Drawing tools


Create and style shapes, lines, images and type. Selecting an element on the canvas will show you the properties for that element in the right hand panel. Currently, vector assets and more complex shapes will need to be imported. See importing assets for more information.

Managing layers

You can use layers to name and arrange the order and depth of your elements. To hide a layer or lock a layer, just hover over it. Selecting the lock will lock the layer, where selecting the circle will hide it.

Handy shortcuts     

• Group layers: Cmd + G  
• Ungroup layers: Cmd + Shift + G  
• Move selection forward: Cmd + ↑  
• Move selection backward: Cmd + ↓  
• Move selection to front Cmd + Shift + ↑  
• Move selection to back: Cmd + Shift + ↓  
• Toggle layer lock Cmd: + Shift + L  
• Toggle layer visibility: Cmd + Shift + K

Next →  Importing Assets

Related articles:

Did this answer your question?