Design Handoff: как передать дизайн в разработку

Что такое Design Handoff

Design Handoff — это передача дизайна от дизайнера к разработчику. Он включает:

• Макеты: финальные версии всех экранов, подписанные и структурированные [citation:11];
• Спецификации: размеры, отступы, шрифты, цвета — всё, что нужно для точной реализации;
• Состояния: hover, pressed, disabled, loading, error, empty [citation:1];
• Адаптив: версии для разных экранов и устройств [citation:4];
• Ассеты: иконки в SVG, изображения, шрифты [citation:11];
• Аннотации: пояснения к сложным элементам и логике [citation:5];
• Документацию: правила использования, гайдлайны [citation:5].

Handoff — это не «отправить макет и забыть». Это совместная работа, которая продолжается до релиза и после него. Дизайнер остаётся доступным для вопросов, участвует в ревью реализации, помогает решать технические ограничения [citation:3].

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

Спецификации

Спецификация — это документ с точными параметрами всех элементов. Без неё разработчик вынужден догадываться, а догадки почти всегда расходятся с замыслом.

Как оформлять спецификации

• Аннотации прямо в макете: используйте плагины вроде Humaan Annotations или встроенные заметки Figma [citation:5][citation:11];
• Комментарии к сложным элементам: логика, условия, поведение при ошибках;
• Отдельные фреймы для состояний: покажите все состояния рядом, а не описывайте текстом;
• Сетка и отступы: укажите базовую единицу (например, 4px или 8px) [citation:5].

Токены

Токены — это переменные, которые хранят значения дизайна. Они позволяют синхронизировать дизайн и код.

• Цвета: color-primary, color-background, color-text, color-border;
• Типографика: font-size-heading, line-height-body, font-weight-bold;
• Отступы: spacing-xs, spacing-sm, spacing-md, spacing-lg;
• Радиусы: radius-button, radius-card, radius-input;
• Тени: shadow-sm, shadow-md, shadow-lg.

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

Инструменты для работы с токенами:

• Figma Variables: встроенный механизм переменных;
• Tokens Studio: плагин для синхронизации токенов с кодом;
• Style Dictionary: инструмент для генерации кода из токенов [citation:5].

Figma Dev Mode

Figma Dev Mode — это специальный режим для разработчиков. Он показывает всё, что нужно для реализации, без переключения на дизайнерский интерфейс.

Dev Mode упрощает передачу и снижает количество вопросов от разработчиков. Но он не заменяет спецификации — он их дополняет.

Процесс передачи

Передача дизайна — это последовательный процесс, а не разовое действие.

Передача частями

Не обязательно передавать всё сразу. Можно передавать макет частями, сценариями. Разработчики быстрее начнут работу, а дизайнер сможет вносить изменения по ходу [citation:15]. Это особенно полезно для больших проектов.

Ревью реализации

Ревью — это этап, когда дизайнер проверяет, что разработчик реализовал всё правильно. Без него handoff не завершён.

Как организовать ревью

• Сравнение макета и реализации: скриншот и макет в одном масштабе. Стикеры с номерами для быстрого считывания проблем [citation:3];
• Таблица правок: что не так, как надо, уровень критичности (низкий, средний, высокий) [citation:3];
• Обсуждение в мессенджере: если что-то нельзя исправить (технические ограничения), фиксируется причина [citation:3];
• Статусы: «исправлено», «не исправлено», «не будет исправлено» [citation:3].

Что проверять

• Все страницы и модули: ничего не забыто, все состояния на месте [citation:1];
• Все состояния: hover, focus, disabled, loading, error [citation:1];
• Адаптив: все брейкпоинты, нестандартные размеры [citation:1];
• Контент: нет «рыбы», тексты реальные, уведомления и ошибки на месте [citation:1];
• Пиксель-перфект: расхождения в пределах допустимой погрешности [citation:4].

Чек-лист

Перед передачей макета в разработку проверьте по этому чек-листу. Если хотя бы 3–4 пункта не выполняются — риск ошибок высок.

Ошибки

Наши рекомендации