Разбираемся с Figma Variants + Auto Layout на примере создания кнопок
В начале этого года я опубликовал статью о создании компонентов кнопок в Figma с помощью функции Auto Layout. За последние несколько месяцев Figma значительно улучшила Auto Layout. ДА! Наконец-то они позволяют индивидуально настраивать интервал!! Для меня это была самая большая проблема этой функции.
Они также представили новейшую функцию – Variants, которая поможет вам привести в порядок ваши компоненты.
Сегодня я собираюсь показать вам, как использовать эти две функции для создания надежного компонента, который поможет вам стать эффективнее и сосредоточиться на создании опыта продукта.
1. Определите свойства
Кнопка – один из самых сложных компонентов дизайн-системы. У нее так много разных вариантов. Теперь с темной темой нужно удвоить количество компонентов. Число комбинаций может быстро перевалить за 100. Определение всех свойств и их порядка очень важно, и, прежде чем предпринять следующий шаг, вы должны четко понимать, как вы хотите их структурировать.
В этом примере у меня есть следующие свойства:
Когда все свойства внесены в список, я начинаю думать об организации этого компонента в Figma, чтобы он был управляемым и масштабируемым.
Моя идея – разбить его на несколько таблиц:
Затем сгруппируйте таблицы по разным темам. Макет будет похож на изображение ниже 👇
Почему темы не включены в таблицу?
По моему опыту могу сказать, что в процессе проектирования свойства одного компонента редко меняются. Обычно эти свойства были определены на более ранней стадии (то есть в начале проекта), поэтому исключение их из таблицы может уменьшить ее размер.
2. Настройте таблицу
После определения всех свойств начните с нового фрейма, создайте таблицы и заполните все свойства заголовков строк и столбцов таблицы.
Совет: примените auto layout к фрейму, чтобы расширить его при добавлении дополнительных свойств.
3. Наконец-то создайте компонент!
Наконец, мы можем начать заполнять пустые ячейки вариантами 😅.
Но сначала убедитесь, что у нас готовы все цвета.
Затем начните с пустого фрейма, назовем его «Button template».
Затем добавьте метку-плейсхолдер и используйте функцию auto-layout, чтобы сохранить внутренние отступы кнопки.
Затем мы можем начать применять к нему несколько цветов:
На данный момент мы закончили первый вариант кнопки. Прежде чем превратить его в компонент, мы должны проверить, работает ли он так, как мы ожидали:
Выглядит хорошо! Давайте продублируем его и сделаем еще несколько шаблонов для разных размеров и типов кнопок.
После копирования и заполнения всех вариантов в таблице мы можем изменить цвета вариантов в соответствии с состоянием.
Через время все варианты для различных состояний стиля «Прямоугольник» готовы.
Теперь мы можем, наконец, создать компоненты для нашей кнопки. Перед преобразованием фрейма в компонент убедитесь, что в названии слоя есть все варианты, разделенные «/».
Затем используйте плагин Batch Create Component, чтобы создать все компоненты сразу.
Затем объедините все компоненты, как варианты,
Погодите. Что?!
После того, как мы объединили компоненты в виде вариантов, Figma перемещает все компоненты в новый фрейм, что разбивает нашу таблицу.
Мой обходной путь – аккуратно накладывать вариант поверх таблицы. Помните, когда вы это сделаете, заблокируйте фрейм таблицы. В противном случае варианты попадут во фрейм таблицы!
4. Назовите свойства и значения варианта
Прежде чем создавать дополнительные варианты для разных стилей, давайте удостоверимся в правильности свойств и значений.
Давай проверим, выглядит отлично!
Затем нужно создать больше компонентов для разных форм и типов. Выберите все компоненты и нажмите «+» в правом углу кнопки. Затем Figma продублирует все выбранные компоненты, и нам нужно переименовать значение свойства.
Очень быстро мы сможем получить полный набор вариантов для типа «Первичный».
После еще нескольких операций копирования и вставки мы сможем завершить все варианты!
И да, мы только что создали компонент с 1134 вариантами. 😅
Смело берите мой файл Figma и экспериментируйте с ним.
Как работает новая функция Auto Layout в Figma (ноябрь 2020). Рай адаптивного дизайна
Функция auto-layout появилась в Figma в 2019 году. Это хорошая функция, но, честно говоря, я редко использовал ее в своей повседневной работе. В основном потому что она немного «сходила с ума» от адаптивных ограничений, которые я часто использую. Но все изменилось с ноябрьским обновлением Figma.
Что такое auto layout?
Auto-layout позволяет создавать динамические фреймы, которые реагируют и изменяют размер в соответствии с их содержимым. Я уверен, что вы видели классический пример кнопки. Создайте фрейм, добавьте контент и преобразуйте фрейм в auto-layout (либо через панель свойств справа, либо нажмите Shift + A). Фрейм auto-layout теперь будет адаптироваться к изменению содержимого. Фрейм auto-layout может быть вложен по вертикали и горизонтали для создания изысканных компонентов и даже целых страниц.
Так что же изменилось?
Все меню auto-layout было переработано и стало намного лучше, тем более что вы можете объединить новые функции с ограничениями (называемыми resizing фреймов auto-layout). Позвольте мне подробнее рассказать об этих изменениях. Вы можете скачать официальный файл по auto-layout. Очень рекомендую!
1. Индивидуальная настройка отступов
Теперь вы можете настроить внутренние отступы индивидуально для левого, правого, верхнего и нижнего края. Очень удобно!
Индивидуальные отступы
💡 Небольшая хитрость: вы также можете вводить значения, как в CSS, через запятую, например, 10, 25, 15, 20 (top right bottom left padding) или 10, 20 (top/boom, left/right). Так намного быстрее!
2. Выравнивание и распределение
Объекты можно выровнять по горизонтали или вертикали, как и в предыдущей версии. Однако приятным дополнением стала возможность выровнять дочерние элементы фрейма auto-layout с помощью нового инструмента выравнивания. Самое главное, они сохраняют заданные внутренние отступы. По сути, это конец инструмента выравнивания в прежнем виде (хотя, он все еще находится в самом верху панели свойств справа).
Распределение (distribution) скрыто под индивидуальным отступом. На это уходит секунда, тем более что здесь вы можете сочетать много настроек. Распределение позволяет вам выбирать, как выровнять дочерние объекты внутри фрейма auto-layout.
Packed → самостоятельно определяйте расстояние между ними
Space between → автоматически определяет пространство, равномерно распределяя дочерние элементы.
3.Новое меню изменения размера
Resizing определяет поведение объекта при изменении размера родительского фрейма или его содержимого. Это звучит знакомо, если вы ранее использовали ограничения. Теперь auto–layout и ограничения (называемые resizing во фрейме auto–layout) идут рука об руку, что несомненно меняет правила игры.
Есть три варианта, и вы можете комбинировать их по высоте и ширине друг с другом!
4. Новые параметры вложенного изменения размера в действии
Отзывчивый и адаптивный к содержимому. Наконец-то!
Прелесть в том, что вы можете смешивать и сочетать все параметры, чтобы создавать мощные адаптивные элементы. Как упоминалось ранее, auto-layout и ограничения не работали вместе. Теперь вы можете применить адаптивное поведение и сохранить все настройки интервалов при изменении содержимого. Это станет большим преимуществом для моего рабочего процесса!
Отзывчивый и адаптивный к содержимому
Смешивание фиксированных и адаптивных настроек
Раньше это было возможно, но весьма сложно. Теперь нужно всего лишь несколько кликов. Внутри фрейма auto-layout вы можете установить часть элементов, как фиксированные, а часть – со смешанными фиксированными и плавными настройками.
Смешивание фиксированных и плавных настроек
Одинаковая высота для всех дочерних элементов!
Если у вас много содержимого в контейнере, но вы хотите, чтобы все элементы имели одинаковую высоту, просто настройте все дочерние элементы так, чтобы они заполняли контейнер по высоте, а к родительскому фрейму auto–layout примените параметр hug contents по высоте. Готово! Как ни странно, сейчас это труднее сделать в CSS, чем в Figma!
Одинаковая высота для всех элементов
В основном это работает: если в одном контейнере много содержимого, он увеличивает высоту родительского элемента, а все остальные элементы следуют за ним. Как если бы вы вручную изменили размер контейнера. Вот так:
Обязательно ознакомьтесь с официальным файлом по auto-layout от Figma. В нем вы найдете еще много удивительных примеров!
5. Обновление режима проверки (Inspect mode)
Новая функция также отображается на панели Specs. Вы увидите, что она переводит его на flexbox, а также показывает некоторое общее поведение.
6. Мне все еще не хватает одной вещи: фиксации соотношения сторон изображений!
Она мне очень нужна для 90% моих проектов. Теперь у меня есть отличные адаптивные настройки и инструменты, но я вижу, что соотношение сторон моего изображения нарушается всякий раз, когда я меняю размер, что очень досадно. Судя по всему, эта функция находится в процессе разработки, поэтому я проявлю терпение и буду изменять размер вручную.
Кстати, если вы хотите и дальше использовать сетки с ограничениями
Я немного беспокоился об этом, так как все мои файлы настроены с помощью адаптивных сеток. Это не проблема. Просто сохраните фреймы с сетками такими, какие они есть (поэтому не добавляйте auto–layout в родительский фрейм, содержащий сетку!). Затем в этом родительском фрейме вы можете добавить auto–layout ко всем элементам. Таким образом, вы можете оставить в ограничениях настройку «left & right», чтобы заблокировать объект auto-layout для столбцов контента.
Больше дизайна и меньше ресайза с функцией 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 могут иметь свои собственные отступы, заливку, обводку и радиус угла, поэтому вы можете создавать кнопки без добавления дополнительных слоев.
Это позволяет без проблем в последнюю минуту менять текст кнопки «Buy» на «Add to basket». При редактировании текста размер фрейма автоматически изменится. И, если вы сложите несколько кнопок рядом друг с другом, они все будут двигаться так, как вы ожидаете. (Примечание: единственное отличие от модели CSS заключается в том, что интервал между элементами устанавливается на уровне контейнера. Если вам нужно настроить интервал между отдельными элементами, вам потребуется немного повозиться).
Вообще, функция Auto Layout просто гениальна. Она очень ускорит наш рабочий процесс; Я просто не могу дождаться, чтобы применить ее к нашей дизайн-системе.
— Charles de Dreuille, продуктовый дизайнер в Facebook
Помимо кнопок, Auto Layout особенно полезен при создании дизайнов с повторяющимися элементами интерфейса, такими как списки и меню. Вместо бесчисленных кликов мышью, чтобы переместить элементы в соответствующие места, вам достаточно просто перетащить их.
Это круто. Мне нравится новая функциональность. Я считаю автоматическое изменение порядка невероятно полезным.
— Joel Nasrallah, Prototyping & Design Tooling в Atlassian
Кроме того, если у вас есть библиотеки компонентов и дизайн-системы, теперь вы можете применить Auto Layout к каждому компоненту, нажав Shift + A или через меню «Option».
Вложение фреймов
Отдельные элементы Auto Layout могут быть объединены в полные интерфейсы путем вложения фреймов Auto Layout. Практически так же, как теги
У этой функции есть «мера предосторожности» от случайных действий, например, перетаскивания большого изображения внутрь кнопки. Но на тот случай, если это было вашим намерением, вы можете убрать «защиту», удерживая нажатой клавишу command (ctrl в Windows).
Auto Layout решает очень много проблем и позволяет мне создавать общие компоненты с базовыми элементами управления вместо новых компонентов для разных вариантов контента.
— Guilhem Gantois, UX-консультант в Microsoft
Теперь с функцией Auto Layout мы надеемся, что проектирование интерфейсов в Figma стало немного похоже на создание интерфейсов с помощью кода.
Что дальше?
Просто обновите окно браузера, чтобы начать использовать Auto Layout. Если вам нужна помощь, изучите возможности Auto Layout в этом файле, посмотрите это видео, или прочтите эти документы.
Кстати, это только начало – мы хотели включить намного больше возможностей в первый релиз, но это потребовало бы больше времени, а мы знаем, что вы с нетерпением ждали эту функцию.
Нам интересно, как вы используете Auto Layout, и мы хотели бы услышать ваши отзывы и пожелания. Пожалуйста, не стесняйтесь писать нам в Twitter @figmadesign или @skuwamoto.
Хардкорное применение Figma Auto layout — большой гайд
За последние года полтора, я нашёл себя в создании и оптимизации дизайн-систем, а инструменты для дизайна начали подыгрывать мне и постоянно подкидывают новый функционал на изучение. В этой статье я покажу хардкорное применение последнего нововведения в Figma –Auto layout.
Три явных плюса от ультимейт компонента
1) Не нужно собирать компонент ячейки в каждом проекте заново
2) UIkit получается компактным, но при этом легко кастомизируемым
3) Ускоряет создание диза… Ой ладно, это просто круто!
15 секунд кастомизаций и у нас уже приложение Zenly
Вот такие штуки можно делать после этого гайда. Если хочешь так же, открывай фигму, сейчас научу)
Левая, центральная и правая часть ячейки «под капотом»
Это и есть наша ячейка, разложенная по частям:
– Какие-то форматы картинок слева
– Текст по центру
– Различные контролы справа
Сейчас объясню, за что отвечает каждый из чёрных квадратов и почему их столько.
Ссылка на этот фигма-проект есть в телеграм канале. Там я всё аккуратно разложил по полочкам и добавил подсказки, а то когда я пришел к такой ячейке в первый раз, было примерно так 😀
Ну вот и гайд
Рисуем Frame и включаем вертикальный Auto layout с фиксированной шириной, которая тебе нужна в дизайне — это контейнер ячейки, в котором кроме слоя с контентом и Padding’ов больше ничего не будет.
Примечание 1: В компонентах на лэйаутах часто получается много «пустых» слоёв, пе паникуй, они все чуть-чуть влияют на компонент.
Примечание 2: Каждый нарисованный шаг заводи в компонент, чтобы в дальнейшем можно было всё кастомизировать по-отдельности, не затрагивая всю ячейку
Следующий этап — слой с контентом. В этом артборде настрой только Spacing между частями ячейки, разумеется переключи лэйаут по горизонтали, это же горизонтальный компонент.
Теперь переходим к самим деталям ячейки, но через несколько шагов вернемся к «пустым» контейнерам
Это детальки, которые я использовал для демо, у тебя их может быть гораздо больше (помнишь скрин моей первой ячейки? :). Естественно заведи все эти детали в компоненты. У текстового компонента обязательно включи лэйаут c Fixed width, потом нам это понадобится.
Начинается самоё интересное
Чтобы ячейка была гибкой и при этом растягивалась от контента внутри, нужно правильно настроить контейнеры деталей, которые ты сделал на предыдущем шаге, тут и кроются мелкие фишечки. Есть масса механик ячейки, описать все не получится, но, думаю, этой основной механики будет достаточно на первое время.
С левой частью всё легко. Просто группируем и включаем лейаут.
С текстовыми контейнерами дела обстоят поинтереснее, их нужно сделать столько, сколько у нас размерностей левой части. В моей демке есть маленькая иконка, средняя картинка и большая картинка, поэтому я сделал три контейнера, обычно больше и не требуется.
Сделать такие контейнеры не сложно, если ты включил Fixed width для текстовой детали (text root component) несколько шагов назад, просто растяни его на нужную ширину (вычти из ширины ячейки ширину левой и правой части ячейки).
Когда делаешь правую часть, закинь в неё все контролы, что тебе нужны, отключи Clip content у компонента и поставь фиксированную ширину, размером самой часто используемой детали, например иконки.
Это нужно, чтобы ячейка не разъезжалась при переключении деталей внутри правой части, если они разной длины. Обсуди этот момент с разработчиками, чтобы предотвратить различные вопросы 🙂
Теперь предыдущие компоненты с деталями закидываем в дополнительные контейнеры, и включаем лейауты.
Для левой части – горизонтальный Auto height (в продвинутом mode закидывай туда систему отступов),
Для центральной – вертикальный Auto width,
А для правой части – горизонтальный Fixed height, размер которой поставь по высоте средней левой части, в моём случае – 48pt.
Правую часть делаем так специально, чтобы ваши контролы не ехали вслед за растягивающимся текстом. В таком способе есть мини-костыль, в маленькой ячейке нужно будет, переключить правую часть с Fixed на Auto height, либо сделать несколько контейнеров, для маленькой ячейки и для ячеек размером побольше, но в 95% случаев моего способа будет достаточно, чтобы покрыть все кейсы.
Теперь закидываем все три слоя Left, Center и Right part в наш компонент Content и наша ячейка готова…
Почему это последняя в твоей жизни ячейка?
Это базовый компонент кита, который покрывает большинство кейсов. Если мне понадобится что-то добавить, я добавлю, а если нужно сделать редизайн общего стиля, то кастомизирую детальки компонента и вуаля.
Пример кастомайза из начала статьи
По сути, я скруглил края аватарки в левой части, добавил кнопку (тоже на лэйаутах) в правую часть, и ячейка уже подходит под другое приложение.
Окей, круто! А как перенести компонент в другой проект-то?
Если у вас платная версия фигмы, то всё легче некуда, ну а если бесплатная, то придётся потратить минуты две… О НЕТ…
Компонент выпрыгнул при создании «мама-компонента»
Принцип простейший:
– Копируешь инстанс cell component в новый проект, он должен стать детачнутым
– Идёшь в самый низкоуровневый слой и делаешь из него компонент
– Формируешь компонент из слоя уровнем выше, что заставит нижнеуровневый компонент выпрыгнуть рядом, оставив внутри свой инстанс
– Profit.
Гайд закончился
Надеюсь ты понял, что я тут наворотил. Если что-то не получилось, чекай фигма-файл в телеграм канале, ну а если и это не помогло, задавай вопросы в комментарии или мне в личку (telegram, vk).
Спасибо, что дочитал. Если интересно, в следующей статье, я разберу не менее важную тему – неправильного использования стилей в дизайн-системе и как настроить их супер гибко, bye 🙂