Больше дизайна и меньше ресайза с функцией Auto Layout в Figma UXPUB

Это единственная причина, по которой мы не можем использовать эту страницу в качестве компонента, но это не проблема для коротких страниц, которые размещают 100% своего контента на экране. Атомарный дизайн, примененный к нативному мобильному приложению Instagram. ИсточникРисунок выше иллюстрирует логику, которую я использую для своих компонентов.

Основаня разница в применении этого эффекта выходит из того, что у группы нет своей заливки. Для фрейма с заливкой задан Fill Solid 1%, а внутри и фреймов и группы одинаковые шейпы с непрозрачностью 10 и 20 процентов. Как видите, без заливки увидеть существенную разницу затруднительно.

Выравнивание в Figma: Auto Layout

Шаблон имеет раздел контента, в котором мы собираем все динамические элементы, и несколько компонентов, которые находятся на своих местах (хлебные крошки, заголовок раздела). В этом артборде настрой только Spacing между частями ячейки, разумеется переключи лэйаут по горизонтали, это же горизонтальный компонент. За последние года полтора, я нашёл себя в создании и оптимизации дизайн-систем, а инструменты для дизайна начали подыгрывать мне и постоянно подкидывают новый функционал на изучение.

Например, на первый взгляд простое обновление текста кнопки требует слишком много шагов – редактирование текста, изменение размера кнопки, перемещение соседней кнопки и т. Панель Auto Layout 2022Итак, на основной панели как и прежде можно настроить наравление, выравнивание и отступы. Поле Resizing (3 на скриншоте) — вы можете указать поведение фрейма при изменении размера его вложенных элементов. Он может полностью «обнимать» контент внутри «Hug contents», либо иметь фиксированное значение Fixed. Этот совет позволяет размещать объекты за пределами auto layout, что, как правило, невозможно, потому что Figma не допускает отрицательных значений. Если менять размеры и расположение слоев внутри фрейма, это никак на него не повлияет, если для фрейма не используется Auto Layout.

Центрируйте элементы с помощью заголовка

Auto-layout позволяет создавать динамические фреймы, которые реагируют и изменяют размер в соответствии с их содержимым. Создайте фрейм, добавьте контент и преобразуйте фрейм в auto-layout (либо через панель свойств справа, либо нажмите Shift + A). Фрейм auto-layout теперь httpss://deveducation.com/ будет адаптироваться к изменению содержимого. Фрейм auto-layout может быть вложен по вертикали и горизонтали для создания изысканных компонентов и даже целых страниц. Когда у вас есть множество фреймов auto-layouts, перемещение по дочерним элементам может стать запутанным.

Это компонент Auto Layout с несколькими компонентами атомных кнопок внутри. Ниже вы можете увидеть страницу, которую я буду использовать в качестве примера. Это настоящая страница, которую я разработал и использую в проекте, над которым я работаю на Chainstack.com. В этом посте я остановлюсь только на компонентах, которые используют Auto Layout. Если вы не знакомы с концепциями атомарного дизайна, я настоятельно рекомендую вам сначала прочитать больше об атомарном дизайне. Укажите горизонтальные отступы в настройках и внешние отступы основного фрейма в настройках или .

Это базовый компонент кита, который покрывает большинство кейсов. Если мне понадобится что-то добавить, я добавлю, а если нужно сделать редизайн общего стиля, то кастомизирую детальки компонента и вуаля. Вторым отличием, исходя из того, как группы ведут себя относительно вложенного контента, будет то, что размер группы может отличаться. Для фрейма можно использовать Stroke в ее классическом понимании.

Canvas stackingБезусловно полезная функция, позволяющая задать порядок слоев во врейме. Если выбран First on top, то первый элемент будет выше в древе слоёв. Это хорошо видно по тени, падающей сверху вниз, которую не перекрывает следующий элемент.

Рисуем Frame и включаем вертикальный Auto layout с фиксированной шириной, которая тебе нужна в дизайне, — это контейнер ячейки, в котором кроме слоя с контентом и Padding’ов больше ничего не будет. Удерживайте пробел, чтобы не размещать объекты внутри автоматического auto-layout. У Роджи Кинга есть руководство на YouTube, где он объясняет этот хитрый трюк. Для этого создайте фрейм с нулевой высотой, поместите на него объекты, а затем установите высоту 0,001 для округления до 0. Сэкономьте время, скопировав стиль любого контейнера auto-layout с помощью сочетания клавиш OPTION + CMD / CTRL + C и вставив его с помощью OPTION + CMD / CTRL + V. Spacing modeSpacing mode не является чем-то новым и как и прежде указывает, задаются ли расстояния между элементами вручную или рассчитываются автоматически, исходя из заданной ширины фрейма.

Одинаковая высота для всех дочерних элементов!

Так, можно задать отступы от краев, расстояние между элементами и выравнивание. Кроме того, все компоненты на странице очень гибкие и отзывчивые, и я могу использовать их во всех моих файлах дизайна. В случае каких-либо изменений в дизайне страницы, я могу обновить их в своей библиотеке, и она автоматически обновит все мои файлы дизайна. Основной headerЯ не добавил основной заголовок в окончательный шаблон, потому что компоненты в Figma не поддерживают фиксированное положение при прокрутке его элементов.

