Компоненты в Figma

   Давайте разберём структуру компонентов. Как вы уже знаете структура в Figma выглядит приблизительно таким образом:

   Основной элемент (название файла) и внутри него - страницы: Page 1 и Page 2. Этих страниц может быть очень много. Всё зависит от того, на каком тарифе вы находитесь. Внутри каждой страницы мы можем создавать огромное количество фреймов.

   В Figma есть очень классная функция, используя которую, мы можем заменять копию компонента на другой компонент.

   Главное понимать что заменять мы можем только копию компонента. Сам же мастер- компонент на другой компонент поменять не возможно. И абсолютно не важно где будет находиться компонент (внутри другой копии, либо вообще некая самостоятельная структура).

   Каждый раз, когда в Figma мы выбираем копию компонента, справа появляется меню. Давайте разберём это меню:

   Ну, во-первых, с этого меню мы можем отправиться к мастер-компоненту этого элемента, просто кликнув по значку компонента справа "Go to main component".

   Во-вторых, в выпадающем списке у нас есть некоторые возможности работы:

• Detach instance (превратить этот дочерний элемент в обычный фрейм, то есть прервать все его связи с его мастер-компонентом).
• Push changes to main component (возможность отправить все оверайды к мастер-компоненту).

Что это значит?

   Каждый раз когда вы делаете какие-либо изменения в копии компонента, это называется "добавить оверайд". Когда вы кликните по "Push changes to main component" все изменения в копии компонента примутся в мастер-компоненте, и соответственно и в других копиях компонента.

• Reset all changes (сбросить все оверайды). То есть сбросить у копии компонента все его изменения, он станет точной копией своего родителя.
• Reset name (сбросить название имени копии компонента до изначального, если мы его переименовывали).
• Reset size (убрать все изменения, которые касаются размера этого элемента). Размер копии компонента станет такой же как и у его родителя.

   И теперь самый интересный и важный момент. Что у нас скрывается за выпадающим списком "v", там где название компонента справа.

   А за ним скрываются абсолютно все компоненты которые есть в данном документе.

К примеру, у нас есть две страници: 

Page 1 и Page 2

   Переходя на каждую из страниц мы "опускаемся" всё ниже и ниже по иерархии, пока не дойдём до места расположения наших компонентов.

   Чтобы заменить копию компонента другим компонентом, нужно выделить этот компонент и выбрать из списка на страницах нужный объект.

   Это очень удобная функция, особенно если вы пользуетесь библиотеками. Это намного ускоряет процесс работы.

   Но есть один небольшой нюанс. Бывает такое, что когда мы хотим заменить одну иконку на какую-нибудь другую, то Figma видит папку "icons" внутри которой находятся ещё папки, например "right", "left", "house" и т.д. Как нам понять какая иконка нам нужна?

   Всё просто, нужно лишь называть наши иконки правильно. Если это иконка "домика", то и название должно быть логичным - "house".

   По такой же логике в Figma у нас работают и стили и они так же  пакуются в папку. Статья Создание стилей в Figma.

   По этому советую не забывать эту логику "нейминга" и называть свои компоненты  и прочие элементы правильно. И через "слэш", если есть вложенность, потому что для Figma считывание названий файлов и элементов очень важно. Многие функции Figma заточены именно на "нейминге", на правильных названиях элементов.