0: Всем привет мы продолжаем изучать фигму и в этом уроке поговорим с вами pro святая святых этой программы про компоненты это, пожалуй та вещь, которая действительно отличает фигму от многих других конкурентов и позволяет работать эффективно, быстро и с огром.

1: Огромным комфортом. Тем не менее компоненты многих по какой-то причине вводят в ступор. Поэтому я постараюсь разжевать все максимально подробно и ответить на все возникающие вопросы. Давайте приступать.

2: Начнём с того, что вообще такое компонент. Компонент это возможность создать 1 объект и затем быстро редактировать все его зависимые копии по вашему документу. Предположим, у вас есть кнопка. Давайте её сразу.

3: Создадим, делаем кнопку радиус, настраиваем где-то пятнашку, затем заходим в выбор цвета, выбрали здесь соответствующий оттенок окей, все хорошо, приближаемся, выбираем текст, кликаем левой кнопкой мыши и прописываем здесь, например, кнопку.

4: Click me окей, теперь берём увеличиваем размер самой кнопки нажимаю клавишу k. Для того, чтобы выбрать инструмент масштаба, выравниваю эти объекты друг относительно друга, выбрал их просто здесь и в панели с настрой.

5: Выравниваю по горизонтали, по вертикали. Все супер, с этим мы разобрались. Единственное, что я все-таки предпочитаю выравнивать текст в кнопках по центру, поэтому все это дело выровняли и повторно проверили, все ли у нас классно, все классно, потому что в адобе, например, сбивает

6: После того, как вы написали текст, и вы хотите выровнять его по центру, он начинает съезжать очень сильно. Здесь такого не произошло. Это прекрасно. Теперь, что такое компонент, как вообще с этим делом работать создаётся он крайне просто есть у вас групп.

7: Объектов, которые вы хотите объединить для того, чтобы повторно использовать в своём документе. Например, это какая-то кнопка, которая неоднократно встречается в вашем документе. И вы понимаете, что со временем клиент может обратиться к вам и сказать, товарищ

8: А сделай-ка мне, пожалуйста, эту кнопку не фиолетовой, а какого-то более фиолетового цвета. Стандартный клиентский запрос. И вы потом такие, окей, классно. И мне теперь надо переделывать 200 страниц сайта, потому что клиенту

9: Захотелось это все дело изменить, это то ещё мучение, поэтому, если вы работаете грамотно, вы берете и создаёте компонент, выбрали нужные объекты, после чего нажимаете здесь, в нижнем углу на раздел экшенс команд кей или ctrl кей и.

10: Выбираете здесь создать компонент. Это опшен команд кей. На всякий случай ещё раз напоминаю, для всех, кто работает на windows, когда вы видите вот такую дурацкую иконку. Это значит, вам надо жать альт. Если вы видите вот такую дурацкую иконку, вам надо нажимать

11: Контрол. Ну и все. То есть здесь наворотили они с иконками, но ничего не сделаешь. Создаём компонент. Все классно. Как только вы его создали в панели слоёв, вы обнаружите, что у вас появилась новая интереснейшая иконка в виде 4 рамбов. Это

12: Означает, что вы создали непосредственно родительский компонент, что имеется ввиду под родительским то, что если вы начнёте его изменять в будущем, все зависимые копии тоже будут изменяться, но как их создать? А здесь вариантов

13: Много. 1 вариант выбрали объект, нажали команд ди, тем самым сделав дубликат, и готово. Теперь вы можете обнаружить, что у вас в панели слоёв есть родительский компонент и дочерний элемент инстанс зависимая копия.

14: Если вы начнёте менять родительский компонент, давайте продемонстрирую. 2 раза нажал и выбираю здесь другой цвет. Например, выставим более фиолетовый, фиолетовый как клиент и хотел. Ну ладно, чтобы вам более видно было. Вот видите, я меняю цвет и все зависимые копии будут

15: Обновляться в проекте. Если я буду менять размер, размер тоже будет меняться. Если я буду менять вот так размер тоже все будет меняться. Если я возьму и изменю написание текста, все тоже будет меняться иными.

16: Словами, чтобы вы здесь не делали, у вас будут меняться все зависимые копии, альтернативные способы создания зависимых Копий. Следующие, помимо контрол д. Который я уже упомянул, это зажать клавишу альт, скопировать это

