Как выстроить эффективный процесс передачи макетов из Figma в разработку: опыт команды за полгода

В современной digital-индустрии взаимодействие между дизайнерами и разработчиками — ключевой этап создания продукта. Однако этот процесс часто сопровождается трудностями: отсутствие единых стандартов, различия в терминологии и подходах к работе. В этой статье мы расскажем, как за полгода наладить процесс передачи макетов из Figma в разработку, минимизировав ошибки и улучшив коммуникацию между командами.

Первым шагом к успешному взаимодействию является создание четкой структуры в Figma. Это позволяет систематизировать работу и упростить передачу макетов. Вот как выглядит наша структура:

• Типографика и цвета

Здесь фиксируются используемые шрифты, стили и цветовые палитры для светлой и темной тем. Особое внимание уделяется разделению цветов на Native (системные, неизменяемые) и Custom (произвольные, заданные дизайнером).

• Иконки

Все иконки группируются по размерам (12, 16, 20, 24, 32, 36, 40 пикселей) и типам (включая флаги стран).

• UI-kit

Стандартный набор компонентов интерфейса, который помогает поддерживать единообразие в дизайне.

• UX-kit

Менее очевидный, но важный элемент. Здесь описываются паттерны поведения, такие как загрузка в кнопках, отображение алертов или работа кнопки «Удалить». Это помогает избежать дублирования и систематизировать UX-решения.

• Готовые макеты

Макеты, прошедшие дизайн-ревью и внедренные в продакшн. Они полностью соответствуют текущей версии продукта.

• Передано в разработку

Макеты, которые разработчики взяли в работу. На этом этапе изменения вносятся только для исправления мелких ошибок (опечатки, неправильные цвета).

• Апрув

Макеты, готовые к передаче разработчикам. Они уже прошли проверку проджект-менеджером и не требуют доработок.

• Ревью

Здесь фиксируются ошибки, обнаруженные на этапе дизайн-ревью. Макеты с подсвеченными недочетами передаются разработчикам для исправления.

• Придумываем

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

• Архив

Хранилище устаревших макетов, которые больше не актуальны.

Чтобы избежать ошибок при передаче макетов, важно следовать четкому чек-листу:

• Цвета

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

• Типографика

Применяйте только утвержденные стили и шрифты с соответствующей лицензией.

• Компоненты

Максимально компонентизируйте элементы интерфейса, описывая их состояния (например, Default, Active, Error) и особенности в UI-kit.

• Фреймы и секции

Используйте фреймы для макетов и секции для группировки по сценариям. Это упрощает навигацию и понимание структуры.

• Переходы

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

• Mark as ready to dev

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

• Названия элементов

Давайте понятные и адекватные названия всем элементам. Figma даже предлагает инструменты для автоматического переименования слоев.

• Анимации

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

• Состояния макета

Продумайте все возможные сценарии: медленный интернет, ошибки загрузки, скелетоны и т.д.

• Графика

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

• Новые вводные

При добавлении новых компонентов или состояний обязательно указывайте их в соответствующей секции.

Процесс согласования макетов включает четыре этапа:

• Самопроверка

Дизайнер самостоятельно проверяет макет на ошибки перед передачей.

• Бизнес-апрув

Макет утверждается заказчиком или бизнес-аналитиком.

• Проджект-менеджер

Проверка на логичность и соответствие требованиям разработки.

• Приёмка разработки

Совместная встреча с разработчиками, где обсуждаются детали реализации.

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

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