Tutorial: build WORKING radio buttons, tabs, pagination, and breadcrumb sets in your Figma library

Published:

February 20, 2024

Updated:

Read time:

7

minutes

Perhaps you read my blog post about why some components, like individual radio buttons, should not come with on-click prototyping connections. If you didn’t, the TL;DR is that this produces more work for consumers who are using the radios in prototypes. They must remove those on-click events if they want realistic radio buttons in their prototypes. Not doing so means their prototype allows users to select every radio in a group of radio instances... sounds like a checkbox, doesn't it? This is not appropriate behavior for radios.

Removing those interactions saves consumers time, but can make libary custodians feel bad about making thier consumers set up on-click interactions for radio instances in their local files each and every time. The library is supposed to save time and effort, not make slow folks down and create work!

Well this post covers how you can address that: by building working radio button sets. And guess what! It’s not exclusive to radio buttons, but also your

❖ Tabs
❖ Breadcrumbs
❖ Pagination items
❖ Dropdown menu items

I’m going to treat this post like a recipe, sans the longwinded backstory about how this was passed down to me from my grandmother, etc, etc.

Ingredients

You need two sets of ingredients: some in your component library, and some in the local file where you want to use your working radio button set. We’ll start with the component library:

Component library ingredients

1 ❖ Radio button main component component with a boolean variant property for a “selected” and “unselected” state. This must be separate from interactive states like hover and pressing.

Screen Shot 2023-08-18 at 9.50.04 PM.png

At least 2 instances of the ⬦ Radio button component. Use however many you need. For this tutorial I’m starting with a set of two radios. You can also do this recipe “in bulk” and prepare many radio sets of various sizes at once (e.g. a set of 2, a set of 3, etc)! You’ll see me working with multiple radio sets in GIFs later on in the recipe instructions.

Screen Shot 2023-08-18 at 9.50.48 PM.png

1 auto layout frame wrapped around your instances of radio button. Name this frame “radio button set”
1 component-level variable collection named “02 Prototyping”, with only 1 mode. If you’re curious what the 02 prefix is about, it’s because these variables are component-specific, making it a component level variable collection. If you’re not sure what I mean by “level”, read my short blog post about the topic.
1 boolean variable for every instance of ⬦ Radio button. Name them “1”, “2”, etc. These will live in your 02 Prototyping collection. IMPORTANT NOTE! If you want a radio to be selected by default, set that variable to true. This may come up less for radios, and more like things like tabs. Remember! This recipe also works for tabs and other components! I’ve compiled a list of UI elements that could take advantage of this recipe in this blog post.‍
1 variable group named “❖ Radio button sets” for your radio button variables. This allows you to keep these variables separate from other prototyping variables you might make in the future.

Screen Shot 2023-08-18 at 9.54.08 PM.png

Local file ingredients

These ingredients get used during the latter half of the recipe (jump to relevant section) where I’ll give you an anchor link back here so you can bounce back and forth.

1 frame depicting a screen of your product that uses a radio set
1 variable collection named “Prototyping”
1 string variable named “radio selected”, set the value to be a single space so it appears empty.

Screen Shot 2023-08-18 at 10.06.32 PM.png

Recipe for creating the “working” radio button set in your library

Once you have your mis en place you’re ready to start “cooking” your radio sets. Here’s the instructions:

Override the label text for each instance inside your Radio button set auto layout frame to something like “first”, “second”, or “option 1”, “option 2”, etc. This will help you ensure you hook up the correct variable to the correct instances.
OPTIONAL: Rename each instance in the layer panel to match step 1: “first”, “second”, etc.
Select the first instance(s) of ⬦ Radio button in the Radio button set frame(s). The “(s)” applies to folks who are doing this recipe in bulk. I have an example of this in the GIF below.
Reveal and click the variable icon on the instances’ “Selected” property. Apply the variable “1” from the 02 Prototyping collection’s group “❖ Radio button sets.” Repeat this for each respective instance in your auto layout frame (Variable “2” would be applied to the second instance’s Select property, etc).

Select the first instance(s) of ⬦ Radio button in the Radio button set frame again. Switch to prototyping mode. Add an on-click trigger. Select “set variable” as the first action. The variable being set is “1” from the 02 Prototyping collection. Set the value to true.
With the on-click event still open, add a second “set variable” action. The variable being set here is “2” from the same “02 Prototyping” collection. Set the value to false. Repeat this step for every other instance in your Radio button set frame.
Cycle through steps 5 and 6 for each instance in your Radio button set frame until each instance has an “On click” trigger that sets its respective prototyping variable to true and all other instances to false. What you’re doing here is telling every individual radio button instance, “hey, when you get clicked, I need you to be ‘Selected=true’ AND set all your neighboring instances to ‘Selected=false’.”

