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

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:

• tabs
• breadcrumbs
• pagination
• 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 <span class="figma-component">component library</span>, and some in the <span class="figma-frame">local file</span> where you want to use your working radio button set. We’ll start with the component library:

Component library ingredients

• 1 <span class="figma-component">❖ Radio button</span> 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.

• At least 2 instances of the <span class="figma-component">⬦ Radio button</span> 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.

• 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 <span class="figma-component">⬦ Radio button</span>. Name them “1”, “2”, etc. These will live in your <span class="inline-code">02 Prototyping</span> collection. IMPORTANT NOTE! If you want a radio to be selected by default, set that variable to <span class="inline-code">true</span>. 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.

<span id="local-file-ingredients">Local file ingredients</span>

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.

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:

1. Override the label text for each instance inside your <span class="figma-frame">Radio button set</span> 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.
2. OPTIONAL: Rename each instance in the layer panel to match step 1: “first”, “second”, etc.
3. Select the first instance(s) of <span class="figma-component">⬦ Radio button</span> in the <span class="figma-frame">Radio button set</span> frame(s). The “(s)” applies to folks who are doing this recipe in bulk. I have an example of this in the GIF below.
4. Reveal and click the variable icon on the instances’ “Selected” property. Apply the variable “1” from the <span class="inline-code">02 Prototyping</span> 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).

1. Select the first instance(s) of <span class="figma-component">⬦ Radio button</span> in the <span class="figma-frame">Radio button set</span> 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 <span class="inline-code">02 Prototyping</span> collection. Set the value to <span class="inline-code">true</span>.
2. 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.
3. 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 <span class="inline-code">true</span> and all other instances to <span class="inline-code">false</span>. 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’.”

1. Test your prototype by selecting the <span class="figma-frame">Radio button set</span> 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 <span class="figma-frame">Radio button set</span> 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 <span class="figma-frame">Radio button set</span> frame that they need, copy it to their clipboard, and then paste it into their local files.

<span id="radio-local-instructions">Recipe for using the Radio button set in a local file</span>

Once someone has brought a working <span class="figma-frame">Radio button set</span> 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.

1. Copy a <span class="figma-frame">Radio button set</span> frame from the library file to your clipboard and paste it in your local file where you’re building your prototype.
2. Add the <span class="fimga-frame">Radio button set</span> to the appropriate screen and select the first <span class="fimga-component">⬦ Radio button</span> in the set.
3. Go into prototype mode and open the On click event.
4. Add a “set variable” action and select the “radio button selected” string variable from your local <span class="inline-code">Prototyping</span> variable collection. Set the value to match the <span class="figma-component">⬦ Radio button</span>'s label (e.g. Standard ground shipping: 2-5 business days.”)
5. Repeat step 4 for every instance of <span class="figma-component">⬦ Radio button</span> 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 <span class="inline-code">Radio button</span> 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!

<div class=”horizontal-rule”></div>

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!

‍