Figma is a widely-used design tool that boasts many powerful features, including the ability to create components that we can use to create pretty functional digital controls, such as radio buttons, checkboxes, buttons, etc… In this four-part article, we will explore the concept of components in-depth and discuss how they can help us achieve consistency in our designs. By creating a main component, we can easily change the entire design look and feel to improve the user experience or make any change from the brand team, such as a new colour scheme or typeface.

In this article, we will learn how to create components and dropdown lists in Figma. We will also learn how to customize components and dropdown lists to meet our specific needs with step-by-step instructions.

What are Components?

Components are reusable elements that can be used to create consistent and efficient designs. By creating components, you can save time and effort by only having to design an element once. You can then use the component multiple times throughout your design, ensuring that all instances of the element are consistent.

Part 1: Designing Components

Creating a component is easy and can help you save time and ensure consistency in your designs. Here are the detailed steps to create an essential button component in Figma:

1. Use the text tool to write the label for your button, such as “Button.”
2. Press “Shift + A” to create an off-layout frame for your button.
3. Double-click on the frame’s name in the Layers panel to rename it to anything you like.
4. Adjust the padding on the right panel to achieve the desired spacing around your button’s label.
5. Select the frame and change it into a component from the top bar by clicking on the Diamond icon.
6. Click the Diamond icon again to create another variant of the component that you will use for the hover state.
7. Rename this Variant by clicking on its name in the right panel.
8. Make any desired changes to the hover state, such as adjusting the font size or color.
9. Navigate to the Prototype tab at the top of the right panel.
10. Wire the main button to the hover variant and change the event to “while hovering.”
11. Change the transition type to “smart animate.”
12. Adjust the transition speed as desired.
13. Create a new frame and copy the main button component into it.
14. Launch the preview to test the button’s functionality.

By following these steps, you can easily create a customizable and interactive button component that can be used throughout your design project.

Part 2: Creating the Item List

In this section of our tutorial series on Figma’s component and dropdown list designing, we will demonstrate how to craft a compelling item catalogue for our dropdown menu. We can access this directory by clicking the arrow button in the dropdown list. Follow these instructions closely and refer to the accompanying video if necessary to achieve excellent results!

1. Copy the main instance you create before using it for the item list.
2. Duplicate the instance as often as you wish and edit the text if needed.
3. Select all the duplicate instances and convert them into component by clicking on the Diamond icon in the top bar.
4. Rename the new component to your desired name.
5. Copy the original list and place it into the frame for testing, then test it.
6. Add the new instance to the main component by hovering over the first instance and clicking the “+” icon.
7. Rename the new instance from the right panel with any name you prefer.
8. Customize the instance with a different background, font size, or any other changes you want to differentiate it from other instances.
9. In the prototype panel, wire the hover instance to the selected instance with the event set to “on click” and smart animation enabled.
10. Test your work by going to the preview tab.

In the next part of our series, we will look at how to style our dropdown list component and create different variants to suit our design needs.

Part 3: Creating a Dropdown list

A dropdown list typically consists of a main field containing a label, an arrow indicating whether the list is open or closed, and a list of items and options appearing when the user clicks the arrow. By breaking down the design into its atomic parts, we can create a reusable component for the list of items that maintain consistency throughout our design. This section will show you how to make the list of things and wire it up to our main dropdown list component.

1. Detach the instance and name it “dropdown list.”
2. Add an arrow icon by drawing it or using a plugin.
3. Copy and paste the icon to the dropdown list field.
4. Align the icon to the centre using “align centre” in the Auto Layout panel on the right.
5. Turn the frame into a component by clicking the Diamond icon in the top bar.
6. Duplicate the component and rename it “Default.”
7. Click on the main component and add a new Variant in the Properties panel on the right.
8. Add values for the new Variant: “YES” for the dropdown list, “NO”.
9. Change the field’s arrow angle to 180 degrees with “YES.”
10. Change the name of the item list, e.g. Item 01, Item 02, etc.
11. Copy the item list instance to the “YES” Variant and align it under the dropdown list field.
12. Duplicate the “NO” Variant instances and change the label text to Item 01, Item 02, etc.
13. Copy the “NO” Variant instances and change all values to “YES” by flipping the arrow direction.
14. Wire option one to the instance with the same label in the Prototype panel
15. Copy the item list from the wired instance to the new instance with a “YES” value
16. Each list should have the item value selected according to the label name
17. Wire instances with “NO” values to those with “YES” values
18. Navigate to the component in the Asset panel
19. Place it in the test frame and launch the preview

In case you face any challenges, you can refer to the video for assistance.

In conclusion, components are a set of logic, behaviours, and interface elements that can be reused, allowing for superior user experiences and improved consistency and efficiency in website design. By using components, you can save time and effort, achieve scalability for service implementation, and ensure a clean and efficient design process. In short, mastering components can lead to beautiful, functional websites that provide an optimal user experience.

If you want to save time and use the file from the video you saw as a starting point, you can download it by clicking on the link below. Once downloaded, simply open it in Figma and start designing.

Don’t miss out on the chance to see my Instagram tutorial post, which is full of valuable tips and tricks for design apps.

SEE YOU IN THE NEXT POST… STAY CREATIVE