omponents are reusable elements in your design. A header, footer or even a button can be a component. As you reuse a Master component multiple times, any structural change to it in the future will affect all other instances.
Components are extremely flexible in Figma. You can virtually override anything except for the position. Anything that can be edited in the Inspector can be customized. Components can even be resized.
Creating a Component
Before creating a Component, you need at least 2 layers. You can decide to select multiple layers to create a Component, or you can select an existing Group and turn it into a Component.
- Property Overrides
Editing the contents of the copies won’t affect the Master Component. Overrides can affect text, images, colors, shadows, and even styles.
- Nested Components
A Component can exist inside another Component. This is a powerful workflow because you want to be able to reduce the size of your Component as much as you can. There are small Components, such as Buttons and Icons, and there are big components like Cards, Overlays, and Modals. For example, the Card Component can contain Button and Icon Components. This thinking is very much in line with how React works.
- Component Overrides
Changing the content of your Component is crucial to creating reusable elements. At the basic level, you can only change properties in the Inspectors. However, sometimes, you want to be able to change groups of elements, such as icons. The only way to do this is to create multiple duplicates of a Component.
- Component Naming
Notice that we added a Slash to the name to group component overrides. This allows us to put similar Components together and easily find them in the drop-down menu.
- Component Resizing
You can resize your Component by changing its width and height, but you can also use the Scale tool.
In conclusion, components are elements that make editing across a large number of screens easy and fast, by making the desired changes on the master component, it automatically reflect on all the instances as long as they are not detached from the master component.