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

Turn objects into components

Turn objects into components

So, 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.[1]

Note that a main component defines the properties of the component, such as its color, size, and typography. Designers create instances — copies of a main component that can be reused in designs. Instances are linked to the main component, which means that any changes made to the main component will be automatically updated in all its instances.[2]

Let’s say you want to create a section for customer testimonials on your landing page. A useful way to achieve consistent design is by using a testimonial card component. This component may include layout, typography, and colors for the card.

Then, you duplicate or copy the main component to create instances of the testimonial card for each customer testimonial. You can edit things like names, photos, and testimonial text on these instances and also adjust their size and position to fit your layout. These changes to instances won’t affect the main component.

If you decide to make changes to the overall design of the testimonial card, like font size or color, you can make the change in the main component. Figma will automatically update all instances of the testimonial card in your design to reflect the changes you’ve made.

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