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!

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.

UPDATE: Forms now include input validation for Email, Numbers, Required Field, and Auto Complete.

Preview Link

Let’s build it! 👷‍♀️

[Download Sketch file here]

The rule of thumb is that animations and interactions should happen between components inside a Group or Symbol and not with the artboards themselves.

  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!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store