Handoff: дизайн-токены, спеки и Dev Mode

Handoff — это не «кинул макет в чат». Это процесс синхронизации, где дизайнер и разработчик говорят на одном языке токенов, а не «синий №3».

«Передача в разработку — это процесс, а не момент». — из практики Figma

Самые дорогие баги рождаются на стыке дизайна и кода: дизайнер имел в виду отступ 24, разработчик «на глаз» поставил 20; цвет в макете #2563EB, в коде — #2463EA. Лечится это общим словарём: токенами.

Токены как мост

Когда переменная в Figma называется так же, как переменная в CSS (color.action ↔ --color-action), правка в макете несёт то же имя, что уже в коде. Figma Dev Mode показывает разработчику именно имена токенов и значения отступов, а не голые hex-коды.

  HANDOFF БЕЗ И С ТОКЕНАМИ
  ------------------------
  БЕЗ:
  дизайн: #2563EB, 24px  --x-->  код: #2463EA, 20px
  (расходятся: «на глаз»)

  С ТОКЕНАМИ:
  дизайн: color.action, space-4  ===>  код: --color-action,
          (одно имя)                     var(--space-4)
  (синхрон: имя живёт в обоих мирах)

/* Разработчик видит в Dev Mode имена, а не hex: */
.cta {
  background: var(--color-action);  /* не #2563EB */
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
}

Что должно быть в спеке

В октябре 2025 спецификация Design Tokens W3C достигла версии 1.0 — теперь токены переносятся между Figma и кодом стандартным JSON, без самописных конвертеров.

Разбор глубже: handoff как непрерывная синхронизация

Самая дорогая категория багов рождается на стыке дизайна и кода — не потому, что кто-то ошибся, а потому, что дизайн и код говорили на разных языках. Дизайнер мыслил «отступ 24, цвет — основной синий», разработчик читал картинку и ставил «на глаз» 20 и слегка другой синий. Помножьте на сотни элементов — и реализованный продукт заметно расходится с макетом, причём незаметными по отдельности мелочами. Корень проблемы — отсутствие общего словаря. Токены этот словарь дают: когда переменная в дизайне и переменная в коде носят одно имя, передавать нечего «на глаз» — передаётся имя.

Современные инструменты вроде Figma Dev Mode закрепляют этот общий язык на уровне интерфейса. Разработчик, открывая макет, видит не «#2563EB», а имя токена color.action — то самое, что уже лежит у него в CSS как --color-action. Он видит, что отступ — это space-4, а не абстрактные «примерно 24 пикселя». Это убирает интерпретацию: вместо «что дизайнер имел в виду?» разработчик читает однозначное имя. Стабилизация спецификации Design Tokens W3C до 1.0 в 2025 году довела идею до конца — токены переносятся между Figma и кодом стандартным JSON без самописных конвертеров, и источник правды остаётся единым.

Но главный сдвиг — понимание, что handoff не момент, а процесс. Представление «дизайнер закончил, кинул финальный макет, умыл руки» порождает катастрофы: разработчик упирается в неучтённый случай (а что если текст длинный? а как на мобильном? а где состояние ошибки?) и либо домысливает сам, либо ждёт. Зрелая передача — это диалог в течение всей разработки: дизайнер документирует все состояния, поведение на брейкпоинтах, крайние случаи и требования доступности, остаётся на связи и переносит правки по именам токенов, а не «перекрашиванием вручную». Тогда то, что собрано в коде, совпадает с тем, что задумано в дизайне, — по построению, а не по счастливой случайности.

Как делают ПЛОХО

Отдают одну статичную картинку desktop без состояний и адаптации. Цвета — hex-кодами, отступы — «как-нибудь». Разработчик додумывает hover, поведение на мобильном и крайние случаи сам — получается не то, что в макете.

Как делают ХОРОШО

Макет на токенах, имена совпадают с кодом. В спеке — все состояния, адаптация, крайние случаи, доступность. Dev Mode отдаёт имена токенов. Handoff идёт как диалог, а правки переносятся по именам, а не «перекрашиванием».

Чек-лист

• Цвета/отступы/шрифты — токены, имена = именам в коде.
• Указаны все состояния компонента (hover/focus/disabled/error).
• Описано поведение на брейкпоинтах и крайние случаи.
• Заданы требования доступности (фокус, alt, aria).
• Handoff — диалог, а не разовая отправка картинки.

Итог. Хороший handoff держится на общем словаре токенов и полной спеке (состояния, адаптация, крайние случаи, a11y). Тогда код совпадает с макетом, а правки переносятся по именам.