2.6 Dropdown

In the Figmaster - Lessons Figma file, open the 2.6 Dropdown page.

Introduction

Let's create a dropdown component. Dropdowns present a list of options from which a user can select one option or several. This chapter will be very similar to the demo lesson so if you remember how to create a dropdown component you can do it without my instructions. In the Figmaster Design System file, find the Dropdown page and see what needs to be done. If you want to follow my instructions, just continue below.

Step 1. Dropdown Menu Item - the base

1. Open the Text tool and type 'Dropdown Option' on the canvas.
2. Select the text you've just created and apply Text M/ Regular style to it.
3. Then apply color style Neutral / 90.
4. Group it and apply auto layout.
5. In the auto layout panel on the right, open the alignment and padding menu.
6. Apply the following values:
7. Left and Right Padding: 16 px
8. Top and Bottom Padding: 6 px
9. In the same alignment and padding menu, set the alignment (blue lines) to Left - Center.
10. Close the menu and rename the selected item to 'Dropdown Menu Item'.

Step 2. Dropdown Menu Item - states

Let's create states for our Dropdown Menu Item.

1. Select Dropdown Menu Item while holding SHIFT + ALT and move it 8 px to the bottom to duplicate it.
2. Duplicate the item, so there are six copies in total.
3. Select the first item on the top and rename it to 'Dropdown Menu Item / Default'.
4. Select the second item and change it's fill color (background color) to Neutral / 20. Pro tip: Did you know that you can select next/previous items with the keyboard? When the item is selected: TAB to select the next item in the layers panel. SHIFT + TAB to select the previous item.
5. Rename the second item to 'Dropdown Menu Item / Hover'.
6. Select the third item (SHIFT + TAB) and change its fill color (background color) to Neutral / 20 and add an outside stroke of 3 px with Primary/Focused color. Apply the Neutral / 100 color style to the stroke.
7. Rename the third item to 'Dropdown Menu Item / Focused'.
8. Select the fourth item and change it's fill color (background color) to Neutral / 30.
9. Rename the fourth item to 'Dropdown Menu Item / Pressed'.
10. Select the fifth item and change its fill color (background color) to Neutral / 40.
11. Select the text inside and change its text style to Text 14 / Medium and color style to Neutral / 100.
12. Rename the fifth item to 'Dropdown Menu Item / Selected'.
13. Select the last item and change its text color to Neutral / 60.
14. Rename the last item to 'Dropdown Menu Item / Disabled'.

Step 3. Dropdown Menu Item - components & variants

Now it's time to convert our Dropdown Menu Items into components and variants!

1. Select all Dropdown Menu Items.
2. Open the component menu dropdown at the top center of the Figma UI (four squares icon).
3. Select 'Create multiple components' option.
4. On the right, in the Variants panel, press 'Combine as Variants' button.
5. In the variants panel, rename 'Property 1' to 'State'.
6. In the variants panel, rearrange states with your mouse in the following order: Default, Hover, Focused, Pressed, Selected, Disabled.

Step 4. Dropdown Menu Separator

In this step, we'll create a dropdown menu separator component. We'll use it to separate the dropdown menu items that are within different action groups.

1. Open the pen tool (P).
2. Click somewhere on the canvas.
3. Move the cursor ~100 px to the right while holding SHIFT and click again to create a line.
4. Press ENTER to finish the vector line.
5. Apply the Neutral / 40 color to the vector's stroke.
6. Group it and apply the auto layout.
7. Rename the frame to 'Dropdown Menu Separator'.
8. In the auto layout panel, open the alignment and padding menu.
9. Apply the following values: Top and Bottom Padding: 4px.
10. Select the line inside the frame and in the Resizing panel, set its width property to Fill container.
11. Select the Dropdown Menu Separator frame and press CTRL + ALT + K to create the component.

Step 5. Dropdown Menu

Let's use the components we've just created to build the dropdown menu.

1. Open the assets panel (ALT + 2).
2. Find and grab the Dropdown Menu Item component from the Assets panel and drop it on the canvas.
3. Select the component while holding SHIFT + ALT and move it 0 px to the bottom to duplicate it.
4. Duplicate it so there are five items.
5. Select all items and group them.
6. Rename the group to 'Dropdown Menu'.
7. Apply the auto layout to the group.
8. Find and grab the 'Dropdown Menu Separator' from the Assets panel and drop it inside the dropdown menu frame before the last dropdown menu item.
9. Select the Dropdown Menu and press Enter to select all items inside.
10. In the Resizing panel, set width from Mixed to Fill container.
11. Click somewhere on the canvas to deselect these items and select the Dropdown Menu once again.
12. In the auto layout panel on the right, open the alignment and padding menu and apply the following values: Top and Bottom Padding: 4px.
13. Apply the Neutral / 10 color style to the Dropdown Menu's fill.
14. Add 1 px stroke with Neutral / 40 color style and set it to Outside.
15. Set the corner radius of the Dropdown Menu to 4 px.
16. Add 'Shadow 2' style from the effects panel.
17. Select the Dropdown Menu and press CTRL + ALT + K to create the component.

Step 6. Dropdown Button

It's time to test your skills! The Dropdown Button will be almost identical to the Button / Icon Text / Outlined we created in the 2.3 Button chapter. Don't worry. If you are stuck, you can always check the solutions file. Create the Dropdown Button with the following guidelines:

1. The icon should be placed on the right side of the text.
2. The text should be Dropdown.
3. Icon should be 16x16 px and Icon / CaretDown.
4. The name of the component should be Dropdown Button.
5. There should be five states: Default, Hover, Focused, Pressed, and Disabled.

Good luck and have fun! After finishing the button component, go to the next chapter.