This is a YouTube video titled "Figma 101 – Components (9 of 12) Lesson Preview" containing an instructional lesson presented by Matt D. Smith on May 28, 2024. The content explains the concept of components in Figma, focusing on their reusability, consistency benefits, and how to create and manage components and instances within the design tool.
Components are reusable building blocks that make your design process faster and more consistent. Some areas where components can be valuable include headers, footers, line items, cards, icons, buttons, input fields. Now, this is not an exhaustive list by any means. It's just a starting point. So let's start off by talking about components and component instances. Components can be used to create consistency. By using the same elements throughout your design, you can manage changes more easily, and you only need to make a single change on your main component and all of the instances will be updated at once. So let's start off by creating a simple button component. All we need to do is make a selection and and hit Command option K. We can also right click the selected objects and choose Create Component. But if you're using Figma regularly, this shortcut is super helpful to remember. This will create a main component and is represented by a diamond icon in the Layers panel. Any copy of this main component is called an instance and it's represented by this outlined diamond icon and any changes made to the main component also change in the instance.
