Figma (программа для дизайна)

Что это такое

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

Почему это важно

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

Ключевые идеи

Беритесь за неё, когда у дизайна есть структура, которой надо поделиться

Инструмент правильный, когда появились компоненты и состояния, которые надо держать согласованными, однако для раннего исследования бумага быстрее: открывайте Figma, когда появляется третий вариант одной и той же кнопки.

Компоненты и варианты — в этом суть

Экран держится согласованным благодаря компоненту с именованными вариантами: нарисуйте компонент один раз, определите его состояния, а дальше расставляйте экземпляры.

Button / Primary
  Вариант: default, hover, pressed, disabled
  Свойство: label (text), leading icon (boolean)
Правило: изменение компонента обновляет каждый экземпляр, поэтому ревью проводят один раз

Используйте её как поверхность ревью, а не только рисования

Поделитесь ссылкой на точный фрейм, оставляйте комментарии на элементе, закрывайте их в файле. Тогда нить решений живёт рядом с работой, а не в чате.

Держите файл структурированным как продукт

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

Передача начинается в файле

Ссылайтесь на токены дизайн-системы по имени, отмечайте состояния и держите компоненты в общей библиотеке, чтобы спецификация была указателем, а не перерисовкой.

Практика

Соберите один компонент с состояниями

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

Готово, когда: редактирование компонента обновляет экземпляр, и проверяющий может увидеть все состояния на одной странице.

Проведите одно ревью в файле

Поделитесь фреймом с коллегой, попросите комментарии к конкретным элементам и закройте каждую ветку.

Готово, когда: каждый комментарий закрыт или превращён в задачу, и запись об этом осталась в файле.

Частые ошибки

Рисовать всё отдельными фигурами — ничего нельзя обновить один раз, и экраны расходятся; исправить: определите компоненты и используйте экземпляры.
Отдельная страница на каждый поиск — файл становится ненаходимым; исправить: структурируйте страницы по областям продукта со страницей компонентов.
Ревью в чате — обратная связь теряет привязку к элементу; исправить: комментируйте сам фрейм.
Перерисовывать систему в каждом файле — продукт расходится файл за файлом; исправить: потребляйте общую библиотеку.
Использовать её для раннего поиска — время уходит на доводку до того, как решена структура; исправить: сначала рисуйте скетчи и переходите сюда, когда появляются варианты.

Что читать дальше

UI-компоненты (02-frontend/12-ui-components) — мышление об API компонента, которое делает компонент Figma пригодным.
Дизайн-системы (03-design-ux/32-design-systems) — где живёт общая библиотека и кто ею управляет.
Передача дизайна и спецификации (03-design-ux/42-design-handoff-specs) — превращение файла в то, что можно собрать.
Adobe XD (03-design-ux/35-adobe-xd) — альтернатива, к которой стоит обратиться в организации на Adobe.