Don’t feel like reading? Don’t worry we got you covered. Sit back, relax and let us run you through it in this video!
Designing Your Radio Buttons In Figma
To create radio buttons your design will need to contain two parts. First, using variants you’ll need to design the various states of your radio buttons (i.e. default, hover, selected, unselected). Second, you’ll need to create a frame containing the various options for your radio buttons.
Radio Button Variants
The figure below showcases two sets of variants. Each set of variants defines three states (which will be used for the default, hover and selected state of our radio buttons). You’ll notice that we didn’t design an unselected variant, you are free to chose for which state you want a particular variant.
A radio option doesn’t need to comprise an ellipse with a text layer. You can choose to have purely text-based radio buttons (as shown on the right) or use other shapes as you see fit.
Note that weave.ly only supports centered and outside strokes in Figma (e.g. in the leftmost set of variants in Figure 1). This is due to CSS restrictions.
Framing the Radio Options
Once you have designed your radio button variants all that remains to be done is to create instances of these variants. Each instance will represent an option which the user can choose. By framing these options together you enable weave.ly to determine that these a set of options belong to the same radio button set.
The next figure shows an example of how we can use our variants designed in Figure 1 to create two sets of radio button options. The instances frame (below the variant designs) contains two frames: Text Radio Buttons and Ellipse Radio Buttons. Each frame contains instances of the respective variants. You’ll notice that you can name the options however you want, weave.ly will automatically determine the styling of your radio buttons from the variants.
Tagging Your Buttons in the Plugin
Once you select a Figma frame containing instances of variants the plugin will provide you with a list of taggable functionality (see below). To create radio buttons you can either use Selectable Number or Selectable Text. The difference between the two is the type of data that your radio button should output once a user has chosen an option (i.e. type number or text respectively).
Once you’ve determined whether you want your radio buttons to output textual or numerical values (i.e. by either choosing for Selectable Text or Selectable Number) you’ll be able to specify which variants to use for what state.
The next figure showcases how to do this from within the plugin. More specifically you’ll need to configure two things. First, you can select which variant to use for each state of your radio button using the pill buttons (i.e. default, hover, selected, unselected). For each state you can choose a variant from the dropdown menu. Second, in the Element Data section you’ll need to specify the value for each option. In our example, when a user selects Ellipse Option 1 the radio button group will output the value Option 1.
Result in a Web App
The gif below provides an overview of our example as well as the final result once the example is published as a weave.ly web application.
