Дизайн-токены уже живут в браузере

Пересборка существующего продукта в Figma каждый раз начинается одинаково. Открыть dev tools, прочитать hex, вбить его в цветовой стиль, вернуться, прочитать следующий. Час переписывания до начала какой-либо дизайн-работы.

Странная часть в том, что значения уже вот они. Отрендеренная страница - это полный, точный, актуальный набор токенов. Не то, чем система является по заявлению стайлгайда: то, что продукт реально выкатывает. Достать это - задача скрейпинга, а задачи скрейпинга решены.

Я её решил и немедленно обнаружил, что извлечение было лёгкой половиной.

Выход - это шум

Прочитайте вычисленные стили настоящей страницы - и получите сотни значений. Четыреста серых, большинство в одном-двух шагах друг от друга. Цвета границ, которые есть цвет текста на восьми процентах. Отступы 13, 14 и 15 пикселей, стоящие рядом, все - случайности.

Это не дизайн-система. Это её фотография, включая каждое место, где система уже проиграла.

Отдать такое дизайнеру хуже, чем не отдать ничего, потому что теперь у него четыреста вещей на сортировку вместо пустого файла и решения.

Группировка и есть продукт

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

Значит, инструмент обязан иметь мнение. Он обязан решить, что эти шесть серых - один серый, и быть готовым иногда ошибаться. Инструмент, отказывающийся решать, отдаёт сырой список, а сырой список у вас уже был.

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

Где должно происходить чтение

Одно ограничение сформировало архитектуру. Плагин Figma не может загрузить и отрендерить произвольную страницу: он работает в песочнице, без браузера, который можно на что-то направить.

Поэтому чтение происходит там, где страница уже есть, в браузере, расширением, а результат передаётся плагину. Звучит как деталь реализации, а решает фичу: расширение работает в сессии, куда вы уже вошли, значит, работает и на страницах за логином. Серверный рендерер не смог бы никогда.

Лучшее ограничение - то, которое вручает возможность, забирая опцию.