UX-исследователь — практический курс
UX-исследователь — практический курс
Начните карьеру в области UX или структурируйте свои знания с помощью уникального на рынке курса по UX-исследованию
Узнать подробнее

Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна

Функция auto-layout появилась в Figma в 2019 году. Это хорошая функция, но, честно говоря, я редко использовал ее в своей повседневной работе. В основном потому что она немного «сходила с ума» от адаптивных ограничений, которые я часто использую. Но все изменилось с ноябрьским обновлением Figma.

Что такое auto layout?

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

Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна

Так что же изменилось?

Все меню auto-layout было переработано и стало намного лучше, тем более что вы можете объединить новые функции с ограничениями (называемыми resizing фреймов auto-layout). Позвольте мне подробнее рассказать об этих изменениях. Вы можете скачать официальный файл по auto-layout. Очень рекомендую!

1. Индивидуальная настройка отступов

Теперь вы можете настроить внутренние отступы индивидуально для левого, правого, верхнего и нижнего края. Очень удобно!

Управление пользовательским опытом
Управление пользовательским опытом
Вы научитесь анализировать и улучшать клиентский опыт, создавать продукты и предоставлять сервисы, нужные клиентам, внедрять сервисные инновации
Забронировать место
Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна
Индивидуальные отступы
Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна

💡 Небольшая хитрость: вы также можете вводить значения, как в CSS, через запятую, например, 10, 25, 15, 20 (top right bottom left padding) или 10, 20 (top/boom, left/right). Так намного быстрее!

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

Объекты можно выровнять по горизонтали или вертикали, как и в предыдущей версии. Однако приятным дополнением стала возможность выровнять дочерние элементы фрейма auto-layout с помощью нового инструмента выравнивания. Самое главное, они сохраняют заданные внутренние отступы. По сути, это конец инструмента выравнивания в прежнем виде (хотя, он все еще находится в самом верху панели свойств справа).

Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна
Выравнивание

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

Packed → самостоятельно определяйте расстояние между ними

Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна

Space between → автоматически определяет пространство, равномерно распределяя дочерние элементы.

Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна

3.Новое меню изменения размера

Resizing определяет поведение объекта при изменении размера родительского фрейма или его содержимого. Это звучит знакомо, если вы ранее использовали ограничения. Теперь autolayout и ограничения (называемые resizing во фрейме autolayout) идут рука об руку, что несомненно меняет правила игры.

Есть три варианта, и вы можете комбинировать их по высоте и ширине друг с другом!

Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна
Варианты
Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна
Изменение размера
  1. Hug contents→ помимо того, что это самое красивое название функции интерфейса, с которым я когда-либо сталкивался (особенно во время пандемии). Это по сути старая версия настройки auto-layout: фрейм всегда соответствует своему содержанию по высоте и / или ширине.
  2. Fixed → Сохраняет фиксированную ширину и / или высоту при изменении размера родительского элемента.
  3. Fill container→ Как вы уже догадались, растягивается, чтобы заполнить родительский контейнер по высоте или ширине, что очень важно для адаптивного поведения. Доступно только для объектов внутри фрейма auto-layout.

4. Новые параметры вложенного изменения размера в действии

Отзывчивый и адаптивный к содержимому. Наконец-то!

Прелесть в том, что вы можете смешивать и сочетать все параметры, чтобы создавать мощные адаптивные элементы. Как упоминалось ранее, auto-layout и ограничения не работали вместе. Теперь вы можете применить адаптивное поведение и сохранить все настройки интервалов при изменении содержимого. Это станет большим преимуществом для моего рабочего процесса!

Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна
Отзывчивый и адаптивный к содержимому

Смешивание фиксированных и адаптивных настроек

Раньше это было возможно, но весьма сложно. Теперь нужно всего лишь несколько кликов. Внутри фрейма auto-layout вы можете установить часть элементов, как фиксированные, а часть – со смешанными фиксированными и плавными настройками.

Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна
Смешивание фиксированных и плавных настроек

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

Если у вас много содержимого в контейнере, но вы хотите, чтобы все элементы имели одинаковую высоту, просто настройте все дочерние элементы так, чтобы они заполняли контейнер по высоте, а к родительскому фрейму autolayout примените параметр hug contents по высоте. Готово! Как ни странно, сейчас это труднее сделать в CSS, чем в Figma!

Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна
Одинаковая высота для всех элементов

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

Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна

Обязательно ознакомьтесь с официальным файлом по auto-layout от Figma. В нем вы найдете еще много удивительных примеров!

5. Обновление режима проверки (Inspect mode)

Новая функция также отображается на панели Specs. Вы увидите, что она переводит его на flexbox, а также показывает некоторое общее поведение.

Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна

6. Мне все еще не хватает одной вещи: фиксации соотношения сторон изображений!

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

Кстати, если вы хотите и дальше использовать сетки с ограничениями

Я немного беспокоился об этом, так как все мои файлы настроены с помощью адаптивных сеток. Это не проблема. Просто сохраните фреймы с сетками такими, какие они есть (поэтому не добавляйте autolayout в родительский фрейм, содержащий сетку!). Затем в этом родительском фрейме вы можете добавить autolayout ко всем элементам. Таким образом, вы можете оставить в ограничениях настройку «left & right», чтобы заблокировать объект auto-layout для столбцов контента.

CSS-сетки можно настроить с помощью autolayout, и я скоро напишу об этом статью с примерами. Так что не забудьте подписаться или посетить moonlearning.io

guest
0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Архитектура компонентов в Figma
Подробнее

Архитектура компонентов в Figma

Вот несколько идей, как вы можете максимизировать модульность, а в некоторых случаях сократить количество необходимых компонентов.
Total
10
Share