Four tips to prototype quickly in Atomic

Bradley Simpson

Sometimes you need to prototype quickly.

Speed and accessibility can be a huge help to the workflow when it comes to prototyping and iterating quickly. Maybe you need to throw together a quick wireframe, or are just exploring a small idea rather than finessing and finetuning your interactions.

There are a few quick and easy ways to increase your cadence and improve your workflow within Atomic. Here’s four tips we’d like to share with you to help you achieve just that:


1: Type the name of the color you want

If you’re working on a quick prototype and need to spare the details, typing a color instead of choosing one can be a nice, quick addition to your workflow.

To quickly and conveniently select a color within the color picker, just type the name of the color or paste the HEX code into the color selector.

You can even type different shades of popular colors. Just be sure to exclude the spaces between words when you type them. For example “darkgreen” or “lightblue”.

There is nearly every obscure color you can think of, including:


2: Use Custom CSS to create color gradients

Need to create colored gradients? You can do so by using Custom CSS. First, you’ll need to draw your element in which you’d like to apply a gradient to – for example a rectangle, square or oval.

Then, just follow the two simple steps below:

  1. Open a Custom CSS Gradient Generator such as this. Choose your preferred colors, angle and opacity. In the CSSmatic example, there’s quite a few settings you can play around with. Just tweak it until it feels right.
  2. Once you’ve chosen your settings, select ‘Copy Text’ and navigate back to Atomic. With your element selected, paste the CSS into the Custom CSS field in the Atomic.


3: Convert square images to circular

Maybe you’d like a circular avatar, or to convert a rectangular image to an oval. You can do this easily with just a little bit of CSS:

  1. Import your image into Atomic
  2. With the image selected, navigate to the Custom CSS window and paste in the following:


If your image was a perfect square, it will now be a perfect circle. If you had a rectangle, it will now be oval.


4: Mask your elements

There’s no need to pre-size your images or crop them before you import them into Atomic. Containers let you mask any images (and any elements).

This comes useful if you’re wanting to animate the mask of an image during a transition.

To do so, just follow these basic steps:

  1. Import your image and full size
  2. Convert your image to a Container. Read how to do that here.
  3. Resize the boundary of the Container to mask the image

If you’re wanting to animate the mask, just resize the boundary of the Container on page 2, link them via a hotspot and Preview to view and tweak the settings of your transition.

Do you have your own Atomic workflow tips to share? We’d love to hear them! Let us know on Twitter.

Posted 9 May 2016

Advanced interactive design & prototyping.