What are components?
Components in Figma are reusable design elements that designers can employ to create a consistent UI design across a project. A component can be anything from a button, menu, or form field to more complex elements like headers, footers, and navigation bars.
Designers need to use components in Figma when they want to:
- Ensure visual consistency throughout the design project
- Save time when designing and updating multiple elements
- Ensure that changes to one element are applied to all instances of that element throughout the project
For example, when creating a landing page, a designer would need to create components for any elements that will be repeated throughout the design, such as headers, footers, navigation menus, cards, buttons, and forms.
How do you create a component?
- Select the element or group of elements that you want to make into a component
- Right-click on the object and select "Create Component" from the dropdown menu
The element will then become a component and can be added to the "Assets" panel for easy reuse throughout the design project.
Figma allows components to be nested within other components. When might you need this feature? Let's say you are designing a landing page with a header that includes a logo, a navigation menu with dropdowns, and a search bar with a Submit button. To create this header, you could start by creating a top-level component for the entire header, which would contain the logo, navigation menu, and search bar components.
Pro Tip: You can create a component by pressing the "⌥ + ⌘ + K" keys (for Mac) or the "Ctrl + Alt + K" keys (for Windows).