Live Interactive Select Menu made completely in Sketch using Anima [Open]

In a previous post, we showed you how to create interactive radio buttons, and in this guide, we will show you how to create an interactive Select Menu in Sketch using Anima.

Prerequisites:

Overview:

  1. Build a Select Menu and its Options
  2. Create a hover micro-interaction on Options
  3. Nest micro-interaction inside Select Menu
  4. Set up Select Menu for interactions
  5. Create interactions for each menu Option

Step 1: Build It

First, let’s create a fully expanded Select Menu with its drop-down container and make it a Symbol.

Next, let’s create the Option selector to which we will add a hover interaction in Step 2. For this, we will need:

  • An Option text label
  • A white background for the Unselected state (hoverOff) 
  • A light grey background for the Select state (hoverOn)
  • Convert it to a Symbol

Step 2: Create Hover Micro-Interaction

Select the Select Option Symbol, and in the Anima plugin, go to Prototype > Interaction > Create.

Inside the Interaction Editor, we will create the two mentioned states by hiding and showing layers:

  • state1 (hoverOff): Hide ‘Select Option’, Show ‘Unselected Option’
  • state2 (hoverOn): Show ‘Select Option’, Hide ‘Unselected Option’

Now that you have two states, connect them as follows:

  • Select state1 and connect it to state2 with a Mouse Enter event
  • Select state2 and connect it to state1 with a Mouse Leave event

Step 3: Nest Micro-Interaction

Since Select Option is a Symbol, we can nest this micro-interaction anywhere we want it to happen. 

Let’s place 5 instances of these micro-interactions inside the expanded Select Menu and override each Option label.

Step 4: Set Up Select Menu for Interactions

Our next goal is to create an interaction that replaces the “Select” text label with the text of the menu option we choose.

First, let’s set up this interaction:

  • Create a text layer and make it a Symbol named ‘Selected Option’
  • Create instances of the Selected Option Symbol and override the text with the options you have (Example: Option 1–5)
  •  Align them behind the current Select label and hide them 👇

In Sketch — place Symbol instances behind the current Select text layer and hide them.

Step 5: Create Interactions for Each Menu Option

Now that the Select Menu is complete, let’s add interactions!

Select the Drop Down Menu Symbol and go to Prototype > Interaction > Create

  1. Create a state for each of the possible menu options by hiding layers you do not need as shown in the image above
  2. In state1, select the Select Group and connect it with a Click event to the expanded menu in state2
  3. In state2, select the Select Group and connect it with a click back to state1 so the menu can be closed
  4. One by one, select each of the options in the drop-down menu and connect them to the state where they are selected [See GIF below]
  5. Lastly, in each state where an option is selected, select the Select Group and connect it back to state2 so that the menu can be expanded again after making a choice [See GIF below]

Step 5: Preview!

Click “Run Component” and notice how the nested interaction is triggered when you place the mouse over an option. Also, notice how the Select label changes to the menu option you chose.

Once you are happy with your Select Menu, head back to the Sketch screen and click Preview in Browser to see the full interactive form come to life.

Live Interactive Select Menu: [Open]
Sketch Sample File [Download]

Want to Learn More?

Did this answer your question?