In this short tutorial we’ll show you how you can build functioning dropdowns from your Figma designs.
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 Dropdowns in Figma
To create dropdowns your design will need to contain two parts. First, using variants you’ll need to design the various states of your dropdown (i.e. default, hover, selected, unselected). Second, you’ll need to create a frame containing the various options for your dropdown.
Dropdown Variants
Figure 1 showcases an example set of variants for dropdowns. Each variant will be used for a different state: default, hover and selected (respectively from top to bottom). You’ll notice that we didn’t design an unselected variant, you are free to chose for which state you want a particular variant (but you need at least one).
Framing the Dropdown in an Overlay
Once you have designed your dropdown 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 dropdown. Typically this frame is opened using the “Open overlay” interaction in Figma.
Figure 2 shows an example of how we can use our variants designed in Figure 1 to create a dropdown. The Dropdown Overlay frame (to the right of the screen) contains instances (i.e. First, Second and Third) of our variants grouped together in a frame. Moreover, we’ve designed a button (i.e. containing the “Select” label) which opens this frame as an overlay.
Tagging your Dropdown in the Plugin
When building dropdowns you typically need to tag two parts.
1. Tagging the Dropdown Frame
You’ll need to tag the frame which groups the instances of your dropdown variants. Depending on the desired type of output (i.e. text or numbers) you’ll need to use the Selectable Text or Selectable Number tags.
Once you’ve determined whether you want your dropdown to output textual or numerical values you’ll be able to specify which variants to use for what state. Figure 3 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 dropdown 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 the option with the label Third the dropdown will output the value “Third” (so original, we know).
2. Tagging the Dropdown Selector
The button which opens the dropdown typically contains a label which needs to dynamically be adapted to the users’ choice. To do this you’ll need to use the Text Label or Number Label tag in the plugin. Figure 4 showcases how we do this in our example.
Linking Dropdown and Selector in the Flow Editor
Once we’ve tagged the two parts of our dropdown we need to connect the user’s selection in the dropdown to the label of the selector. This needs to happen in the weave.ly flow editor, Figure 5 showcases our starting point following the steps detailed above. Essentially, four blocks will automatically be generated on the canvas based on our tagged design. A Text Label block for our selector label, a Selectable Text block for our dropdown, and a click interaction block which is already linked to an Open overlay block (as defined in our Figma design).
By linking the output of our Selectable text block to the Text label block we instruct weave.ly to show whatever our user selects in the dropdown in the selector’s label (see Figure 6).
From within the Open overlay interaction in Figma you can specify that the overlay closes whenever the users clicks outside of it. However, in some cases you might also want the overlay to close whenever the user has made a selection. To do this you can use the Close overlay block from weave.ly’s block menu. Figure 7 showcases how this works for our example. The Close overlay will close a given overlay (configured in the right panel) whenever it receives a trigger. In our case the trigger is the user making a selection.
Result in a Web App
Figure 8 shows the final result once the example is published as a weave.ly web application.
Designing Dropdowns with Dynamic Options
So far we’ve designed and built a dropdown which provides a static number of options. However, there are cases where the options shown to the user depend on a dynamic set of data. In other words, the exact options aren’t known when you’re designing in Figma. In this second part of the tutorial we’ll showcase you how to build a dropdown containing a dynamic set of options.
The steps are mostly the same compared to a static dropdown, except for the part related to designing, tagging and configuring the dropdown frame. More specifically, instead of using the Selectable Text or Selectable Number functionality we’ll make a List out of our option frame (see Figure 9).
If you’re unfamiliar with lists or data tables we suggest you follow this tutorial first.
This also entails that within the weave.ly flow editor we’ll need to link a data table to our list to generate the dynamic dropdown options. For our example we created a data table with a single column (i.e. Option Name), as shown in Figure 10.
We’ll link this table to our list of dropdown options. Furthermore, whenever a user interacts with an option in the dropdown we want to get the relevant row in our table and extract the option name to show in the selector label. Figure 11 showcases how to do this for our example.
Result in a Web App
Figure 12 shows the result of our dynamic component implementation in a browser.
