Components in Figma

   Let's take a look at the component structure. As you already know, the structure in Figma looks something like this:

   The main element (file name) and inside it - pages: Page 1 and Page 2. There can be a lot of these pages. It all depends on what tariff you are on. Inside each page, we can create a huge number of frames.

   There is a really cool function in Figma, using which we can replace a copy of a component with another component.

   The main thing to understand is that we can only replace a copy of a component. It is impossible to replace the master component with another component. And it does not matter where the component is located (inside another copy, or even some independent structure).

   Every time we select a copy of a component in Figma, a menu appears on the right. Let's take a look at this menu:

   Well, first of all, from this menu we can go to the master component of this element by simply clicking on the component icon on the right "Go to main component".

   Secondly, in the dropdown list we have some options to work with:

• Detach instance (turn this child into a regular frame, that is, break all its connections with its master component).
• Push changes to main component (the ability to send all overrides to the master component).

What does this mean?

   Every time you make any changes to a component instance, this is called "add override". When you click "Push changes to main component" all changes in the component instance will be accepted in the master component, and accordingly in all other component instances.

• Reset all changes (reset all overrides). That is, reset all changes to the component copy, it will become an exact copy of its parent.
• Reset name (reset the name of the component copy to the original, if we renamed it).
• Reset size (remove all changes that affect the size of this element). The size of the component copy will be the same as its parent.

   And now the most interesting and important moment. What is hidden behind the drop-down list "v", where the name of the component is on the right.

   And behind it are hidden absolutely all the components that are in this document.

For example, we have two pages: 

Page 1 and Page 2

   Going to each of the pages, we "go down" lower and lower in the hierarchy until we reach the location of our components.

   To replace a copy of a component with another component, you need to select this component and select the desired object from the list on the pages.

   This is a very convenient function, especially if you use libraries. It speeds up the work process a lot.

   But there is one small nuance. It happens that when we want to replace one icon with another, Figma sees the "icons" folder inside which there are other folders, for example "right", "left", "house", etc. How do we know which icon we need?

   It's simple, we just need to name our icons correctly. If it's a "house" icon, then the name should be logical - "house".

   Styles work in the same way in Figma and they are also  packed into a folder. Article Creating styles in Figma.

   That's why I advise you not to forget this "naming" logic and name your components  and other elements correctly. And through "slash", if there is nesting, because for Figma reading the names of files and elements is very important. Many functions of Figma are focused on "naming", on the correct names of elements.