Новый auto-layout в Figma за 5 минут
Новый auto-layout в Figma обновили и анонсировали в мае 2022 года. Некоторые вещи в нем остались без изменений, некоторые функции оказались совершенно новыми, а некоторые элементы просто переместили или дополнили приятными мелочами, которые тоже советуем не пропускать.
У многих возникли проблемы с тем, чтобы разобраться в новых функциях и понять, как использовать старые в новых условиях. Уделите нам 5 минут времени, и мы расскажем обо всем, что касается нового auto-layout.
Видеоверсия этого туториала здесь:
1. Применение auto-layout: такое же, как раньше
Применим к моей карточке auto-layout. Используем старую добрую комбинацию shift + A либо воспользуемся меню (по правой кнопке мыши).
Однако обратите внимание, что теперь слои располагаются в том порядке, в котором они показаны на холсте, что стало намного более логичным! Спасибо Figma за это, старый обратный порядок меня действительно раздражал.
2. Меню auto-layout: те же функции, новый вид
Внешний вид меню автомакета изменился, давайте разберемся.
Направление и расстояние работает так же, как и раньше. Можно установить горизонтальное и вертикальное отступы, как и раньше, а если захотите, чтобы отступы были индивидуальными, откройте параметры всех сторон. Довольно стандартно. Выравнивание переместилось из подменю в главное меню, но работает так же (обратите внимание на некоторые приятные шорткаты из меню выравнивания).
�� СОВЕТ: cmd + щелчок для нотации CSS
Зажмите cmd и кликните на поле заполнения . Теперь вы можете использовать запятую, как в CSS. Или введите одно значение для всех. Мелочь, а приятно!
3. Новинки: возможность регулирования на холсте ��
Помимо меню auto-layout, теперь у вас есть и элементы управления на холсте. Если вы наведете курсор на рамку auto-layout, вы увидите маленькие розовые маркеры, которые сможете перетаскивать. Это работает для настройки расстояния и заполнения.
�� СОВЕТ: увеличьте с помощью установленных значений смещения
Удерживайте Shift при перетаскивании, увеличивая и уменьшая заданные значения смещения.
�� СОВЕТ: нажимайте на области auto-layout, чтобы установить конкретное значение
Нажмите на области интервалов auto-layout, выделенные розовым цветом на холсте, чтобы установить конкретное значение.
�� СОВЕТ: Равные горизонтальные и вертикальные отступы
Удерживайте alt при перетаскивании, чтобы получить одинаковые отступы для регулировки по горизонтали или вертикали. Или удерживайте shift + alt при перетаскивании, и все отступы изменятся одинаково.
4. Новинки: отрицательный интервал! ��
Хорошо, вот это то нововведение, которое меня действительно радует. Теперь можно установить отрицательное расстояние между элементами, что означает, что вы можете «складывать» элементы стопкой!
Итак, у меня есть карточки с auto-layout, и я добавлю еще одну. Теперь я могу использовать элемент управления на холсте или меню, чтобы установить отрицательное значение интервала между ними и создать стопку. Это работает и в случае вертикального, и в случае горизонтального выравнивания.
А еще это очень крутая вещь для создания прототипов, столько новых возможностей!
Расширенное меню
Если щелкнуть по трем точкам в меню auto-layout, откроется меню расширенной компоновки.
5. Режим интервала: те же возможности, но с новыми приятными сочетаними клавиш
Начнем с моих любимых, packed и space between. Здесь не много нового. Так же, как и в старом auto-layout, по умолчанию используется packed, который сохраняет установленный интервал между вашими элементами. Для отступа между ними будет использоваться все доступное пространство, благодаря чему будут создаваться равные промежутки между непосредственными дочерними элементами.
�� СОВЕТ: переключайтесь с помощью меню выравнивания + X
Это очень удобно, поскольку я часто использую эти параметры и мне часто нужно копаться в меню. Используйте поле выравнивания и нажимайте X для переключения между space between и packed.
�� СОВЕТ: введите «auto», чтобы установить space between
Нажмите на маркер регулирования расстояния на холсте и введите «auto» в поле ввода значений. Так вы переключитесь на режим space between. Если вы добавите значение, все вернется в режим packed.
6. Новинки: теперь можно включить exclude stroke (внешний контур)
В расширенном меню auto-layout теперь можно найти возможность включить или исключить обводку, что очень удобно для избегания «столкновений» элементов. Плюс это делает компоненты более аккуратными.
7. Новинки: изменение порядка наложения
Здесь вы можете изменить порядок наложения, если у вас есть элементы с отрицательным интервалом. Обратите внимание, что это не меняет порядок в меню слоев!
Помимо порядка наложения вы также всегда можете использовать старые добрые стрелки клавиатуры — это изменит порядок слоев.
8. Новинки: выравнивание текста по базовой линии
Для этого вам нужен хотя бы один текстовый элемент. В расширенном меню теперь можно выбрать выравнивание по центру (по умолчанию) или по базовой линии текста.
�� СОВЕТ: переключайтесь с помощью меню выравнивания + B
Выберите поле выравнивания и нажмите B , чтобы переключить выравнивание текста на параметр «по базовой линии».
9. Новинки: абсолютное позиционирование ��
Этот тоже фантастика. Теперь вы можете установить для элемента абсолютное позиционирование. Сначала вам нужно перетащить его в рамку auto-layout, а затем вы увидите опцию абсолютного позиционирования в меню фреймов. Когда элемент позиционируется абсолютно, вы можете перемещать его, куда хотите, и установить ограничения. Это отлично подходит для таких вещей, как пузырьки оповещения и предупреждения. Абсолютно крутая функция!
�� СОВЕТ: проверяйте точность значений в режиме Inspect mode
10. Меню изменения размера: как раньше, только в новом месте и с новыми шорткатами
Я была немного шокирована, когда впервые открыла новый auto-layout, поскольку меню изменения размера исчезло! Но нет! Оно просто переместилось в секцию настройки фрейма. Оно работает так же, как и старое доброе меню изменения размера, но в нем есть несколько новых приятных шорткатов.
�� СОВЕТ. Используйте новые сочетания клавиш для изменения размера.
Hug vertical → дважды щелкните по верхней или нижней линии рамки в auto-layout.
Hug horizontally → дважды щелкните по левой или правой линии рамки в auto-layout.
Заполнить контейнер → удерживайте alt , нажимая то же, что описано выше.
11. Все нравится, но чего еще не хватает:
Как обычно, впечатлена последним обновлением. Но все еще надеюсь, что скоро появится нормальная настройка соотношения сторон для изображений! О, как бы хорошо было иметь встроенное соотношение сторон, потому что тогда бы я смогла прекратить использовать хакерские (тем не менее отличные) решения. Также для таких дислектиков, как я, полная интеграция Grammarly была бы просто сказкой!
Перестань рисовать ячейки — большой гайд по Figma Auto Layout
За последние года полтора я нашёл себя в создании и оптимизации дизайн-систем, а инструменты для дизайна начали подыгрывать мне и постоянно подкидывают новую функциональность на изучение. В этой статье я покажу хардкорное применение последнего нововведения в Figma — Auto layout.
- Не нужно собирать компонент ячейки в каждом проекте заново.
- UIkit получается компактным, но при этом легко кастомизируемым.
- Ускоряет создание диза… Ой ладно, это просто круто!
Вот такие штуки можно делать после этого гайда. Если хочешь так же, открывай фигму, сейчас научу 🙂
Это и есть наша ячейка, разложенная по частям:
- Какие-то форматы картинок слева.
- Текст по центру.
- Различные контролы справа.
Сейчас объясню, за что отвечает каждый из чёрных квадратов и почему их столько.
Ссылка на этот Figma-проект есть в Telegram-канале. Там я всё аккуратно разложил по полочкам и добавил подсказки, а то когда я пришёл к такой ячейке в первый раз, было примерно так 😀
Рисуем Frame и включаем вертикальный Auto layout с фиксированной шириной, которая тебе нужна в дизайне, — это контейнер ячейки, в котором кроме слоя с контентом и Padding’ов больше ничего не будет.
Примечание 1: в компонентах на лэйаутах часто получается много «пустых» слоёв, не паникуй, они все чуть-чуть влияют на компонент.
Примечание 2: каждый нарисованный шаг заводи в компонент, чтобы в дальнейшем можно было всё кастомизировать по отдельности, не затрагивая всю ячейку.
Следующий этап — слой с контентом. В этом артборде настрой только Spacing между частями ячейки, разумеется, переключи лэйаут по горизонтали, это же горизонтальный компонент.
Теперь переходим к самим деталям ячейки, но через несколько шагов вернемся к «пустым» контейнерам.
Это детальки, которые я использовал для демо, у тебя их может быть гораздо больше (помнишь скриншот моей первой ячейки? :). Естественно заведи все эти детали в компоненты. У текстового компонента обязательно включи лэйаут c Fixed width, потом нам это понадобится.
Чтобы ячейка была гибкой и при этом растягивалась от контента внутри, нужно правильно настроить контейнеры деталей, которые ты сделал на предыдущем шаге, тут и кроются мелкие фишечки. Есть масса механик ячейки, описать все не получится, но, думаю, этой основной механики будет достаточно на первое время.
С левой частью всё легко. Просто группируем и включаем лейаут.
С текстовыми контейнерами дела обстоят поинтереснее, их нужно сделать столько, сколько у нас размерностей левой части. В моей демке есть маленькая иконка, средняя картинка и большая картинка, поэтому я сделал три контейнера, обычно больше и не требуется.
Сделать такие контейнеры не сложно, если ты включил Fixed width для текстовой детали (text root component) несколько шагов назад, просто растяни его на нужную ширину (вычти из ширины ячейки ширину левой и правой части ячейки).
Когда делаешь правую часть, закинь в неё все контролы, что тебе нужны, отключи Clip content у компонента и поставь фиксированную ширину, размером самой часто используемой детали, например иконки.
Это нужно, чтобы ячейка не разъезжалась при переключении деталей внутри правой части, если они разной длины. Обсуди этот момент с разработчиками, чтобы предотвратить различные вопросы 🙂
Теперь предыдущие компоненты с деталями закидываем в дополнительные контейнеры, и включаем лейауты. Для левой части — горизонтальный Auto height (в продвинутом mode закидывай туда систему отступов), для центральной — вертикальный Auto width, а для правой части — горизонтальный Fixed height, размер которой поставь по высоте средней левой части, в моём случае — 48 pt.
Правую часть делаем так специально, чтобы ваши контролы не ехали вслед за растягивающимся текстом. В таком способе есть мини-костыль, в маленькой ячейке нужно будет переключить правую часть с Fixed на Auto height либо сделать несколько контейнеров, для маленькой ячейки и для ячеек размером побольше, но в 95% случаев моего способа будет достаточно, чтобы покрыть все кейсы.
Теперь закидываем все три слоя Left, Center и Right part в наш компонент Content — и наша ячейка готова…
Использование Auto Layout компонентов в Figma
Я какое-то время играл с компонентами Figma Auto Layout. Здесь я покажу, как создать полностраничный компонент, используя Auto Layout в Figma.
Я большой поклонник атомарного дизайна, потому что он хорошо работает для дизайнеров, и это приближает нас к подходу, который используют фронтенд — разработчики в своей работе. Хотя мы используем тот же подход, мы можем сотрудничать более эффективно. Имея это в виду, я пытался найти способ максимизировать использование атомарного дизайна в моей библиотеке компонентов, и, наконец, это стало возможным благодаря новой функции Auto Layout. Давайте посмотрим на то, что я узнал.
Подход
Если вы не знакомы с концепциями атомарного дизайна, я настоятельно рекомендую вам сначала прочитать больше об атомарном дизайне.
Рисунок выше иллюстрирует логику, которую я использую для своих компонентов. При таком подходе легко проектировать компоненты и, что очень важно, поддерживать их после.
Ниже вы можете увидеть страницу, которую я буду использовать в качестве примера. Это настоящая страница, которую я разработал и использую в проекте, над которым я работаю на Chainstack.com. В этом посте я остановлюсь только на компонентах, которые используют Auto Layout.
Если вы не хотите вдаваться в детали, я оставлю ссылку на окончательный результат в Figma в конце этого поста.
Атомы
На атомном уровне все довольно просто. Я выделил компоненты, которые используют Auto Layout.
Давайте посмотрим на их анатомию. Стили и цвета текста определены в стилях Figma.
Это типичный компонент атомного уровня. Auto Layout: горизонтальное, расстояние между элементами 8px.
Молекулы
Здесь все становится немного сложнее. Для наших молекул мы используем только атомы, которые мы создали на предыдущем шаге, и некоторые базовые элементы, которые я создал в своей библиотеке (стили шрифта и цвета).
Панель подсказок здесь самый сложный элемент. Я использую её на нескольких разных страницах платформы, и она ведет себя по-разному в зависимости от ситуации. Она должна:
- Соответствовать размеру контента
- Занимать всю ширину контентной области
- Поддерживать многострочный текс для обоих сценариев выше.
Вы не можете просто изменить размер компонента Auto Layout в Figma, но я не хочу хранить два очень похожих компонента в моей библиотеке. Я нашел решение.
Как это работает:
У меня есть компонент Auto Layout, который подстраивает его размер под содержимое, но он находится в компоненте без Auto Layout, поэтому я могу вручную изменить размер родительского компонента, если мне нужно настроить его по ширине страницы.
Остальные компоненты довольно простые.
Компонент хлебных крошек, например, представляет собой набор атомных компонентов, которые ведут себя так же, как и его дочерние элементы: атомы корректируют свой размер в соответствии с содержимым> компонент хлебных крошек корректирует свой размер в соответствии с размером атомов внутри.
Блок кнопок работает аналогично. Это компонент Auto Layout с несколькими компонентами атомных кнопок внутри.
Организмы
Самым сложным было организовать секцию деталей: она должна поддерживать многострочные параметры. Это означает, что все блоки должны вести себя в соответствии с объемом контента, который имеют блоки выше. Блок может иметь от одной до трех строк параметров, поэтому нам необходимо поддерживать любые конфигурации в этих пределах:
- От 1 до 3 строк
- Строки могут иметь 4 блока информации или меньше
Первый слой помогает нам создавать отступы вокруг контента.
Этот слой отделяет раздел содержимого от заголовка раздела («Подробности»).
Здесь мы создаем отступы между строками с несколькими атомными компонентами дизайна внутри.
Последний уровень — это компонент строки с несколькими атомными компонентами внутри. Он ведет себя так же, как компонент хлебных крошек.
Еще один большой организм — это компонент таблицы, но он очень простой. Здесь нам нужен первый компонент Auto Layout, чтобы отделить заголовок от тела таблицы.
Затем я использую Auto Layout с расстоянием 0, чтобы сделать таблицу.
Шаблоны
Шаблон имеет раздел контента, в котором мы собираем все динамические элементы, и несколько компонентов, которые находятся на своих местах (хлебные крошки, заголовок раздела).
Я не добавил основной заголовок в окончательный шаблон, потому что компоненты в Figma не поддерживают фиксированное положение при прокрутке его элементов. Это единственная причина, по которой мы не можем использовать эту страницу в качестве компонента, но это не проблема для коротких страниц, которые размещают 100% своего контента на экране.
Теперь у нас есть очень гибкая, простая в поддержке страница. Вот как это выглядит в итоге.
В приведенной выше анимации вы можете увидеть, как работает наша страница атомарного дизайна в режиме прототипа в Figma.
Вот так просто и чисто выглядит страница. Кроме того, все компоненты на странице очень гибкие и отзывчивые, и я могу использовать их во всех моих файлах дизайна. В случае каких-либо изменений в дизайне страницы, я могу обновить их в своей библиотеке, и она автоматически обновит все мои файлы дизайна.
Figma предлагает использовать автоматическое создание Auto Layout (нажмите Shift + A) для простых компонентов, и обычно это работает хорошо, но иногда это не работает, как ожидалось.Вместо удаления фонового слоя и его копирования с параметрами Auto Layout Figma считает, что это объект, который должен быть частью компонента, который мы пытаемся создать. Вы можете увидеть пример такого поведения ниже. В этом случае я создаю компонент Auto Layout вручную.
Спасибо за чтение, и я надеюсь, что вы нашли это полезным. Не стесняйтесь обращаться ко мне в dribbble или twitter.
Что такое автолайаут и как его применять в Фигме
Figma является удобным и практичным web-инструментом, с помощью которого разработчики и дизайнеры верстают сайты, а также создают сложные табличные структуры. Широкие возможности включают в себя такую функцию, как Auto Layout, с помощью которой можно автоматизировать создание отступов, а также обеспечить удобное выравнивание соседних модулей. Каждому web-дизайнеру будет полезным освоить этот инструмент и начать активно его использовать.
Актуальность применения функции Auto Layout в Фигме
Вне зависимости от типа и структуры будущего сайта, при верстке макета очень важно обеспечить правильность отступов. Для этой цели некоторые специалисты рисуют отдельные ячейки, однако это влечет за собой значительные затраты времени и сил. Инструмент автолайаут, который после обновления программы в 2022 году стал более функциональным, дает возможность создать красивый макет web-сайта гораздо быстрей и удобней.
Важно понимать, что с самого начала отступы должны быть подчинены определенному алгоритму, поскольку иначе, при малейшей корректировке, web-дизайнеру придется подгонять все заново вручную. Применение автолайаута в Фигме дает возможность упростить такую работу, а также применять новые алгоритмы по моделированию отступов.
Какие задачи решает инструмент Auto Layout
Практика показывает, что знание данной функции выводит разработчика на качественно иной уровень, что повышает его квалификацию и профессиональные навыки. Инструмент позволяет успешно решать 2 главные задачи:
Некоторые ограничиваются инструментом автолайаут для формирования кнопок, однако его функционал гораздо шире. Главное удобство данной функции заключается в том, что слои, границы и текст в ячейке воспринимаются как соседние компоненты. Благодаря этому к ним успешно применяются все правила макета, что снижает количество манипуляций для создания объекта.
Для лучшего понимания, как это работает, рассмотрим пример. У нас имеется текст и прямоугольник с заливкой.
Если мы включаем функцию Auto Layout для базового слоя и компонента без преобразования, то получаем одну из таких картинок:
После активации функции по преобразованию кнопки вы уже больше не сможете перемещать содержимое компонента вручную. Для последующей настройки отступов вам потребуется использовать элемент управления, который располагается с правой стороны панели.
Удобный функционал дает возможность специалисту настраивать отступы не только слева и справа, но также сверху и снизу. Единственный момент, функция автолайаут не учитывает пустое пространство, поскольку в расчет принимается только размер элементов, находящихся внутри компонента.
При помощи данной функции можно качественно улучшить оптимизацию дизайн систем сайта. Объекты внутри легко регулируются и задаются автоматически после применения нужных параметров.
Как создать адаптивную кнопку и правильно ее настроить
Разработать и внедрить адаптивную кнопку в Фигме несложно, для этого нужно выполнить следущие действия: