Tutorials7 min read

Prototype a Dropdown Menu using Components for a Faster Workflow

Dropdown menus are a clean way to present an expandable list of items users can choose from and then display their single choice.

Cal Brackin
Cal Brackin, UX Design Student @ University of Colorado-BoulderAugust 2, 2021
Dropdown Menu Using Components Thumbnail

Introduction

Dropdown menus are an essential selector element because they condense lists into a menu that can easily expand and contract. When the menu is activated with a click, a "drop-down" displays the list of values until the user selects their choice and the menu returns to show that single item. Retail sites often use dropdown menus to tuck up lists like calendar dates or sizing selections to deliver a clean interface and easy usability for users.

ProtoPie will help you achieve a faster workflow for creating dropdown menus by using components that reduce repetitive tasks. ProtoPie also uses send and receive functions to seamlessly share information between inputs. Have fun!

What you will learn

  1. Turn the item into a component
  2. Create the hover state for the item
  3. Display the selected value in the text field using Send and Receive
  4. Use a conditional interaction to make the menu expand or collapse

In the end, you’ll be able to make something like this!

Dropdown Menu Made with ProtoPie

Step-by-step instructions

1. Turn the item into a component

  1. To start, delete list items two and three because you are going to be creating and using components. Components are saved layers and interactions that you can reuse. They save you from doing repetitive work and accelerate your prototyping.
  2. With list item one remaining, select it and convert it to a component. The layer's icon will turn from a grey container icon into an aqua-colored component icon.
  3. Copy and paste these components to create three items and drag them down to create your list.
Turn the item into a component

2. Create the hover state for the item

 1. Go to the component panel (under the scenes panel on the left) and choose the component you want to edit.

Go to the component panel

 2. Make the base layer visible in the layer panel and set its opacity to 0.

 3. Add a Mouse Over and a Mouse Out trigger to the component. Add an Opacity response for each trigger both linked to the base. For Mouse Over, set the opacity to 100, for Mouse Out, set the opacity to 0.

Make the hover states for the item

 4. Make the text layer editable in the component (this step is only needed if you've imported assets from another design tool). Then, go to the main scene where you can customize the text of each component.

Customize the text for each item

 5. Check the preview to see that the opacity is reacting to your mouse hover. All of the items should be reactive as things changed in the main component will sync to each instance of the component automatically.

Check the hover state in the preview window

3. Display the selected value in the text field using Send and Receive

 1. Return to the main component and add a Tap trigger to the component itself. Then add a Send response inside this trigger. In ProtoPie, components are isolated from each other and scenes. To overcome this limitation, we need to use Send and Receive functions. In this step, you are creating a Send response in order to share information between your component instances. In this case, we'll use Send and Receive to specify which item is selected and let the main scene trigger deliver a response based on that.

Creating a Send response

 2. You are going to select Send to Current Scene under channel because you are sending and receiving in one scene, but open up the channel menu to the options of where you can send information to.

 3. Give your message a name such as selected. Then check Send Value Together because we want to know which component is selected.

 4. The formula you will be using here is 'text'.text This means you will be sending the value of the text layer, along with the message, to the component's text layer.

Sending the value of the text layer

 5. Go back to the main scene and add a variable for all scenes. It is important that you change the variable in the property panel into a text format because that is the format you'll be using. You'll use this variable to store the value sent from the component.

Adding a variable for all scenes

 6. Add a Receive trigger, select your text value to send in the message, and assign the text value to the variable you just created.

Add a Receive trigger

 7. You can click on the bug icon to have the variable displayed in your preview window. This debugger tool lets you check things are working properly. As you click on any item, the selected value should be displayed in this variable.

Display the selected value in a variable

 8. Going to the Input layer, convert the text layer to be editable. Then, add a text response in the Receive trigger with the text layer as the input field.

 9. Using a formula, change the value to be the variable itself. You can also add a color response to customize your text. In this example, we chose a dark grey (#2C3038).

Add a text response in the receive trigger

4. Make the conditional interaction of the menu able to expand and collapse

Let's add more interactions to the dropdown menu itself.

  1. Let's first set the opacity of the dropdown menu to 0. This is the initial state.
Set the initial state for the menu

 2. Add a Tap trigger to the input container. Add a Condition linked to the dropdown menu. In this demonstration, we are using opacity, but you can also try others.

 3. When the condition of the dropdown menu's opacity = 0, we add an Opacity response and set it to 100. In other words, when you tap the input, the dropdown menu will appear.

Add a Condition linked to the dropdown menu

 4. You can also add a Rotate response to the small arrow for an additional micro-interaction. Do this by adding a rotate response to the tap and select the arrow.

 5. You will need to change the arrow's origin point to be in its center. Rotate the arrow to the degree you want, in this instance 180 degrees.

 6. To reverse this sequence, make a duplicate of the condition, change the new condition's opacity property to = 100, and change the opacity and rotate properties.

Add a condition when opacity is 100

💡 Tips & Tricks

Tips & Tricks - Using Reset
  1. You can also use Reset to change the opacity to its initial state.
  2. In this case, you can't use reset of rotation because a reset response doesn't allow you to choose a rotate direction.

5. Making the Menu Disappear on Selection

  1. Don't forget to also make the menu disappear when an item is selected. To do this, duplicate the interactions you just made and move them into Receive trigger.
Make the menu disappear when an item is selected

 2. You can add one more interaction to make the menu disappear when clicking outside the component. To do this, add a Tap trigger on the BG layer and duplicate the interaction we just made into this Tap trigger.

Make the menu disappear when clicking outside the component

Congratulations!

You've learned how to create a dropdown menu using components. You included beautiful interactions that will really make your prototypes sing!