Prototyping with Atomic
I recently went on quite the bender, trying out almost every prototyping tool on the market. Besides having a lifetime’s worth of marketing emails and “trial membership running out” subject lines, I’ve found a winner.🏆
My needs were quite broad. I needed to be able to bring my designs to life with customizable transitions and animations, the ability to use external data that helps make components look more realistic, something that could handle reusable components so I don’t waste my time, and be able to use JavaScript to get really fine-tuned interactions if needed. That’s a lot for one tool, but with the ubiquity of design tools, I figured it had to be out there.🤷
Enter Atomic. After slugging through the multitude of prototyping tools, it was an absolute delight to land on something that had such a sweeping set of features without having to sacrifice the time to learn how to use it. In just minutes, I was able to figure out how to use variables to store a username and password, add text inputs to a login page, and create a reusable login button via their components feature. It all comes together to make a login page that looks and functions like an actual app!👌
As I begin work on a new product at work, I’ll be making generic tutorials that parallel the more advanced prototyping I’m doing with Atomic. To follow along, be sure to follow me on Medium! 🙌 Another topic I’ll be writing about is my new workflow. I’ll be using Figma for design, Zeplin for developer handoff, and Atomic for both static mocks (direct exports of screens designed in Figma) and hi-fi prototyping. All three of these tools provide commenting, sharing, and collaboration - which is helpful both for transparency and communication.
As always, drop me a line if you have questions, tips, or want to say hi.✌
