To show how a control responds before it is built, model its before-and-after appearances, connect them with a clickable hotspot, and preview the transition. A 2015 tutorial for the historical Atomic prototyping tool demonstrates that workflow with a dropdown arrow that turns into a close icon. It is a practical example, not evidence that Atomic was faster than other tools or that the product is currently available.
What an interaction prototype shows
An interaction prototype communicates how an interface changes in response to user input. Instead of showing only a static screen, it lets a viewer activate a control and see the intended response. That can make a behavior easier to discuss with developers and reviewers before implementation.
The example here is a dropdown control: clicking its arrow changes the icon into an X-like close symbol. The important idea is to represent the two appearances as separate states, then define what action moves from one to the other.
How the historical Atomic tutorial builds the interaction
Daniel Schwarz’s SitePoint walkthrough, originally published June 11, 2015 and updated November 6, 2024, documents this workflow in the older Atomic prototyping interface. The update date does not verify that the product interface, availability, pricing, or integrations remain current. Treat the steps and shortcuts below as historical instructions rather than guaranteed directions for a currently supported app.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
1. Draw the first state
Create a simple dropdown arrow from two lines and center it on the artboard. The original walkthrough lists these keyboard shortcuts for its interface: L for Line, S for Select, R for Rectangle, O for Oval, T for Text, I for Image, and H for Hotspot.
2. Duplicate the state and change the icon
Duplicate the first state and give each state a descriptive name, such as “Dropdown” and “Close.” In the duplicate, move one line so the arrow becomes an X-like close icon. Explicitly showing both appearances makes the intended change clear and provides endpoints for the transition.
3. Add a hotspot and choose a transition
Place a hotspot over the icon and configure it to navigate to the other state. The hotspot defines the area that responds to a click; the transition controls how the visual change is presented. The example selects “Cubic: Ease Out.” That is one documented choice, not a claim that it is the only suitable easing curve or the best choice for every interface.
4. Preview, then share
Preview the prototype and activate the control to check that the click leads to the intended state and that the transition reads clearly. The walkthrough then describes copying a share link so other people can inspect the interaction and comment. Previewing before sharing helps catch a missing trigger, incorrect destination, or confusing visual change while it is still easy to revise.
What this workflow helps you communicate
- Trigger: which area responds to a click—in this example, the icon covered by the hotspot.
- Result: what the interface should look like afterward—the arrow becomes a close symbol.
- Motion: how the interface moves between the two appearances, specified here with an ease-out transition.
- Review: a way for someone else to experience the behavior through a preview and shared link rather than infer it from a static mockup.
This is a compact pattern for explaining a simple state change. More complex behaviors may require additional states and triggers, but the tutorial does not establish how the historical product handled every interaction type.
How to interpret Atomic’s product history
The tutorial is about a historical interaction-prototyping web tool, not Atomic Design, Brad Frost’s design-system methodology. The SitePoint page includes discussion of Atomic Design separately; the overlap in names does not make them the same subject.
Atomic.io’s current website describes an in-app messaging platform and identifies Atomic.io Limited in its 2026 footer. That current site is not evidence that the historical prototyping product is available there. The sources cited here do not establish whether or when the old prototyping product was discontinued, so no discontinuation date or status should be inferred.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Where the example fits among prototyping workflows
A historical UX for the Masses directory groups tools by workflow, distinguishing products that let designers create or edit an interface and prototype it from products that make existing mockups interactive. It placed Atomic in the mock-up-prototyper group and described importing designs from Photoshop or Sketch, working with states and animation, and sharing by URL. Those are historical category descriptions, not confirmation of current features, support, or pricing.
Best Value
When choosing a prototyping workflow today, assess the needs that matter for your team rather than treating an old category listing as a current recommendation:
- Does the tool let you create screens, animate imported mockups, or both?
- Can you define the triggers, states, and transitions needed to represent the interaction?
- Can you preview on the devices or screen sizes relevant to your audience?
- How do reviewers access the prototype and leave feedback?
- Is the specific tool currently supported and compatible with your team’s existing workflow?
The directory also carries an undated historical testimonial from Charles Bitton, then identified as Head of Marketplace User Experience at IBM: “I love how quickly I can design an interface and automatically create intelligent animated transitions.” It reflects one person’s historical opinion, not a timed comparison or current endorsement.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
