Как перестать передавать «грязные» макеты в разработку: разбор дизайн-токенов

Передали аккуратный макет, а через неделю смотришь на экран — всё поехало. Отступы не совпадают, иерархия сломана, элементы съехали. Виноваты обычно все: дизайнер подобрал отступы «на глаз», разработчик интерпретировал их как получилось, а в итоге UI выглядит так, будто его собрали из разных проектов.

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

Что такое дизайн-токены и почему они спасают

Дизайн-токены — это именованные константы для визуальных параметров: отступов, размеров, цветов, радиусов. Вместо того чтобы в макете писать «margin: 17px» и надеяться, что в вёрстке поставят те же 17px, вы определяете «space-md» или «space-2» и привязываете это значение к единой шкале.

Главное — токены должны быть жёстко зафиксированы на раннем этапе. Каждое решение об отступе или размере должно ложиться в предсказуемое правило. Тогда и дизайнер, и разработчик говорят на одном языке, и дрейф макета исчезает из-за того, что нечему дрейфовать.

Как построить систему отступов за один вечер

Начать можно с малого — только с отступов, не раздувая систему до размеров вселенной.

• Выберите базовый модуль. Чаще всего это 4px или 8px — он хорошо вписывается в сетку и дробится на части.
• Задайте шкалу через множители: 1x, 1.5x, 2x, 3x, 4x, 6x, 8x. Это даёт дискретный ряд значений, а не бесконечную простыню произвольных чисел.
• Назовите каждый шаг осмысленно. «space-xs», «space-sm», «space-base», «space-lg» — проще, чем «отступ для карточки 17px».
• Опишите токены в одном месте: в таблице, в Figma-библиотеке или в CSS-переменных. Идеально — в обоих местах.

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

Сравнение двух подходов

Типичные ошибки при внедрении

В попытке навести порядок легко наделать новых граблей. Вот что обычно идёт не так.

• Вводят токены только в коде, не обновляя макет. Дизайнер продолжает рисовать с вольными числами, и разработчик каждый раз переспрашивает.
• Заводят слишком много токенов. Если у вас тридцать отступов, это уже не система, а бардак. Оптимально — 7–10 шагов.
• Не документируют правила. Токен без описания — просто переменная. Добавьте комментарий или гайдлайн, когда какой шаг использовать.
• Используют токены для всего подряд, включая то, что должно быть исключением. Иногда 1–2 произвольных значения допустимы, но это исключение, а не правило.

С чего начать прямо сейчас

Если в вашем проекте ещё нет токенов, не пытайтесь переписать всё разом. Возьмите один экран — например, карточку товара или профиль — и выделите все отступы. Приведите их к шкале: где было 13px, станет 12px или 16px. Запишите эти значения в переменные и снимите скрин после. Так вы увидите систему в действии и сможете показать результат команде.

Через неделю вы удивитесь, куда делись постоянные «почему у вас здесь другой отступ». Токены не делают дизайн автоматически хорошим, но они убирают хаос из процесса передачи — а это уже половина победы.