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:
Build a Select Menu and its Options
Create a hover micro-interaction on Options
Nest micro-interaction inside Select Menu
Set up Select Menu for interactions
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
Create a state for each of the possible menu options by hiding layers you do not need as shown in the image above
In state1, select the Select Group and connect it with a Click event to the expanded menu in state2
In state2, select the Select Group and connect it with a click back to state1 so the menu can be closed
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]
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.
❗️Please note:
Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.