Test your prototype by selecting the Radio button set frame and using shift + spacebar to preview the prototype. Click 1 radio button at a time. I've found that selecting radios too quickly can cause the prototype to get messed up. Allow at least 1 second to pass between clicks. The radios should appear to behave as they would on the web: only 1 item can be selected at a time.

At this point you may be tempted to turn your Radio button set frame into a main component so consumers can bring this into local files. Don’t do it! Unfortunately, this will disconnect each instances’ "Selected" property from your prototyping variables. I expect that Figma will eventually allow for instances inside a main component to bind variant props to variables, but for now it’s not possible.

“But Alice, how do I get this to my consumers!?”

I think the best move is to ask folks to come directly to your library file, select the Radio button set frame that they need, copy it to their clipboard, and then paste it into their local files.

Recipe for using the Radio button set in a local file

Once someone has brought a working Radio button set into a local file, they might want it to use it for something beyond its standard “one selected at a time” behavior such as:

In a form that returns the user’s prior selections to them for review, like in a checkout flow just before the purchase is made. For this situation you’d want to use a string variable to store the radio button selection information so it can be surfaced elsewhere. Steps for this are below (jump to section).
A form with conditional paths. A radio button could have downstream effects that impact whether or not certain questions are served to the user. For example, if a user is filling out a background check question “do you have any criminal history?” and they select “yes”, then the next question they’re presented would be different than if they had selected “no.” In this case you’d use a boolean variable and a conditional statement to show the correct next-question.
Affect data visualizations. Imagine a part of a poll or survey that presents a statement, “Vanilla is my favorite flavor of ice cream” with 5 radio buttons representing a likert scale options: strongly agree, agree, neither agree nor disagree, disagree, and strongly disagree. If a user selects strongly agree and submits the form, they see the results and after a brief delay how their answer changed the results. This could be achieved with number variables that effect the bars in the poll result chart.

Here’s the steps for the first example of storing a user’s radio button selection in a variable. For reference, here’s a link back up to the ingredients for these instructions.

Copy a Radio button set frame from the library file to your clipboard and paste it in your local file where you’re building your prototype.
Add the Radio button set to the appropriate screen and select the first ⬦ Radio button in the set.
Go into prototype mode and open the On click event.
Add a “set variable” action and select the “radio button selected” string variable from your local Prototyping variable collection. Set the value to match the ⬦ Radio button's label (e.g. Standard ground shipping: 2-5 business days.”)
Repeat step 4 for every instance of ⬦ Radio button in the set.

Now your consumers can store a user’s selection for that part of the form and apply it to text layers later down the line! Simply bind that text layer’s value to the Radio button selection variable you made.

And they got the radio button logic all for free. Yes, the variables belong to the component library (that’s where they were created) but you don’t need to publish them for this to work! The only thing consumers need to be careful about is not removing those pre-set “set variable” actions—once they’re deleted, they can’t get them back. They’d need to undo, or start over with a fresh copy of the Radio button set frame.

What else is cool is the same steps also work for tab sets, pagination, and segmented controls!

I fully expect that the process part of this will get better with time. Remember, variables are still in beta. I don’t like that for this to work, designers have to go to a specific place in the component library to get what they need. Luckily for my team, they already often have the library file open for reference and tend to copy/paste instances from there (rather than use the asset panel). Odd as that sounds, it’s more common than you might realize!

Binding variant properties to components at the main component level is coming. This might be the release we need to get around asking consumers to come to the library to get their ready-made prototyping frames. I expect to need to update this post as the variables feature gets more sophisticated. Until then, this is the best I’ve got for you!

‍

Interested in more?

If you'd like to be notified of when I publish a new blog post, joining my newsletter is a great way to keep up. My readers enjoy bonus behind-the-scenes insights on every post!

Thanks for signing up! 🥳

Check your inbox for an email about confirming your subscription ✅

Shoot, I'm sorry. Something went wrong while processing your submission. Not your fault, the problem is on my end. In the mean time you can send me an email or DM me on twitter and I'll get you sorted out.

FREE Component Quality Assurance Checklist

Get the 12-point checklist to evaluate your own components right inside of Figma! Modify the list and add your own criteria to suit yours and your team's needs.