Цвет, который больше не совпадает со своим токеном. Отступ, введённый руками. Компонент, собранный заново вместо готового. Каждая такая мелочь невелика, но вместе они уводят продакшен от системы. Одно такое отличие мы называем расхождением (divergence).
Откуда берётся расхождение
Расхождение редко начинается с одной крупной ошибки. Его приносит обычная работа:
- значение скопировали из Figma, а не взяли из дизайн-токена;
- токен переименовали в дизайне, но не в коде;
- компонент подправили на месте под дедлайн и так и не вернули в систему;
- там, где нужен смысловой токен, стоит примитивный, и смена темы или режима его не затрагивает.
Почему его не видно
У разницы нет владельца. Дизайнеры смотрят в Figma, разработчики в код, а каждое ревью сверяет сторону саму с собой, а не с другой. Разошедшаяся кнопка по-прежнему работает. Поэтому ничего не ломается, пока ребрендинг или аудит не найдёт десятки мест, которые нужно править разом. В опросе Sparkbox о дизайн-системах за 2022 год 37% тех, кто поддерживает дизайн-системы, назвали соответствие дизайна и кода одной из главных проблем (Sparkbox).
Как команды держат его под контролем
Большую часть работы делают три привычки:
- Доставлять изменения дизайна в код через pull request с ревью.
- Сравнивать дизайн и код по стабильным ID токенов, а не на глаз.
- Измерять расхождение регулярно, а не находить его во время редизайна.
Смотрите также
- Почему продакшен тихо расходится с дизайн-системой: причины и цена подробно.
- Как измерить здоровье дизайн-системы, а не угадывать