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

1: Мы начинаем.

2: Это не будет слишком большой ролик, однако он будет точно полезным. Дело в чем? Дело в том, что у вас во время работы будут возникать постоянно ситуации, где вам необходимо сделать так, чтобы кнопка по разному выглядела, чтобы у кнопки были разные.

3: Вариации. Активная кнопка при наведении кнопка стандартная кнопка. Возможно, чтобы был вариант большой или маленькой, то есть много всего разного. Однако вы хотите, чтобы в любой момент времени вы могли зайти в основной компонент изме,

4: Его и у вас сразу по всему вашему проекту все обновилось. Вот в этом мы сейчас и будем разбираться в чем вообще прикол. Давайте разбирать это все дело на примере вот такой инстаграм. Сторис это стандартная

5: Которую мы закидываем, когда мы проводим набор для учеников на наши образовательные продукты. В этом случае на форму логотипа и создаём с вами кнопку. Берём, прописываем здесь только не вот так вот давайте я заблокирую, чтобы нам ничего не мешало, а то у меня тут

6: Куча всего разного. Я беру это дело, все блокирую, да, все заблочено. И теперь мы берём с вами текстовый слой, пишем сайт академии.

7: Мы берём это дело, уменьшаем, поставим, например, 36 пунктов сайт академии, после чего мы берём этот текст и оборачиваем в авто.

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

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

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

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

12: Может происходить с этой кнопкой. Какие ещё могут быть вариации? Например, кнопка может меняться при наведении. Допустим, это будет карточка на сайте каком-то. Значит нам необходимо разработать вариант, где кнопка будет при наведении менять свои свойства. Давайте делать. Для этого мы заходим

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

14: Уже есть наше содержимое. То есть это просто стандартный компонент, который если мы будем дублировать, менять, то у нас все будет меняться сразу по всему сайту. Мы это ещё в деталях будем с вами разбирать дальше в течение обучения. Однако сейчас наша задача следующая.

15: Сделать альтернативную вариацию, где у нас будет дочерний компонент другого цвета. Что мы делаем? Мы заходим с вами в тот же правый верхний угол, нажимаем здесь кнопку добавить вариант. И здесь мы прописываем уже вариант 2

16: Который будет называться, например, Хава. То есть при наведении, когда у нас есть этот альтернативный вариант, мы берём и меняем ему свойства. Например, при наведении у нас цвет фона будет не белый, а, например, он у нас будет становиться

17: Фиолетовым, только желательно поярче. А текст внутри у нас будет становиться белым. Это значит, что когда мы навелись, у нас все дело изменилось внутри нашей системы. Это будет выглядеть. Давай.

18: Так, default да, пойдёт внутри нашей системы это будет выглядеть так. У нас есть 1 главный компонент и внутри есть у нас дочерний при наведении и наши стандартные которые вы и так все знаете если вы захотите добавить ещё 1 вариант вы

19: Просто нажимаете здесь плюс или же там же плюс и пишите например active. То есть после того, как вы кликнули, что-то произошло например после клика у нас вместо фиолетового цвета фона давайте сейчас это сделаем вместо фиолет.

20: Этого цвета фона, он у нас будет становиться более насыщенным, более фиолетовым таким вот так вот пускай будет вот так. А текст у нас будет становиться более белым. То есть что угодно, что произошло? Просто вот мы клик.

21: Кнопка изменила своё оформление и так далее. Все неважно просто вот он так теперь выглядит. Итого у нас есть с вами 1 компонент с 3 разными вариациями, активная при наведении и самая стандартная кнопка, которая только есть, что теперь

22: Мы можем с этим делать, мы теперь можем с вами взять просто и вытащить вот эту кнопку, например, дефолт, нажать ctrl c, вставить её вот сюда, в нашу картинку контрол в.

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

24: Свойств и выбираем здесь, Хавер. Все. Теперь у нас все переключилось. Или active все поменялось. Таким образом вы можете очень удобно настраивать себе заготовки стандартных решений и использовать их по всему сайту, если

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

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

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

28: Менять родительский. То есть вы делаете что угодно с этим. Однако в любом случае, если вы вернётесь к родительскому и замените именно свойства, то есть цвет или добавите обводку, то все дочерние элементы унаследуют.

29: Эти характеристики есть ещё 1 нюанс, если вы не хотите этой связи, если вы хотите навсегда взять и избавиться от вот этого компонента, если вы хотите разорвать связь с родительскими компонентами,

30: Давайте я назову это перент.

31: А это у нас будет уже child.

32: То у вас будет следующая ситуация, вам потребуется нажать правой кнопкой мыши и нажать здесь детач инстанс или же alt control б. Это позволит вам взять и отрезать вот этот компонент.

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

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

35: То control option command кей у вас на windows смотрите сами, что там происходит, и вас просто перенесёт к родительскому компоненту, чтобы вы понимали, где он у вас вообще находится.

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

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

38: Свойства закруглили его, привели в чувство, добавили внутрь него несколько фотографий. Например, 3 штуки, которые у нас здесь выровнены, отступы поправили все с ними хорошо закруглили, как нам надо. В общем, проделали базовую работу. Доба

39: Текст х. 1 давайте так. Этому тексту назначили необходимый цвет.

40: После чего добавили здесь текстовое описание вар 1 сбросили, 36, выровняли по центру, кинули сюда, поменяли цвет на темно серый и пошли вариант 1 вариант 2, вариант 3.

41: Это наша 1 карточка готова. Далее мы что делаем? Мы эту карточку берём, группируем, закидываем эту карточку в автолут, нажимаем шифт, а тем самым у нас все эти объекты. Давайте я их сейчас прям возьму и закину.

42: Группу внутрь. Тем самым у нас все эти объекты внутри автолута будут существовать. И теперь этот автолут мы правой кнопкой мыши нажимаем и конвертируем с вами в компонент. Готово. Теперь у нас есть 1 вариация, которая у вас здесь готова. Мы Нажи,

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

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

45: Поместить нажимаем контрол в вот она у нас поместилась, а далее мы в свойствах можем выбрать. Нам надо такое отображение карточки или маленькое все в 1 клик. Мы все это дело меняем очень удобно и быстро. Поэтому эта

46: Функция, она вам спасёт огромное количество ваших нервов времени. Вы просто перед началом работы создаёте компоненты и используете эти компоненты повторно в течение всего вашего проекта, если вы не будете пользоваться этой функцие,

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

48: Айкид, где у вас будут стандартные шрифты, где у вас будут стандартные иконки кнопки, и вы просто будете использовать вот эти зависимые копии от компонентов по всему вашему проекту. Когда понадобится, зайдёте в родительский, что-то обновите по

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

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

51: Но я с вами увижусь в следующем видео пока.