UI Kits are a great way to get started in Atomic. Avoid getting bogged down by visual design and prototype your idea quickly with one of our UI Kits. Perhaps you’re wanting to quickly explore an idea, or throw together a quick mockup.

All elements in the kits are intended as a starting point for you to incorporate in your prototype. Nearly all of the components in our UI Kits are full editable. In the layers panel you can expand the layer groups and change, copy and add as you need.

There are two ways to get started with the UI Kits:

Use it as a starter for your prototype

To use a UI Kit as the starting point for your prototype, copy and edit it into your account (if you don’t already have it). Then duplicate the prototype, open it and get stuck in.

Copy and paste just the elements you need

If you don’t want to duplicate the whole prototype each time, you can open the kit form within your Project and copy and paste just the elements you need. 

iOS Kit for iPhone

You’ll find the free Atomic iOS UI Kit for iPhone ready and waiting for you in the Samples project we created for you. If you’ve already archived that project, you can find it here.

When you open the iOS kit you’ll see we’ve already created an example layout for you on the first page.

By default, our components use Apple’s new San Francisco fonts which you’ll only see on devices that have those fonts installed (Apple’s terms prevent us from offering full support for San Francisco at the moment). This means if you preview your prototypes on an up to date iOS device, the fonts may look different to how they do on your desktop. On devices that don’t have San Francisco, Atomic will use fallback fonts Helvetica or Arial depending on your system.

Bootstrap UI Kit

You can grab your copy of the Bootstrap UI Kit here – just copy it into a Project of your choice and you can start using it instantly.

Each element of the kit is simple to customize and fully native in Atomic. You can animate color, size and position changes with minimal effort. This version is based on the current v3.3.6 of Bootstrap. The icon font featured in Bootstrap is Halflings by Glyph Icons who have kindly agreed to offer them at no cost for your use in Atomic. 


Next →  
Replace an image

Related articles:


Did this answer your question?