Представьте, что UI-kit на примере — рабочий макет с сеткой. Горизонтальные направляющие воздухом разделяют макет между вертикальными блоками. Вертикальные направляющие — между горизонтальными блоками. Сетка задаёт вертикальный и горизонтальный ритм макету.
Теперь разделим макет визуально на отдельные блоки и пронумеруем их, а также укажем, какие отступы будут одинаковыми.
Первый уровень иерархии проработали и получаем 3 блока, отступы между ними должны быть равны. Помещаем эти 3 блока в автофрейм (Shift + A).
Затем нам надо создать первый квадрат, равный размеру этого отступа в 42 пикселя (опираясь на пример). Превращаем квадрат в компонент, а его «дочку» помещаем как раз в наш созданный автофрейм, дублируем его и оба экземпляра размещаем на тех местах, где должен быть отступ. В настройках автолейаута после этого отступ можно убрать — достаточно будет наличия квадрата.
Затем спускаемся на уровень иерархии ниже и между нашими колонками создаём отступ 30 пикселей. Также превращаем колонки в автолейаут а между ними размещаем экземпляр компонента со вторым квадратом, но его размер делаем 30 пикселей.
Проделываем всё это со вторым рядом колонок — там, где поля с лейблами и Textarea. Там тоже будет квадрат с размером 30 пикселей. Остается покрасить наши квадраты в цвет фона и всё готово.
Результат
Ну а вот сам результат. При изменении мастер-компонентов, будут меняться все отступы между элементами, где присутствует экземпляр соответствующего квадрата.
А зачем это всё?
«Можно просто поменять вручную настройки автолейаута» — скажете вы. Я отвечу — «да». А если ваш макет превратиться в такой и надо будет поменять его сетку?
P.S. увы, когда в макетах идёт «борщ» с автолейаутами и всё строится на них, возможны баги. Но, может, вам повезёт =)
P.P.S. плюсаните, если не жалко и узнали что-то новенькое =)
Как же данный Виталий пытается очиститься от говна, перепечатывая гайды самой фигмы, а еще рофельнее будет, если это является частью «курса для веб-дизайнеров», который он за 100+к. толкает, в чем я почти не сомневаюсь. Но я освежу память читающим — https://vc.ru/claim/326047-opyt-vozvrata-deneg-za-obuchenie-dizaynu-u-yakovlevv-com
Спасибо за ваш «мега выдающийся» и очень нужный всем комментарий о «данном Виталии». Прям очень по теме. Для таких, как вы, кто даже не углублялся в курс дела, просто оставлю это здесь. Хотя, таким, как вы, на это, скорей всего наплевать. Зачем вам изучать какой-то вопрос перед тем, как что-то «серануть» на VC, вы ведь даже фамилию написали как у меня и только сегодня тут зарегистрировались просто ради этого поста, потому что у вас пятая точка горит от своей бесполезности и ненужности в этом мире. Добро пожаловать в ЧС. Хотя вам и до 2025 года будет нечего делать, кроме как напоминать под каждой статьей то, как я оступился. Занялись бы лучше чем-то полезным в жизни. «Рофельнее» всего ваша регистрация тут с единственной целью — оставить комментарий, чтобы насрать. Для таких целей без всяких регистраций и SMS можно сходить на унитаз, а не на VC.
Мне льстит то, что в своем плотном графике, полном успеха, вы уделили время на генерацию мысли, написание этого текста, проверили дату создания аккаунта, еще и на ютуб за своим роликом потянулись, ссылочку скопировали. Даже совет дали — «занялись бы лучше чем-то полезным в жизни». Но прелесть в том, что это Интернет — и в нем каждый волен делать все, что хочет. Кто-то хочет писать вам такие «гадкие» комментарии, и наблюдать за тем, как вы чутко на них отвечаете, дабы не навредить свой, кх-м, «репутации». Наблюдать за тем, как вы судите что есть полезно/бесполезно, чем занимается человек и тп., основываясь только на своей системе ценностей. Вообщем — помечу в своем календарике даты до 2025, чтобы мелькать в комментариях к вашим «полезным», по вашему мнению, статьям, делать-то все равно нечего.
Не устали аккаунты новые создавать? Или от того профиля, что выше пароль забыли? :D
Собираю коллекцию ваших аватарок в разных градиентах, потом на NFT пойду, когда ваш «успех» достигнет небывалых высот.
А чего просто не добавить сетку странице и не привязать эти компоненты к этой сетке с двух сторон, и верх низ по необходимости?
Просто вариант квадратами и автолейаутами накрываются в тот момент когда скажем у нас 6 колонок, и 3 элемента например на 2,1,3 колонки. Да даже если 3 колонки и нужно сделать 2 и 1.
Сетка может отличаться, в одном горизонтальном блоке может быть 3 колонки, в следующем — 5 колонок. В этом случае сетка рушится. А система отступов и использование спейсеров рушиться не будет.
На какие только извращения не приходится идти людям без классов и переменных :-(