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 Checkboxes In Figma
To create checkboxes your design will need to contain two parts. First, using variants you’ll need to design the various states of your checkboxes (i.e. default, hover, selected, unselected). Second, you’ll need to create a frame containing the various options for your checkboxes.
Checkbox 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 checkboxes). 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 checkbox doesn’t necessarily need to comprise a rectangle with a text layer. You can choose to have purely text-based checkboxes (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 Checkboxes
Once you have designed your checkbox 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 set of checkboxes.
The next figure shows an example of how we can use our variants designed in Figure 1 to create two sets of checkboxes. The instances frame (below the variant designs) contains two frames: Text Checkboxes and Rectangle Checkboxes. 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 checkboxes from the variants.
Tagging Your Boxes 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 checkboxes you need to use Selectable Text.
You’ll need to tell the plugin which variant to use for which state of your checkboxes (see the next figure). More specifically you’ll need to configure two things. First, you can select which variant to use for each state of your checkbox 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 Rectangle Option 1 the radio button group will output the value A.
Final Step in weave.ly Editor
You’ll notice that purely following the steps above your checkboxes will behave like radio buttons . In fact until now the tutorial for checkboxes or radio buttons is exactly the same. To allow users to check multiple boxes you’ll need to open the weave.ly editor after publishing your design.
The figure below showcases how to do this in the editor. When you select a Selectable Text block you can tick the multipleAnswers checkbox in its configuration panel. In doing so you enable users to select multiple options. Moreover, you can specify how multiple values need to be aggregated into a single piece of text using the separator option.
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.
