Getting Started with Components
Components are UI elements that can be reused across your designs. They help you to create and manage consistent designs across projects.
In this article, we'll introduce you to Components and how you can use them in Figma:
What are Components
Components can be created from UI elements that you've already designed. These could be buttons, icons, modals or other arrangements of layers and shapes.
There are two aspects to a Component:
- The Master Component, which defines the properties of the Component.
- The Instance, which is a copy of the Component that you can reuse in your designs.
Instances are linked to the Master Component, so any changes you make to the Master Component will be applied to the Instance.
You can create Components to reuse within a single File. Or, share these across your Files and Projects using the Team Library.
How does it work?
- You create the layers and shapes that will make up your Component. This defines the properties of the Component.
- You then create the Master Component from the collection of shapes and layers.
- To use the Component, you can add an Instance of the Component to the canvas.
- You can change aspects of your Instances, like changing the Text on a button, to create an Override.
- Anytime you make changes to Master Component, those changes are applied to Instances of that Component.
- Creating Components
- Naming and Organizing Components
- Using Instances (Creating, Swapping, Overriding, Resetting and Detaching Instances)
- Updating Components and Instances
Check out these easy to follow Video Tutorials about Components: