Передали аккуратный макет, а через неделю смотришь на экран — всё поехало. Отступы не совпадают, иерархия сломана, элементы съехали. Виноваты обычно все: дизайнер подобрал отступы «на глаз», разработчик интерпретировал их как получилось, а в итоге 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. Запишите эти значения в переменные и снимите скрин после. Так вы увидите систему в действии и сможете показать результат команде.
Через неделю вы удивитесь, куда делись постоянные «почему у вас здесь другой отступ». Токены не делают дизайн автоматически хорошим, но они убирают хаос из процесса передачи — а это уже половина победы.
Fluxs
Комментарии (0)
Войдите, чтобы комментировать.
Пока нет комментариев. Будьте первым.