The Mac OS X app Sketch is wonderful for designing user interfaces. Its artboard system only adds to the experience, letting users demonstrate how a single dynamic screen might vary depending how people interact with it.
But one thing we cannot communicate is how an element might animate while the user interacts with it. What happens between the two states?
And similarly, have you tried Atomic?
Atomic, the Interaction Prototyping Tool
Atomic.io is surprisingly similar to Sketch despite them accomplishing two different things. It’s structured with Pages and Artboards just like Sketch, and you can either copy layers from Sketch or create them yourself in Atomic.
It’s true beauty is apparent when you begin designing the interactions and transitioning the screens together.
It’s fair to say anyone who does UI/UX design in Sketch will fall head-over-heels for Atomic.
What Makes the Perfect Duo?
Atomic corresponds to many of Sketch App’s keyboard shortcuts despite it being a web application.
Here’s one that you won’t find in Sketch though: “H” for Hotspot.
If you’re creating objects, shapes, and text directly in Atomic, you’ll notice the "Style Panel"(on the right) isn’t much different from Sketch’s "Inspector".
In fact, you can right-click in Sketch and select “Copy CSS Attributes…” and paste them into the "Custom CSS" field in Atomic.io. Talk about a time saver.
If this isn’t enough to convince you, let’s consider snap-to intuition. This may make you wonder if Atomic.io was really built by Bohemian Coding.
Overall Atomic works best as a general prototyping tool but it doesn’t need to go solo. Give it a shot in conjunction with Sketch and see what you think!
Leave a Reply