Перейдите в панель Inspect, и вы увидите новую матрицу трансформации, примененную к вашему контейнеру. Auto Layout — функция, которая появилась в Figma в 2019 году и сразу завоевала любовь дизайн-сообщества. Auto Layout стал популярным среди дизайнеров и разработчиков на протяжении последних лет, благодаря своей гибкости и универсальности. Он может быть использован для создания любых типов интерфейсов, от веб-страниц до мобильных приложений, и может значительно упростить процесс дизайна и разработки.
- Auto Layout позволяет создавать контейнеры, которые могут содержать другие элементы интерфейса, такие как кнопки или изображения.
- В этом случае настройки макета устанавливаются в горизонтальное положение.
- Если вы хотите сохранить пропорции элементов, читайте подробнее о плейсхолдерах с фиксированным соотношением сторон здесь.
- Auto Layout стал популярным среди дизайнеров и разработчиков на протяжении последних лет, благодаря своей гибкости и универсальности.
- Вспомните коллекции аватаров, поля форм, выпадающие списки или даже карточки.
Допустим, вы хотите спроектировать выпадающий список фильтров с переменным количеством опций одного типа (чекбоксы или радиокнопки). Поместите ваш блок лейаута auto layout figma внутрь выпадающего списка и поменяйте базовый элемент на чекбокс. Не забудьте включить Expose nested instances на компоненте выпадающего списка.
Выравнивание в Figma: Auto Layout
Стрелки указывают, как будут выстраиваться элементы внутри фрейма с Auto Layout. Стрелка ↓ означает вертикальное выравнивание, а → — https://deveducation.com/ горизонтальное. Если у каждой стороны должен быть свой отступ, нажмите на иконку и укажите нужные значения в дополнительном меню.
В нашем случае это отступ 18px слева и справа, и 9px сверху и снизу. Точного размера можно добиться с помощью метода нулевого фрейма. Создайте 2 фрейма размером 0 x 0 пикселей и добавьте для них горизонтальный Auto Layout с параметром “Hug contents”.
Вложенные компоненты
Auto Layout творит чудеса в сочетании с плейсхолдерами и свойством Instance Swap. Две эти концепции вместе составляют технику повторяющейся сетки, которая позволяет создавать сверхгибкие дизайн-системы. Ее можно использовать всякий раз, когда вам нужен компонент с переменным количеством повторяющихся элементов. Вспомните коллекции аватаров, поля форм, выпадающие списки или даже карточки.
Он размещает внутри контейнера auto layout фрейм с фиксированной минимальной шириной и задает ему значение высоты, равное 0. Таким образом, можно зафиксировать минимальную ширину (или длину) контейнера auto layout, чтобы он не становился меньше, если текст недостаточно длинный. Это тип плейсхолдера, который состоит из вариантов, созданных при помощи фреймов с Auto Layout и базовых компонентов.
Auto Layout в Figma на русском языке
Функция Auto Layout не учитывает пустое пространство, она учитывает только размер элементов внутри компонента. Однако, это не подходит для тех, кто использует подобную систему. Выберите контейнер с Auto Layout и нажмите Shift+H, чтобы отразить его по горизонтали (Shift+V, если нужно отразить по вертикали). Сначала ваш дизайн может выглядеть неудовлетворительно, но не волнуйтесь и доверьтесь мне.
Наша компания, GatherContent, была на полпути к созданию дизайн-системы и мы переключились на Figma, чтобы извлечь максимальную пользу из среды совместной работы. Но тут Sketch выпустил новую функцию и заставил нас переоценить свое решение. Тем не менее, мы продолжили создавать дизайн-систему в Figma, периодически оглядываясь назад, чтобы увидеть забавные изменения, происходящие в Sketch. Когда у вас много auto layout, структура фреймов внутри может начать усложняться. Не бойтесь, есть несколько горячих клавиш, которые помогут вам с легкостью перемещаться по его дочерним элементам. Кнопка сама адаптируется под длину текста благодаря параметру Resizing — изменение размера.
Советы по функции Auto Layout в Figma
Вы настраиваете внутренние отступы с помощью элементов управления на правой панели. Этот мощный инструмент позволяет сэкономить много времени и усилий. Используйте его для создания автоматически настраиваемых UI-элементов. Вы также можете создавать гибкие компоненты и оптимизировать свои библиотеки дизайна с помощью плейсхолдеров.
Разумеется, для каждого из этих компонентов модуля, а также для главного компонента, включена функция Auto Layout. Именно эта вложенность позволяет органически изменять размер всего компонента в зависимости от его содержимого, даже когда я изменяю текст слоя описания. Auto Layout позволяет создавать контейнеры, которые могут содержать другие элементы интерфейса, такие как кнопки или изображения.
советов по работе с Auto-Layout в Figma
Ширина этого контейнера контролируется расстоянием между его дочерними элементами. Дублируйте этот фрейм и поверните его на 90 градусов, чтобы создать регулятор высоты. И наконец, поместите этот контейнер и контроллер ширины в другой фрейм с Auto Layout. Теперь вы можете свободно изменять размеры, регулируя расстояние внутри ваших контроллеров. Неплохо было бы иметь landing маркеры, чтобы я мог видеть, где мои компоненты появятся, но погодите, улучшения еще впереди.
Следующий шаг — нажать Enter, чтобы выделить все дочерние элементы. Затем нажмите Shift+H (Shift+V соответственно), чтобы отразить все элементы Auto Layout в обратном направлении. Будучи дизайнером, вы можете представлять себя кем-то вроде безумного ученого, тщательно смешивающего все элементы, чтобы создать связное, визуально привлекательное целое. И как любой безумный ученый, вы можете быть перфекционистом и стремиться к тому, чтобы все было точно и идеально до пикселя. Каждое из этих поведений можно настроить индивидуально для каждого контейнера с Auto Layout. В меню параметра указывают размер каждого внешнего поля и выравнивание объектов внутри модуля с Auto Layout.