17: Нажать command ц команд. В тем самым вы берете, делаете дубликат. В общем, каждый раз, когда вы его создаёте, вы видите, что у вас появляется здесь зависимый компонент, я на это много времени тратить не буду, но скажу вам про 1 крайне важную вещь. Дело в том, что если

18: Если вы изменяете родительский компонент, то меняются все зависимые копии. С этим мы разобрались. Давайте я вам для наглядности ещё раз покажу. Взял, изменил здесь цвет на другой. Все меняется. Но бывают случаи, когда вам при

19: Принудительно необходимо перезаписать свойства родительского компонента в дочернем, например, в этой кнопке. Я ответственно заявляю, что я хочу все-таки взять и сделать эту кнопку другого цвета, например, чтобы она у меня была

20: Синяя. Если я сейчас начну менять текст, вы заметите, что все по прежнему работает, но свойства самой формы кнопки, а непосредственно её цвета эффектов они подтягиваются от родительского элемента.

21: Поэтому имейте это ввиду. Что касается того, как можно сбросить в случае, если вы по ошибке это сделали ваш компонент, потому что если я сейчас начну здесь изменять свойства цвета, вы обнаружите, что они в копиях, которые были

22: Принудительно перезаписаны свойства цвета, они обновляться у вас не будут, у вас все останется точно так же, как и было, будут обновляться свойства масштаба. А вот свойства, цвета, обводки, заливки нет ни в коем случае, как сбросить непосредственно ваш компонент до

23: Черний до того состояния, в котором он был изначально. Для этого вам потребуется выбрать его, зайти в раздел 3 точки справа сверху, и здесь вы сможете нажать на кнопку reset. Тут вы сможете выбрать reset, нейм или же reset.

24: Нажали и прекрасно. У вас компонент сбросился к стандартным своим настройкам. Это бывает очень важно, потому что мы порою в спешке просто случайно берём и компонент меняем, подумав, что это независимая копия ни от чего.

25: Просто вот отдельная кнопка. И потом, когда нам в процессе работы надо обновить сразу все массово, мы замечаем что-то тут, то там у нас есть проблемы, которые мы сами себе создали. Поэтому, если такое возникло, можно сбрасывать теперь что делать, если вы слу

26: Случайно удалили главный родительский компонент. Такое тоже часто бывает по ошибке, по случайности. Оно же не говорит, какой это компонент визуально. Поэтому взяли и случайно его удалили. Как его вернуть? Ведь теперь у меня все эти копии это дочерние элементы, и как бы я массово их

27: Нять не могу. Здесь все очень просто. Выбираете любой дочерний элемент, нажимаете правой кнопкой мыши, после чего идёте в раздел main компонент и берете, нажимаете кнопку вернуть его. Готово. Теперь у вас главный

28: Компонент вернулся в то же место, в котором он у вас присутствовал изначально. Супер. С этим мы разобрались. Но есть ещё крайне интересная вещь, которая появилась относительно недавно. Это вариативность компонента. Бывают ситуации, когда у вас

29: У вас есть 1 компонент, и вы понимаете, что, например, вы делаете 1 кнопку, однако вы хотите иметь опции этой кнопки. Допустим, в 1 кнопке будет опция, в которой будет иконка возле текста клик ми, в другой опции. У вас этой иконки не будет.

30: 3 опция, у вас будет другой цвет и тому подобные вещи. Иными словами, вы можете создать 1 такой крупный компонент, в котором будет несколько под опций и в дочерних элементах. Вы потом сможете через Свич брать и переключать. Я хочу сейчас отобра

31: 1 стиля, 2 стиля или 3 стиля работает максимально просто и офигенно. Я все же жду, когда же наконец то подобные вещи будут появляться в программах адобе. Но пока ждём, как это делается, вы нажимаете на

32: Ваш мастер компонент нажимаете на 3 точки и нажимаете добавить вариант. После этого у вас появляется красивый визуальный контейнер, который позволяет вам лучше визуально отделить то, что это у вас мастер компоненты. И здесь вы уже можете вариант номер 2 вида.

