In the Figmaster - Demo Lessons Figma file, open the Demo Lesson 2 - Dropdown Menu page.

Step 1. Dropdown Menu Item - the base

In this step, we'll create the base for our dropdown menu item. We'll use color styles from the previous lesson and text styles (you'll learn how to make them in the full course). OK! Let's begin.

  1. Press T to open the Text tool and type 'Dropdown Option' in Step 1 - Playground frame.
  2. Select the text you've just created and apply Text 14 - Regular style to it.
  3. Then apply color style Neutral / 90.
  4. Press CTRL + G to group it.
  5. Press SHIFT + A to apply auto layout.
  6. In the auto layout panel on the right, open the alignment and padding menu.
  7. Apply the following values:
  8. Left and Right Padding: 16 px
  9. Top and Bottom Padding: 6 px
  10. In the same alignment and padding menu, set the alignment (blue lines) to Left - Center.
  11. Close the menu and rename the selected item to 'Dropdown Menu Item'.
  12. Copy the item and paste it in Step 2 - Playground frame.

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. Press CTRL + D four times to duplicate the item, so there are six copies in total.
  3. Select the first item on the top and rename it (CTRL + R) 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 inside stroke of 2 px. 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'.
  15. Copy all items from Step 2 - Playground frame and paste them into Step 3 - Playground frame.

Step 3. Dropdown Menu Item - components & variants

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

  1. Select all items in Step 3 - Playground frame.
  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 in Step 4 - Playground frame.
  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 (CTRL + G) and apply the auto layout (SHIFT + A).
  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. In this step, we'll use the shadow style (you will learn how to make it in the full version of the course).

  1. Open the assets panel (ALT + 2).
  2. Find and grab the Dropdown Menu Item component from the Assets panel and drop it in Step 5 - Playground area.
  3. Select the component while holding SHIFT + ALT and move it 0 px to the bottom to duplicate it.
  4. Duplicate it (CTRL + D), so there are five items.
  5. Select all items and group them (CTRL + G).
  6. Rename the group to 'Dropdown Menu'.
  7. Apply the auto layout to the group (SHIFT + A).
  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 - the base

You are doing great! Now it's time to create the trigger button for our dropdown menu.

Part 1. Setting up the base

  1. Press T to open the Text tool and type 'Dropdown' in Step 6 - Playground frame.
  2. Select the text you've just created and apply Text 14 - Medium style to it.
  3. Then apply the color style Neutral / 100 to this text.
  4. Press CTRL + G to group it.
  5. Press SHIFT + A to apply auto layout.
  6. In the auto layout panel, set the Spacing between items to 4 px.
  7. In the alignment and padding menu, apply the following values:
  8. Padding Left to 16 px.
  9. Padding Right to 12 px.
  10. Top and Bottom Padding to 6 px.
  11. In the same alignment and padding menu, set the alignment (blue lines) to Left - Center.
  12. Close the menu and rename the selected item to 'Dropdown Button'.
  13. Apply the Neutral / 10 color style to the Dropdown Button’s fill.
  14. Apply the 1 px stroke and set its color to Neutral / 50.
  15. Set its border radius to 4 px.
  16. Apply the Shadow 1 style to Dropdown Button.

Part 2. Adding the icon

In this part, we'll use the Icon component (you will learn how to set it up in the full version of the course).

  1. Open the Assets panel (ALT + 2).
  2. Find and grab the 'Icon / caret-down' from the Assets panel and drop it inside the Dropdown Button frame on the right.
  3. Change the size of the icon to 16x16 px. (Hold SHIFT and resize it with your mouse or use the top right panel's size properties).
  4. Press CTRL + C to copy the Dropdown Button.

Step 7. Dropdown Button - states

  1. Create five copies of the Dropdown Button in Step 7 - Playground (duplicate just like we did in Step 2).
  2. Select the first item on the top and rename it (CTRL + R) to 'Dropdown Button / Default'.
  3. Select the second item and change its fill color (background color) to Neutral / 20.
  4. Rename the second item to 'Dropdown Button / Hover'.
  5. Select the third item and change its fill color (background color) to Neutral / 20 and add an inside stroke of 2 px. Apply the Neutral / 100 color style to the stroke.
  6. Rename the third item to 'Dropdown Button / Focused'.
  7. Select the fourth item and change its fill color (background color) to Neutral / 30.
  8. Apply the Neutral / 40 color style to its stroke.
  9. Remove the shadow effect from this item.
  10. Rename the fourth item to 'Dropdown Button / Pressed'.
  11. Select the last item and change its text and icon fill color to Neutral / 60.
  12. Remove the shadow effect from this item.
  13. Rename the last item to 'Dropdown Button / Disabled'.
  14. Copy all items and paste them to Step 8 - Playground frame.

Step 8. Dropdown Button - components & variants

You are doing well! OK, the last step. Let's create the components and translate them into variants. This step is similar to Step 3, so if you remember how to create components & variants, do it yourself. 💪

  1. Select all items in Step 8 - Playground frame.
  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, Disabled.

Summary

Great work! You've just designed your first Figmaster component for our design system! Now you can access the components from the assets panel. In the full version of the course, we will also create documentation pages and document our components' states. You will also learn how to efficiently use and customize the components.

I want to thank you for reading and doing the exercises. I hope you've learned something new today. Please let me know what you think about this lesson. I would love to hear your feedback! Do you have any suggestions or remarks? Reach out to me via email at hello@figmaster.co.
Don't forget to tell your friends and teammates about the Figmaster and make sure to give it a like on the Figma Community ♥! Thanks! 🎉

Keyboard shortcuts in this lesson

Text tool
t
Group
ctrl
g
Apply auto layout
shift
a
Duplicate while moving
alt
shift
Duplicate
ctrl
d
Rename / open rename menu
ctrl
r
Select the previous item in the layers panel
shift
tab
Select all children when frame is selected
enter
Pen tool
p
Create a component
ctrl
alt
k
Search in the Assets Panel
alt
2
Copy item
ctrl
c
Paste item
ctrl
v
This is a demo version of the Figmaster. Learn more about the project and get access to the full course at figmaster.co.
Get full access