Using Interactions, you can turn static symbols into interactions with different states, then place wherever the interaction is needed!
Radio buttons are a very common component of forms, and this short tutorial will show you how to create one for your prototype.
Let’s build it! 👷♀️
Download Sample Sketch file here
After you've designed you button (Or used the file above), select the symbol and hit Prototype Tab > Interaction > Create
Create all the states you need:
Start with all radio buttons off
Next, Credit card on, Gift card off
And the last possible state, Credit card off, Gift card off
The difference between radio and checkboxes is that radio buttons go off when another radio button is clicked on. Let do that!
❶ From State 1, connect Credit card Radio to where the Credit card Radio button is on.
❷ Do the same for the when the Gift Card Radio button is on.
❸ And now let’s enforce so that only one selection can be made. Create an interaction to where the opposite option is on.
These last two interactions will also allow the user to change their option after they had already selected something.
All done!
After this, go back to Sketch Instances and click Preview in Browser and take a look at your work!
❗️Please note:
Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.