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