Figma: tips and triсks. Часть I

Если для вас Figma — регулярно используемый инструмент, гайд от Middle Designer digital-агентства ZephyrLab Михаила Иванова будет суперполезным. Учиться на реальном опыте ценно, поэтому мы попросили Михаила поделиться личными наблюдениями и лайфхаками, которые он сам использует в работе с Figma. В первой части рассказываем про шорткарты и бустеры: они знакомы всем дизайнерам, но мы сосредоточимся на конкретных примерах их использования.

В панелях Figma есть шорткаты, которые каждый может найти и оценить в работе. Но помимо встроенных инструментов существуют эффективные комбинации шорткатов, способные помочь в решении разных задач. Вот о них — подробнее!

Шорткаты Align

Помогают с организацией рабочего пространства, когда это необходимо. В этом случае просто нажимаем opt+w и все встает ровно в одну линию.

Еще возможен такой use case: у нас есть объект, внутри которого есть только текстовый слой, но на невидимой области есть НЛО, который выведен за рамки фрейма. Для того, чтобы его найти и устранить, нажимаем Alt H/V — объект встает по центру, и мы просто удаляем лишнее.

Select/layer panel

Рабочий инструмент — такие комбинации клавиш, как глубокое прокликивание и навигация по панели слоев. Когда в макете присутствуют фреймы очень большой плотности, «прокликаться» до чего-то бывает просто невозможно. Случается и так, что ты мискликнул и выбрал объект, который находится ниже нужного. В этом случае можно пойти от обратного: нажимаем cmd/ctrl и, глубоким кликом игнорируя все слои, нажимаем tab/shift+enter, для того, чтобы выделить все слои. И тут уже производим все манипуляции, которые нам нужны. Если же ошибся или передумал, то просто нажимай tab/shift для обратного действия.

Quick actions

Удобный и классный инструмент в Figma! Он работает по такой же схеме как и Spotlight на MacOS. Нажимаем cmd/ctrl + p, и у нас появляется панель поиска. Тут мы можем найти и выбрать любой нужный нам инструмент. Некоторые плагины поддерживают другие функции, до которых можно докликаться с помощью клавиши tab. Например, существует такой плагин «Select by name», который позволяет найти фрейм по его названию. В строке поиска пишем название плагина и у нас выходит следующее действие по нажатию на tab. Нажимаем на tab и пишем свой поисковый запрос. Если хочется найти home indicator, пишем «home indicator» и видим подсказку, что найдено 35 объектов с таким названием. Нажимаем на на них и выделяем все 35 — не придется делать это вручную.

Организация слоев

Прежде всего, аналитикам и дизайнерам важно осознать, что организация слоев — это тоже дизайн. Первыми пользователями вашего дизайна являются именно дизайнеры. Над одним и тем же макетом могут работать два и более специалистов, а потому хотелось бы разговаривать на одном языке дизайна. Логическая группировка слоев помогает всем участникам процесса.

На что следует обратить внимание:

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

Frame vs group

Горячая тема для дискуссии — фреймы или группы. Почему же стоит выбрать frame, а не group? Потому что фреймы могут все то же самое, что и группы, но плюс еще гораздо больше:

Кстати, все компоненты в Figma — это фреймы. Даже если вы захотите текстовый элемент превратить в компонент, то Figma все равно вернет его во фрейм.

На практике использование групп потребует от дизайнера больше действий. К тому же у групп отсутствует очень удобная функция — drag and drop: перемещать объекты приходится через панель слоев. А при работе с фреймами такая функция есть, что может сократить рабочий процесс до нескольких секунд. Когда вы работаете с тоннами макетов, оптимизация процессов очень упрощает работу.

Constraints «left-right»

Объекты внутри фрейма с сеткой зависят от направляющих самой сетки. Например, при включенном параметре «left-right» в панеле Constraints, объект видит границы колонки в которой он находится. При любом изменении ширины материнского фрейма объект будет изменять свои параметры в зависимости от положения внутри колонки.

Бустер позволяет:

Умное преобразование в auto layout

Figma позволяет преобразовать frame в auto layout, когда все стили для элемента применены на вложенный Rectangle (fill, stroke, corner radius, effects) , не ломая его.

Умное преобразование возможно только в том случае, если Rectangle на 100% заполняет родительский фрейм.

Использовать инструмент логично в том случае, когда стало понятно, что для дизайн-процесса auto layout элемент (например, карточка) будет удобнее.

Variants (тоггл)

Toggle-switch для компонентов с двумя вариантами создается с помощью параметров «True/False», «On/Off», «Yes/No» и позволяет быстро переключаться между состояниями.

Например, если в проекте есть темная и светлая темы одной карточки, то для создания вариантов нажимаем на иконку «components» и создаем компонент — так мы создаем два варианта одного компонента. Выделяем эти два объекты, переименовываем в «dark mode=» и в панели слоев каждый вариант переименовываем в yes и no. Теперь toggle-switch работает.

Interactive components

Это просто game changer. Если год назад приходилось создавать отдельный фрейм для создания логики hover и активного состояния, то сейчас интерактивные компоненты ускоряют процесс сборки прототипов, не создавая лишней логики. Они создаются с помощью интеракции в панеле «prototype» внутри «variants». Благодаря интерактивным компонентам можно сократить в разы количество макетов на канвасе.