Дизайн можно сдать двумя способами. Первый: скинуть картинки и потом весь спринт отвечать в личке на «а какой тут отступ?», «это точно тот фиолетовый?», «а на этом экране кнопка почему-то другая — так надо?». Второй: отдать макет так, чтобы разработчик доставал ответы сам, прямо из проекта, и не дёргал вас каждые полчаса. Разница между этими двумя способами и есть качество хендоффа — передачи дизайна в разработку. И она сильнее влияет на сроки проекта, чем кажется на первый взгляд.
Плохой хендофф дорог не тем, что кто-то раз переспросил. Он дорог накопленным трением: десятки мелких уточнений, каждое из которых прерывает и вас, и разработчика, плюс ошибки там, где переспросить поленились и «сделали на глаз». В итоге готовый экран отличается от макета в мелочах, которые вместе читаются как небрежность. Хороший хендофф убирает не отдельный вопрос, а саму почву для них.
Dev Mode: макет, который сам себя объясняет
Для этого в редакторе есть режим разработчика — Dev Mode. В нём макет перестаёт быть картинкой и становится источником точных данных. Кликнул на элемент — видишь его размеры, цвет заливки в нужном формате, шрифт и его параметры, скругление, тени. Навёл курсор между двумя элементами — редактор показывает расстояние между ними, как приложенная линейка. Разработчику больше не нужно измерять пиксели по скриншоту или угадывать hex по глазу: всё измерено и подписано заранее.
Это меняет саму динамику работы. Вопрос «какой здесь отступ» просто не возникает — ответ виден по наведению. Экономятся не минуты, а тот самый поток мелких прерываний, который выматывает обе стороны и растягивает спринт.
Готовый код — как отправная точка
Dev Mode идёт дальше показа значений: по выбранному элементу он отдаёт готовый код в удобном виде — CSS, React или Tailwind. Position, размеры, заливка, скругления, тени — всё уже собрано в сниппет, который можно скопировать. Разработчику не нужно вручную переписывать числа из панели в код, а значит меньше места для опечаток вроде «поставил 15 вместо 16».
Здесь важно быть честным и не питать иллюзий: это отправная точка, а не финальный продакшн-код. Сгенерированный сниппет не знает про вашу архитектуру, состояние и структуру компонентов проекта — он описывает, как выглядит конкретный элемент. Разработчик возьмёт его как аккуратную заготовку и впишет в свою кодовую базу. Но даже в роли заготовки он экономит время и, что важнее, убирает расхождение значений между макетом и кодом в самом начале.
Система важнее отдельного экрана
Самый чистый хендофф начинается задолго до Dev Mode — на уровне того, как собран сам макет. Если кнопки, поля и карточки — это компоненты с вариантами, разработчик сразу видит: вот один компонент «Кнопка» с состояниями, а не двадцать разных кнопок, которые надо сверять между собой. Если цвета и отступы вынесены в токены, он получает не россыпь магических чисел, а именованную систему, которую логично отразить в переменных кода. Компоненты и токены превращают хендофф из передачи картинок в передачу структуры — и это ровно то, что нужно фронтенду.
А если к макету приложен ещё и кликабельный прототип, вопросов про поведение тоже не остаётся: разработчик не гадает, «что происходит по нажатию», а проходит сценарий сам. Статика отвечает на «как выглядит», прототип — на «как себя ведёт», Dev Mode — на «из чего сделано». Вместе они закрывают почти всё, о чём иначе пришлось бы переписываться.
Попробуйте прямо сейчас. Откройте редактор, соберите одну карточку с заголовком, текстом и кнопкой, включите Dev Mode и покликайте по элементам. Посмотрите на отступы по наведению, скопируйте CSS кнопки. Представьте, что вы разработчик, которому это прислали, — и почувствуете, насколько меньше вопросов у вас осталось бы к дизайнеру.
Наведите порядок перед сдачей
Dev Mode вытащит точные значения из чего угодно, но чистый хендофф всё равно начинается с гигиены макета. Дайте слоям и фреймам осмысленные имена вместо «Frame 128» и «Rectangle 42» — разработчик читает вашу структуру, и понятные названия экономят ему минуты на каждом экране. Удалите служебный мусор: спрятанные черновые варианты, дубли, забытые артборды сбоку. Проверьте, что финальные экраны действительно финальные, а не «почти те, только на соседнем фрейме поновее». Разработчик по умолчанию доверяет тому, что видит, и если рядом лежат две версии одного экрана, он гарантированно возьмёт не ту.
Отдельно проговорите состояния, которых не видно на статике: что показывать, пока список грузится, как выглядит ошибка, что происходит при пустых данных. Соберите их отдельными фреймами и свяжите в прототипе — тогда «несчастливые» ветки не придётся додумывать в коде наспех.
Отдайте ссылку, а не архив скриншотов
Итог простой: хороший хендофф — это когда вы отдаёте не десять картинок с подписями в мессенджере, а ссылку на проект, где разработчик сам берёт размеры, цвета, код и проходит прототип. Ваше время освобождается от роли справочной службы, сроки не буксуют на уточнениях, а готовый продукт совпадает с макетом не потому, что кто-то старался, а потому, что данные были точны с самого начала. Нужен готовый макет с чистым хендоффом? Закажите дизайн интерфейса под ключ — отдадим проект в Rugma с компонентами, токенами и кодом, готовый к разработке.