Atomic: A Faster Way To Design Beautiful Interactions?

Share this article

Interaction design is the art of creating logical responses to a user’s action on the web. Whether you’re an interaction specialist, a user experience consultant, or a broadly-skilled web designer, it’s your responsibility to decide how a web element reacts to interaction and communicate that to the development team, even if you don’t quite understand the technologies that they’ll use.

But what is the fastest way to do that, without walking over to your developers desk and gesturing insane hand movements?

Also, what if you work remotely?

Atomic finally released their beta last week and it’s the fastest way of sampling an interaction idea and sending it out.

atomic logo

Before Atomic

FramerJS, Origami and Pixate are some of the tools at our disposal already, but we don’t always want to code our interactions or test them on native devices, do we?

Atomic is blazingly fast, and if you’re coming from a Sketch App background, it’s even better. It mimics the same keyboard shortcuts, has the same intuitive snap-to features, and quite honestly it felt like I was using Sketch, only with the ability to prototype interactions.

Getting Started

Ready to start? It’ll only take a few minutes of your time. Head over to the atomic website, sign up for the beta, and select “New Design” at the Projects screen. In this small tutorial we’ll be transitioning a dropdown arrow into a close icon upon a click interaction.

Sample project seletion

Creating The First State

Press “L” to initiate a simple Line.

The other shortcuts are “S” for Select, “R” for Rectangle, “O” for Oval, “T” for Text, “I” for Image and “H” for Hotspot.

You can hold “Shift” while dragging to create a completely accurate 45 degree angle; to skip ahead a few steps, the X, Y, X2 and Y2 should be 350, 250, 450, 350 respectively, and also make sure the “Stroke” is 10px.

Draw a line diagonally right and down

Press “D” for Duplicate and enter a new set of coordinates: 453, 250, 443 and 350. We now have our dropdown icon, but we need it center-aligned. See the layers on the left-hand side? Click both of them while holding Shift and drag both lines together into the center of the artboard. You’ll know you’ve hit the spot when the red auto-alignment lines appear.

We’ve created our first state.

First state: The complete down arrow shape

Creating The Second State

Click “Pages” in the layers sidebar; click “Page 1” on the card and rename it to something more relevant, like State 1 (Dropdown). Click the hamburger menu icon, also on the card, and duplicate our first state – then rename the duplication to State 2 (Close).

Atomic: Duplicate state 1 as your starting point.

Switch back to “Layers” and select that right-most line; drag it to the left until the dropdown icon resembles a close icon. Repeat the multiple layer select step (by selecting both layers while holding Shift, in case you forgot) and drag into the center of the artboard again.

Creating Interactive Hotspots

Now this is where the magic happens. Press “H” to create a Hotspot. Since we’re only sampling a single interaction, the hotspot can be any size you wish, as long as it fully covers the dimensions of our icon.

After you’ve created the hotspot, a new set of options will appear. Under the “Interaction” heading, select the first state as the “Go To” option. Select “Cubic: Ease Out” as the animation type. Atomic is able to handle interactions of much higher complexity, but for the sake of this tutorial we’ll keep it simple and use the default values for the other options.

The 'x' close icon

Previewing Interactions

Now switch back to the other state and repeat this step. When you’re ready, click the “Preview” button in the bottom-right corner of the window and click away. What you should be seeing is your dropdown icon animating into a close icon.

Sharing Your Interaction

Atomic: animation of finished interaction
Two state interaction –

If you didn’t actually follow this tutorial, that’s fine…I’ll send you a link! In the bottom-right corner, adjacent to the “Preview” button, click “Share”.

Copy the link and simply send it to anybody you like, however you like. Here’s the animation we made just now. After you’ve sent out the link to your interaction, users can comment on it and offer feedback.

It really is that simple!


Without downloading an app or writing a single line of code, I was able prototype how a dropdown icon would transform into a close icon. The use-case for this would be a dropdown menu that only appears when the icon is clicked, as opposed to accidentally triggering it upon a hover state.

But of course the dropdown needs a close icon, hence the use-case for my interaction idea. Did I mention you can copy my interaction and edit it? I challenge you to design the dropdown menu and demonstrate how exactly it would drop down.

Frequently Asked Questions about Atomic Design

What is Atomic Design and how does it work?

Atomic Design is a methodology developed by Brad Frost for creating design systems. It’s based on the idea that a design system is similar to chemical elements. The smallest parts, atoms, form larger, reusable components, known as molecules. These molecules combine to form even larger, reusable components called organisms. By combining organisms, we can create templates, and finally, pages. This approach allows designers to create most consistent, scalable, and robust design systems.

How does Atomic differ from other design tools?

Atomic is a powerful design tool that focuses on interaction design. It allows designers to create high-fidelity prototypes with a high level of detail. Unlike other tools, Atomic offers a timeline feature that lets designers control the duration and easing of their animations, providing a more realistic interaction experience.

Can I collaborate with my team using Atomic?

Yes, Atomic is built with collaboration in mind. It allows multiple users to work on the same project simultaneously. You can also share your prototypes with stakeholders and gather feedback directly within the tool.

Is Atomic suitable for beginners?

Atomic is user-friendly and suitable for both beginners and experienced designers. It offers a range of tutorials and resources to help users get started and make the most of its features.

How does Atomic help in creating beautiful interactions?

Atomic provides a range of features that help in creating beautiful interactions. It offers a timeline for animations, allowing designers to control the duration and easing of their animations. It also provides a range of pre-designed components that can be customized to fit your design.

Can I integrate Atomic with other tools?

Yes, Atomic can be integrated with other tools like Sketch and Photoshop. This allows you to import your designs directly into Atomic and start adding interactions.

Is Atomic a cloud-based tool?

Yes, Atomic is a cloud-based tool. This means you can access your projects from anywhere, at any time. It also makes collaboration easier as you can share your projects with your team and stakeholders directly.

What is the pricing for Atomic?

Atomic offers different pricing plans based on your needs. They offer a free plan with limited features, as well as paid plans that offer more features and capabilities.

Can I use Atomic for mobile app design?

Yes, Atomic is suitable for both web and mobile app design. It allows you to design responsive prototypes that can adapt to different screen sizes.

How can I learn to use Atomic?

Atomic offers a range of resources to help you learn how to use the tool. This includes tutorials, articles, and a community forum where you can ask questions and share your experiences with other users.

Daniel SchwarzDaniel Schwarz
View Author

Previously, design blog editor at Toptal and SitePoint. Now Daniel advocates for better UX design alongside industry leaders such as Adobe, InVision, Marvel, Wix, Net Magazine, LogRocket, CSS-Tricks, and more.

AlexWinteraction designprototypingprototyping toolUID
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form