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

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

Дублируйте этот фрейм и поверните его на 90 градусов, чтобы создать регулятор высоты. И наконец, поместите этот контейнер и контроллер figma auto layout ширины в другой фрейм с Auto Layout. Теперь вы можете свободно изменять размеры, регулируя расстояние внутри ваших контроллеров.

Секреты Figma Auto Layout

Это тип плейсхолдера, который состоит из вариантов, созданных при помощи фреймов с Auto Layout и базовых компонентов. Каждый последующий вариант включает на один элемент больше, чем предыдущий. Затем вы устанавливаете свойство Instance Swap для блока лейаута.

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

Почему это последняя в твоей жизни ячейка?

И как любой безумный ученый, вы можете быть перфекционистом и стремиться к тому, чтобы все было точно и идеально до пикселя. По сути, я скруглил края аватарки в левой части, добавил кнопку (тоже на лэйаутах) в правую часть, и ячейка уже подходит под другое приложение. В меню параметра  указывают размер каждого внешнего поля и выравнивание объектов внутри модуля с Auto Layout. Стрелки указывают, как будут выстраиваться элементы внутри фрейма с Auto Layout. Стрелка ↓ означает вертикальное выравнивание, а → — горизонтальное.

Чтобы ячейка была гибкой и при этом растягивалась от контента внутри, нужно правильно настроить контейнеры деталей, которые ты сделал на предыдущем шаге, тут и кроются мелкие фишечки. Есть масса механик ячейки, описать все не получится, но, думаю, этой основной механики будет достаточно на первое время. Когда у вас много auto layout, структура фреймов внутри может начать усложняться.

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

Выше указана ссылка на обучающее видео, чтобы можно было лучше понять, как это сделать. Кнопка сама адаптируется под длину текста благодаря параметру Resizing — изменение размера. По умолчанию Figma в Resizing использует свойство Hug contents — форма фрейма с активной функцией Auto Layout подстраивается под длину и высоту содержимого. Инструмент Auto Layout в Figma позволяет указывать отступы и выравнивать соседние модули автоматически. Рассмотрим, как пользоваться Auto Layout, на примере кнопки, модуля и страницы.

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

Модуль

За последние года полтора я нашёл себя в создании и оптимизации дизайн-систем, а инструменты для дизайна начали подыгрывать мне и постоянно подкидывают новую функциональность на изучение. В этой статье я покажу хардкорное применение последнего нововведения в Figma — Auto layout. Соберём страницу из трёх модулей, каждый из которых имеет отступы 60 пикселей. Если у каждой стороны должен быть свой отступ, нажмите на иконку  и укажите нужные значения в дополнительном меню. В панели Design укажите, что и сколько раз вы хотите продублировать. Блок лейаута предоставляет вам доступ к вариантам количества и списку экземпляров для подмены.

• Кроме того, он помогает создавать универсальные компоненты, которые адаптируются к различным размерам экрана.
• Следующий шаг — нажать Enter, чтобы выделить все дочерние элементы.
• И наконец, поместите этот контейнер и контроллер ширины в другой фрейм с Auto Layout.
• На этом этапе вы также можете выбрать предпочтительные компоненты.

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

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

Эта инструкция всё ещё может помочь вам освоить работу с Auto Layout, но если вы только начали пользоваться Figma, советуем прочитать обзор последних https://deveducation.com/ обновлений. Рассказываем, что такое Auto Layout и как с помощью него можно аккуратно и быстро сверстать кнопку, модуль и страницу.

Не забудьте включить Expose nested instances на компоненте выпадающего списка. Выберите контейнер с Auto Layout и нажмите Shift+H, чтобы отразить его по горизонтали (Shift+V, если нужно отразить по вертикали). Сначала ваш дизайн может выглядеть неудовлетворительно, но не волнуйтесь и доверьтесь мне. Следующий шаг — нажать Enter, чтобы выделить все дочерние элементы. Затем нажмите Shift+H (Shift+V соответственно), чтобы отразить все элементы Auto Layout в обратном направлении. Расстояние между объектами может обозначаться положительным или отрицательным числом.