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

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

2: Постараюсь объяснить все таким образом, чтобы у вас не возникло никаких вопросов для демонстрации. Нам потребуется артборд, который я назвал для удобства родительский элемент или parent, а также мы назовём child и дочерний элемент. Это

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

4: При масштабировании родительского изначально, скорее всего, у вас будет стоять привязка лефт и топ. Что это значит? Если вы посмотрите более внимательно на обозначение, вы увидите вертикальную пунктирную полосу, а также горизонтальную пункт.

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

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

7: Элемент и начинаете масштабировать. Ваш объект будет стоять на месте. Почему? Потому что руки то у него не двигаются, руки у него зажаты и таким образом он не даёт себя никак перемещать здесь все достаточно легко и просто

8: Если же вы поставите привязку, к примеру, по правой стороне, вместо левой вы увидите альтернативное изменение если вы выберете родительский элемент и начнёте смещать влево, то теперь он стоит на месте, но если я возьму родительский элемент и на

9: Ну, с привязкой вверх и вправо увеличивать его в правый угол. Вы увидите, что и центральный объект смещается. Почему вновь-таки? Потому что у нас расстояние между краем вот этим и вот этим должны

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

11: Работают все остальные варианты привязок. Если вы захотите добавить привязку к нижней границе, это легко можно сделать. Убираем верхнюю, добавляем нижнюю. Теперь меняю родительский элемент, масштабирую. Все привязывается, все легко и просто. Ну,

12: Теперь уж напоследок давайте сделаем просто, чтобы вы закрепили знания, выбираем здесь привязка по левой стороне и по нижней. Подумайте, как это будет работать. Подумали и показываю.

13: Наш объект остаётся на одинаковом расстоянии в левую сторону и в нижнюю. При этом справа и сверху расстояние может изменяться без проблем. Окей, это все, конечно, хорошо, но какие же бывают ещё варианты? Ведь 100% что-то ещё есть и

14: Вариантов здесь много, ведь если вы нажмёте, к примеру, на left, вы увидите, что существует ещё привязка left and right, существует привязка центр и существует привязка scale, пройдёмся поэтапно по каждой из них, если вы выбираете привязку left and right, здесь все логично.

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

16: Shift и кликаете на соответствующий маркер. Таким образом вы снимаете привязку, если вы хотите наоборот её добавить вновь-таки вы держите shift и кликаете на нужный вам маркер, можно даже добавить привязку ещё и сверху, тогда у вас будет left

17: Tap and barren все можно добавить мы сейчас все отключаем, оставляем только привязку по левой стороне и по правой. Далее нам необходимо выбрать родительский элемент, и вы увидите, что происходит, если я начинаю тащить объект в правую.

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

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

20: Чивать расстояние по вертикали. Ну окей. Он может это сделать точно. Также у вас по прежнему все остаётся. Привязки остаются слева, справа, расстояние не меняется. Но вы меня спросите, а почему же его тогда так портит? Почему?

21: Почему же он начинает так странно масштабироваться? А все потому, что у нас переключился тумблер в scale. Почему он переключился в scale? Потому что это логичное явление после того, как вы заставили объект прижиматься по левой стороне, по правой стороне соответственно,

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

23: Объект привязываться по центру выбрал центр. Начинаю масштабировать. Ничего не получается по вертикали все получается. Почему? Так? Ещё раз повторяю, за счёт того, что наш дочерний элемент сейчас привязан по бокам.

24: Left and right. Вот это расстояние всегда будет одинаковым, без вариантов. Оно всегда идентично, но мы то выбрали теперь, что у нас вертикальная ось привязывается по центру. Что это значит?

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

26: Scale, тот, который по умолчанию создаётся. Думаю, разница на лицо. Давайте теперь мы с вами сбросим и посмотрим на то, что у нас ещё бывает здесь в случае с привязками возвращаемся здесь в масштаб и выбираем

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

28: Всегда будет находиться в центре, так и происходит. Я сейчас масштабирую монтажную область, чтобы я не делал и по вертикали, и по горизонтали объект находится в центре. За это и отвечает привязка. Центр центр. Конечно же, вы можете комбинировать все.

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

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

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

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

33: Прямоугольник, который отвечает за phone есть логотип, есть какой-то промо текст, а также есть группа с 3 горизонтальными линиями бутерброд, все это объединено в группу, это то, с чего мы начинаем, теперь начинаем.

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

35: У каждого из этих объектов, как вы думаете, почему они себя ведут настолько по разному? Напишите в комментариях для того, чтобы проверить свои знания. Я жду.

36: Даже на паузу поставьте, напишите. Реально это очень полезно. Ну а теперь возвращаемся. Если мы зайдём, к примеру, внутрь логотипа, вы увидите, что у логотипа стоит привязка лефт энд тап. Это значит то, что логотип цепляется.

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

38: Сжимать? Да, он также стоит на месте, он всегда держится своих границ. Окей. Здесь мы разобрались. А что же происходит тогда с фоном? Почему фон у нас себя так ведёт? Если мы зайдём на phone? Мы увидим, что у него привязка. Миксед. Почему? Потому что у нас вообще группа

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

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

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

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

43: Лева и должен быть прижат при этом справа, я это сделал через клавишу shift. Теперь смотрим, как это работает вуаля, вы можете заметить, что теперь у нас наш фон прямоугольник масштабируется.

44: И все супер. Начинаю менять по вертикали. Все прекрасно, все вообще отлично. Мне очень нравится, как это работает. Теперь нам необходимо разобраться с тем, а что же делать тогда с вот этим бутербродом, с этим гамбургером? Здесь все очень просто. Нам необходимо поменять. Привя.

45: С left and топ на right and top. Это позволит нам держаться справа на одинаковом расстоянии. Показываю вам

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

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

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

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

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

51: Бэкстейджем и не только там реально очень классно, но на этом у меня все с вами был Ростислав и увидимся в следующем видео пока