Creating complex interactions with interactive components — Radio button

Let’s learn how to create a radio button interaction in Figma.

Cover Image

A radio button is a well-known and widely used component in interface design. By using the interactive component feature in Figma, we can able to create a master animation that will be applied to all the instances.

New to interactive components? Basics are here.

Step 1: Let’s create a radio button with all the states required and make it into component variants.

Radio Button Variants

Step 2: Now connect the variants so that we can able to get a complete cycle of radio button interaction. From default, hover to active.

Things to know about the prototype:

• A trigger can be a tap action, on drag, while hovering, while pressing, etc. Based on your preference you can able to select the type of trigger you need for your prototype. Here, you can select hover as a trigger for the button.
• An action can be a way in which the hotspot takes the prototype to its destination. Here, select change as the action.
• The animation will be the way in which the prototype will look frame to frame.

Connect default to hover state radio button.

• Trigger as “hover”
• Action will be “change to”. Changing default component to hover component.
• The animation will be a “smart animate”.

Note: Smart animate can be helpful in making a fluid transition of layers. Choosing an instant or dissolve option will not give us a fluid transition.

Default to Hover State

Let’s also connect the default to the focus state radio button.

• We have to trigger this interaction when the “tab” key is clicked on the keyboard.
• Action will be “change to”.
• The animation will be a “smart animate”.

Default to Focus State

Now connect back focus button variant to the default button since the focus button should be backed to its default style when the ESC key is clicked.

• This can be triggered by clicking “ESC” on the keyboard.
• Action will be “change to”.
• The animation will be a “smart animate”.

Focus to Default State

Similarly, you can connect the other components that are variants of the “Off or Not selected” property.

You can also connect OFF hover to ON default with the trigger as “tap”.
Connect OFF Focus to ON default when the Enter key is pressed.

By doing this you can able to get the complete interaction cycle of a radio button.

Hope you get to build the prototype with interactive components. To learn more about components, design systems, and Figma as a tool, check this list of blogs.