Когда у вас много auto layout, структура фреймов внутри может начать усложняться. Не бойтесь, есть несколько горячих клавиш, которые помогут вам с легкостью перемещаться по его дочерним элементам. А для правой части – горизонтальный Fixed height, размер которой поставь по высоте средней левой части, в моём случае – 48pt. Он дает возможность работать в свободной форме, используя такие ключевые концепции, как кривые, слои и группы. Но эта природа свободной формы может привести к множеству повторяющихся действий.

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

Идёшь в самый низкоуровневый слой и делаешь из него компонент. Auto layout StrokesStrokes могут быть Included или Excluded, и разница заключается в том, что в первом случае обводка начинается уже после пэддинга, а во втором находится внутри. Еще один большой организм — это компонент таблицы, но он очень простой. Здесь нам нужен первый компонент Auto Layout, чтобы отделить заголовок от тела таблицы. Последний уровень — это компонент строки с несколькими атомными компонентами внутри. Этот слой отделяет раздел содержимого от заголовка раздела («Подробности»).

Затем размер фрейма определяется общим размером элементов в нем. Фреймы Auto Layout могут иметь свои собственные отступы, заливку, обводку и радиус угла, поэтому вы можете создавать кнопки без добавления дополнительных слоев. Используя функцию auto-layout и значение отступа «space between», довольно легко создать регулируемый компонент слайдера для диапазона значений, количества или индикатора auto layout в figma выполнения. Посмотрите видео по ссылке выше, чтобы узнать, как это сделать. Размеры фрейма и группФрейм является самостоятельным элементом и для него можно задать необходимые вам размеры (например, разрешение экрана смартфона или блока). Исходя из того, что группы являются объединением вложенных в них элементов, то их размеры зависят от расположения крайних по двум осям слоёв.

Выравнивание и распределение

Он размещает внутри контейнера auto layout фрейм с фиксированной минимальной шириной и задает ему значение высоты, равное 0. Таким образом, можно зафиксировать минимальную ширину (или длину) контейнера auto layout, чтобы он не становился меньше, если текст недостаточно длинный. Теперь предыдущие компоненты с деталями закидываем в дополнительные контейнеры, и включаем лейауты. Когда вы добавляете Auto Layout к фрейму, элементы внутри располагаются рядом друг с другом (вертикально или горизонтально).

Это звучит знакомо, если вы ранее использовали ограничения. Теперь auto-layout и ограничения (называемые resizing во фрейме auto-layout) идут рука об руку, что несомненно меняет правила игры. Space between → автоматически определяет пространство, равномерно распределяя дочерние элементы. Теперь переходим к самим деталям ячейки, но через несколько шагов вернемся к «пустым» контейнерам.

советов по работе с Auto-Layout в Figma

В этой статье я покажу хардкорное применение последнего нововведения в Figma –Auto layout. Как и со многими другими проблемами дизайна, конечный результат может показаться очевидным. Благодаря внедрению Auto Layout, в качестве свойства, вы можете гибко и эффективно применять ее к любому фрейму, независимо от того, находится он в компоненте или нет.

Стрелка ↓ означает вертикальное выравнивание, а→— горизонтальное. Fill container→ Как вы уже догадались, растягивается, чтобы заполнить родительский контейнер по высоте или ширине, что очень важно для адаптивного поведения. Доступно только для объектов внутри фрейма auto-layout.

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

Формируешь компонент из слоя уровнем выше, что заставит нижнеуровневый компонент выпрыгнуть рядом, оставив внутри свой инстанс. Если мне понадобится что-то добавить, я добавлю, а если нужно сделать редизайн общего стиля, то кастомизирую детальки компонента — и вуаля. Не нужно собирать компонент ячейки в каждом проекте заново. В совете 6 Роджи Кинг показал нам, что мы можем создать контейнер auto-layout с минимальной шириной или высотой. Удерживайте ПРОБЕЛ при размещении объекта внутри auto layout, чтобы расположить его так, как вам нужно, и избежать его автоматического размещения. Первый слой помогает нам создавать отступы вокруг контента.

Теперь у меня есть отличные адаптивные настройки и инструменты, но я вижу, что соотношение сторон моего изображения нарушается всякий раз, когда я меняю размер, что очень досадно. Судя по всему, эта функция находится в процессе разработки, поэтому я проявлю терпение и буду изменять размер вручную. По сути, я скруглил края аватарки в левой части, добавил кнопку (тоже на лэйаутах) в правую часть, и ячейка уже подходит под другое приложение. В этом артборде настрой только Spacing между частями ячейки, разумеется, переключи лэйаут по горизонтали, это же горизонтальный компонент. За последние года полтора я нашёл себя в создании и оптимизации дизайн-систем, а инструменты для дизайна начали подыгрывать мне и постоянно подкидывают новую функциональность на изучение.

У групп нет своих размеров отдельно от контента внутри, поэтому их размер меняется вместе с размерами и положением слоев внутри, а если изменить размеры группы, то будут изменены и размеры слоёв. На это уходит секунда, тем более что здесь вы можете сочетать много настроек. Распределение позволяет вам выбирать, как выровнять дочерние объекты внутри фрейма auto-layout. С текстовыми контейнерами дела обстоят поинтереснее, их нужно сделать столько, сколько у нас размерностей левой части. В моей демке есть маленькая иконка, средняя картинка и большая картинка, поэтому я сделал три контейнера, обычно больше и не требуется.