33: Изменять, например, 2 раза нажал и меняю теперь здесь цвет, допустим, на голубой. Что я делаю далее? Я выбираю дочерний элемент и хочу выбрать сейчас, что я хочу, чтобы у дочернего элемента цвет был не фиолетовый, а

34: А как у 2 вариации голубой, бирюзовый? Нажимаю здесь вновь-таки на дочерний элемент и справа сверху вы обнаружите свойства. Вариант номер 2 супер. Теперь у вас все это дело обновилось. Но что, если вы хотите

35: Добавить сюда иконку. Ну все очень просто. Берете и добавляете иконку, и она в свойстве номер 2 у вас тоже обновится. Я сейчас не буду тратить большое количество времени, просто нарисую здесь кружочек. Уменьшаем его, обозначаем его белым.

36: Цветом и готово. У нас теперь есть кнопка с какой-то небольшой иконкой и если я выберу сейчас дочерний элемент и выберу у него вариант номер 2, вы увидите, что все работает, все прекрасно и все прям круто поэтому если вам не

37: Необходимо создать эдакую базу с вашими компонентами, которые вы можете использовать в рамках вашего документа и просто при необходимости их переключать. Теперь вы знаете, как это можно сделать. И это очень удобная вещь. Тем не менее, небольшой ликбез. Я

38: Очень хочу, чтобы вы не делали компоненты там, где это не надо. Если вы понимаете, что вы создаёте элементы и вы будете его использовать 1, ну максимум 2 раза в вашем проекте, забейте на компонент, на его создание, на его настройку вы потратите больше времени, чем

39: На создание иконки, и у вас там будет просто месиво из элементов, поэтому создаёте компоненты только тогда, когда вы несколько раз используете одни и те же элементы в вашем сайте. Это позволит придерживаться стандартов с точки зрения размеров напис.

40: Цветов и что самое классное, как я уже сказал ранее, это позволит вам массово обновлять ваш компонент по всему вашему документу. И это невероятно удобная вещь. Ещё 1 важная вещь. Если вы со временем поймёте, что вы больше не хотите никак

41: Какой связи с вашим основным компонентом, с мастер компонентом? И вы хотите, чтобы ваш дочерний элемент стал полностью независимым? Вам потребуется нажать правой кнопкой мыши и нажать здесь детач инстанс в этом случае у вас просто оборвёт.

42: Вся связь с вашим родительским компонентом, и вы обнаружите, что теперь ваш объект преобразовался в обычный фрейм, внутри которого находятся все объекты, которые вы создавали, после чего вы можете нажать правой кнопкой мыши и создать с него новый мастер компонент. И таким образом

43: Делать дубликаты, если вы захотите идти таким путём, ну, такая возможность. У вас есть также очень полезная фишка. Это переход к мастер компоненту. Бывают ситуации, когда у вас дочерний элемент уже на 300 странице, а вам надо найти

44: Родительский, вы не поймёте, где он у вас потерялся. В слоях у вас хаос и мрак, как его найти? Тоже очень просто нажимаем правой кнопкой мыши и нажимаем перейти к главному компоненту. И нас перекидывает непосредственно к родительскому. Супер. Здесь теперь мы мо,

45: Можем все менять. Кстати, крайне удобная опция здесь, когда вы выбираете родительский компонент, у которого есть вариации, вы можете нажать просто на плюс и у вас добавится новый вариант. Спасибо фигме за классный юикс. Если бы они только сделали хороший

46: Ui напоминаю вам про эти дурацкие отступы ну, я надеюсь, они все-таки одумаются, ладно, это не тема этого ролика на этом с компонентами у меня все, но у меня есть крайне важное напоминание для вас, если вы хотите смотреть за

47: Закулисьем нашего канала смотреть за тем, как я работаю в канадской компании дизайнером, как я выполняю разные проекты, делюсь своими мыслями о дизайне и не только. И показываю вам жизнь в америке, то залетайте ко мне в инстаграм, буду очень рад вас видеть. Также у нас есть громадный канал.

48: Telegram по дизайну, где я регулярно публикую полезные новости дискорд, сервер, где подключён миджорн, и много много всего, поэтому переходите по ссылкам в описании, буду очень рад вас видеть, на этом у меня все с вами был Ростислав, не забывайте про лайки колокольчик подпис.

49: И увидимся в следующих видео. Пока.