<?xml version="1.0" encoding="utf-8"?>

What are components?

What are components? Bad Practice
What are components? Best Practice

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).

Improve your UX & Product skills with interactive courses that actually work