Аудит дизайн-системы за один вечер

Чтобы понять, насколько продукт разошёлся со своей дизайн-системой, не нужно покупать инструмент. Нужны один вечер, бесплатный поиск по коду, файл в Figma и место для записей. Это чек-лист для такого вечера: аудит дизайн-системы в двенадцать шагов, команды для запуска и форма результатов на одну страницу.

Всё работает без FISYCO. Мы делаем FISYCO, и он проводит такие проверки постоянно. Но смысл вечера в другом: честно увидеть картину теми средствами, что у вас уже есть.

Коротко
- Аудит считает, сколько разных значений и компонентов продукт использует на деле, и сравнивает это с тем, что задаёт система.
- По словам Брэда Фроста, на первый проход инвентаризации интерфейса хватает 30–90 минут. Поиск по коду добавляет к нему цифры.
- Считайте цвета, размеры шрифта, значения отступов, компоненты-дубли системных и значения, написанные руками там, где есть токены.
- Запишите результат в одну таблицу с датой. Тогда следующий аудит покажет тренд, а не ощущение.

Почему хватит одного вечера

Цель не полный каталог, а первое измерение, которое можно повторить. Брэд Фрост, который сделал инвентаризацию интерфейса популярной, описывает её как «полный набор деталей и мелочей, из которых состоит ваш интерфейс». Первый проход занимает немного времени: «Мне хватает от 30 до 90 минут на первый проход инвентаризации интерфейса» (Atomic Design, глава 4).

Цифры часто удивляют. Робин Рендл провёл быстрый аудит CSS в продукте Gusto. CSS Stats насчитал «101 уникальный цвет и 115 уникальных цветов фона», хотя дизайн-система задавала 68 цветов. Его вывод: «моё понимание дизайн-системы расходится с тем, что есть во фронтенде» (CSS-Tricks, 2018).

Перед началом (10 минут)

1. Задайте границы. Один продукт, один репозиторий, одна библиотека в Figma. Монорепозиторий с пятью приложениями — это пять аудитов.
2. Выпишите, что задаёт система. Откройте библиотеку в Figma и запишите количество: цвета палитры, текстовые стили, шаги отступов, компоненты. Это ваши эталонные цифры.
3. Исключите сгенерированный код. Найдите папки, в которые пишут ваши инструменты: компоненты иконок, API-клиенты, результаты сборки. Все команды ниже пропускают их через -g '!src/icons/**'. Добавьте по glob на каждую папку. Когда мы впервые измеряли демо-репозиторий, иконки, выгруженные нашей же синхронизацией, дали около 590 цветов, написанных руками. С тех пор мы первым делом исключаем сгенерированный код.

Поиск по коду (90 минут)

Команды ниже используют бесплатный ripgrep. С небольшими правками большинство из них выполнит и git grep -E. Подставьте свои src и исключённые папки.

1. Посчитайте уникальные цвета. Шестнадцатеричные значения из 3, 4, 6 или 8 символов, приведённые к нижнему регистру, чтобы #FFF и #fff считались один раз:

rg -o --no-filename -g '!src/icons/**' -e '#([0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})\b' src \
  | tr 'A-F' 'a-f' | sort | uniq -c | sort -nr

Число строк — это количество разных hex-цветов. Сравните его с размером палитры из шага 2. Просмотрите список на шум из комментариев, например номера задач.

1. Посчитайте цветовые функции. rgb(), hsl() и их новые родственники прячут цвета, которые поиск по hex пропускает. Выведенное число — ваш итог:

rg -o --no-filename -g '!src/icons/**' -e '\b(rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\(' src | wc -l

1. Посчитайте размеры шрифта в CSS и в пропсах React:

rg -o --no-filename -g '!src/icons/**' -e 'font-size:\s*[0-9.]+(px|rem)' \
  -e 'fontSize[:=]\s*[{"'"'"']?[0-9.]+(px|rem)?' src | sort | uniq -c | sort -nr

Сравните число разных значений с текстовыми стилями библиотеки. Если в коде значений намного больше, чем стилей в Figma, текст обычно задают руками. Значения React без единиц — это пиксели, поэтому при подсчёте объединяйте 14 и 14px.

1. Посчитайте значения отступов. Пиксельные значения в целом: они показывают, как часто отступ пишут руками вместо токена:

rg -o --no-filename -g '!src/icons/**' -e '\b[0-9]+px\b' src | sort | uniq -c | sort -nr | head -30

В эти цифры входят и размеры шрифта из шага 6. Ищите почти одинаковые значения: 12px, 13px и 14px рядом обычно задумывались как одно.

1. Найдите компоненты-дубли. Поищите в именах файлов названия системных компонентов:

rg --files -g '!src/icons/**' src | rg -i 'button|modal|dialog|tooltip|card'

PrimaryButton.tsx в папке фичи рядом с системным Button — это компонент, пересобранный локально. Выпишите каждый вместе с папкой.

1. Найдите токены палитры в компонентах. Если в системе есть смысловые токены, токен палитры в компоненте — это обход системы. Подставьте названия палитры из своей темы:

rg -n -g '!src/icons/**' -e '["'"'"'`](gray|red|blue|green)\.\d{2,3}["'"'"'`]' src

В одной из следующих заметок серии разберём больше цветовых шаблонов и покажем, как превратить их в правило линтера.

Сторона дизайна (45 минут)

1. Сверьте несколько экранов с библиотекой. Возьмите три самых посещаемых экрана. На каждом в продакшене проинспектируйте кнопку, заголовок и карточку и сравните значения с библиотекой в Figma. Запишите каждое отличие.
2. Сверьте библиотеку с ней самой. Откройте в Figma два-три продуктовых файла. Поищите локальные стили в панели Assets и слои, которые похожи на компоненты библиотеки, но не являются их экземплярами. Отвязанный компонент в дизайне часто превращается в пересобранный компонент в коде.
3. Сравните списки токенов. Если токены выгружаются в код, сравните названия и значения с переменными Figma. Токен, который есть в Figma и отсутствует в коде, или токен в коде с другим значением — это расхождение дизайн-системы в миниатюре. По возможности сопоставляйте по стабильному ID. Иначе переименование выглядит как одно удаление плюс одно добавление, как объясняет наше руководство по токенам из Figma в код.

Запишите результат (15 минут)

Результат умещается на одной странице. Главное — дата и одни и те же строки каждый раз.

Условный пример.

Добавьте под таблицей три строки: дату, кто проводил аудит, и три находки, которые вы исправили бы первыми. Положите файл в репозиторий, рядом с кодом, который он описывает.

Что делать с цифрами

Аудит полезен, когда он меняет следующие шаги:

• Исправляйте по охвату, а не по количеству. Расхождение в компоненте, который есть на каждом экране, весит больше дюжины разовых. Как их взвешивать, объясняют четыре сигнала здоровья.
• Превратите худший поиск в правило. Если таблицу возглавили цвета, написанные руками, добавьте правило линтера. Тогда число сможет только уменьшаться.
• Повторяйте. Второй аудит ценнее первого, потому что показывает тренд.

Когда одного вечера мало

Вечерний аудит — это снимок. Между двумя снимками расхождения продолжают копиться, и никто их не видит до следующего. Ради этого промежутка мы и сделали FISYCO. Он индексирует ваш код и библиотеку в Figma, находит те же расхождения и обходы токенов, которые считает этот аудит, и ранжирует их по охвату. Подробнее — что делает FISYCO.