Auto Layout уже в Figma!


05.12.2019 Время чтения - 4 минуты 1376

Мы рады сообщить, что Auto Layout теперь доступен в Figma!

Теперь вместе с размером кнопки меняется и размер текста в ней. Списки могут перестраиваться при перемещении элементов. А элементы могут группироваться для создания сложных интерфейсов, которые отвечают их содержанию.

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

Объединение дизайна и процесса разработки

По своей сути, Figma – инструмент для дизайна, который позволяет работать в свободной форме, используя такие основные элементы, такие как контуры, слои и группы. Но такая природа свободной формы может привести к большому количеству похожих между собой работ. Например, на первый взгляд простое обновление текста кнопки, занимает слишком много времени: редактирование текста, изменение размера кнопки, передвигание соседней кнопки для удобства и т.д.

Между тем, такие производственные среды, как HTML/CSS и SwiftUI намного лучше описывают структуру пользовательского интерфейса и отношения между объектами, что делает изменение таких вещей, как копирование кнопок, гораздо менее трудоемким.

Поэтому, создавая функцию Auto Layout, мы хотели объединить эти два мира. Как мы можем объединить простоту внесения изменений с природой свободной формы Figma, при этом сохранив её?

Как и многие другие проблемы дизайна, конечный результат может показаться очевидным. Попробовав множество разных подходов, в том числе несколько довольно нестандартных, мы поняли, что лучший способ объединить их – это добавить несколько основных концепций из блочной модели CSS (в частности, flexbox) непосредственно в Figma. А благодаря внедрению Auto Layout в качестве свойства вы можете гибко и эффективно применять его к абсолютно любому фрейму, независимо от того, находится он в компоненте или нет.

Как работает Auto Layout

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

Как работает Auto Layout

Теперь изменение кнопки «Купить» на «Добавить в корзину» занимает считанные секунды. При редактировании текста размер рамки автоматически изменяется. И если вы поставите несколько кнопок рядом, они все будут двигаться так, как вы ожидаете.

(Примечание: единственное отличие от модели CSS заключается в том, что интервал между элементами выполняется на уровне контейнера. Если вам нужно настроить интервал между отдельными элементами, вам потребуется немного поработать.)

Проще говоря, Auto Layout – гений. Он очень сильно ускоряет рабочий процесс. Мне уже не терпится применить его в нашей дизайн-системе.

— Charles de Dreuille, Product Designer, Facebook

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

2 reorder

Это круто! Мне нравится функциональность, которую представляет эта функция, а особенно – автоматическое изменение порядка

— Joel Nasrallah, Инструменты прототипирования и дизайна, Atlassian.

Кроме того, если у вас есть библиотеки компонентов и дизайн-системы, вы можете применить автоматическое расположение к каждому компоненту, нажав Shift+A или в меню «Параметры».

Группировка фреймов

Эти отдельные элементы Auto Layout могут быть объединены в интерфейсы путем группировки фреймов практически так же, как теги div могут быть вложенными в HTML. Как и в производственной среде, вы можете легко редактировать контент и перемещать объекты во фреймы Auto Layout или из них.

У этой функции есть «мера предосторожности», которая попытается помешать вам делать то, что вы, вероятно, вообще не хотите делать, например перетаскивать большое изображение внутрь кнопки. Но на тот случай, если вы так и хотите, защиту можно отменить, удерживая нажатой клавишу Command для Mac и Сtrl в Windows.

3 typing

Auto Layout – настоящее обезболивающие. Оно решает большое количество проблем и позволяет создавать общие компоненты с базовыми элементами управления вместо компонентов для вариантов содержимого.

— Guilhem Gantois, UX-консультант, Microsoft

Мы надеемся, что с Auto Layout проектирование интерфейсов в Figma теперь хоть чуть-чуть похоже на то, как вы создаёте интерфейсы с помощью кода.

Что дальше?

Просто обновите окно браузера, чтобы начать использовать Auto Layout.

Кстати, это только начало – мы хотели добавить намного больше интересных штук в наш первый релиз, но мы то знаем, как терпеливо вы ждали, чтобы начать пользоваться этой функцией.

Оригинал статьи.
Читайте так же: Лучшие музеи, использующие VR в 2019