1 1 1160x620 - Больше дизайна и меньше ресайза с функцией Auto Layout в Figma

Мы рады сообщить, что теперь функция 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 в Figma

Это позволяет без проблем в последнюю минуту менять текст кнопки «Buy» на «Add to basket». При редактировании текста размер фрейма автоматически изменится. И, если вы сложите несколько кнопок рядом друг с другом, они все будут двигаться так, как вы ожидаете. (Примечание: единственное отличие от модели CSS заключается в том, что интервал между элементами устанавливается на уровне контейнера. Если вам нужно настроить интервал между отдельными элементами, вам потребуется немного повозиться).

Вообще, функция Auto Layout просто гениальна. Она очень ускорит наш рабочий процесс; Я просто не могу дождаться, чтобы применить ее к нашей дизайн-системе.

— Charles de Dreuille, продуктовый дизайнер в Facebook

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

Больше дизайна и меньше ресайза с функцией Auto Layout в Figma

Это круто. Мне нравится новая функциональность. Я считаю автоматическое изменение порядка невероятно полезным.

— Joel Nasrallah, Prototyping & Design Tooling в Atlassian

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

Вложение фреймов

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

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

Больше дизайна и меньше ресайза с функцией Auto Layout в Figma

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

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

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

Что дальше?

Просто обновите окно браузера, чтобы начать использовать Auto Layout. Если вам нужна помощь, изучите возможности Auto Layout в этом файле, посмотрите это видео, или прочтите эти документы.

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

Нам интересно, как вы используете Auto Layout, и мы хотели бы услышать ваши отзывы и пожелания. Пожалуйста, не стесняйтесь писать нам в Twitter @figmadesign или @skuwamoto.

Оригинал: figma.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Руководство по работе с изображениями в Figma

Не секрет, что изображения являются огромной частью мира дизайнера. От поиска и…

Лучшие практики Figma: компоненты, стили и общие библиотеки

Две самые мощные функций Figma – это компоненты и стили. Они позволяют вам повторно…

Как работают группы и фреймы в Figma

Работая в Figma, вы когда-нибудь сталкивались с проблемой выбора, что использовать фрейм или…