How to Create a Radio Button in Sketch with Anima

Bring Life into Prototypes with Interactive Forms

Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

Testing the usability of a form with most prototype tools can be… hard!

“What if the user clicks here first, and not there?! So many artboards to create! That’s insane!”

Using Anima Interactions, you can turn interactions with different states into a Symbol that you can simply place wherever the interaction is needed! No need to worry about creating a path for every user choice.

Radio buttons are a very common component of forms, but again, it can be tedious work having to duplicate entire artboards just to show a small interaction that happens within the artboard.

Preview Link

Let’s build it! 👷‍♀️

[Download Sketch file here]

  1. Select the Payment Method Group
  2. Go to the Prototype tab of the Anima plugin (bottom right)
  3. Select Interaction and click Create

In the Interaction Editor, create all states you need:

  1. Start with all radio buttons off
  2. Next, Credit card on, Gift card off
  3. And the last possible state, Credit card off, Gift card on
All 3 Possible Radio Button States

❶ From State 1, connect Credit card Radio to where the Credit card Radio button is on (state 2)

❷ Do the same for the when the Gift Card Radio button is on (state 3)

❸ Let’s enforce so that we can change our selection after a choice has been made. Create an interaction to where the opposite option is ‘on’.

All done!

After this, go back to Sketch Instances and on the Anima plugin, click Preview in Browser and take a look at your work!

Design to development platform