Я устал чинить компоненты руками. Поэтому написал плагин

Как это начиналось

У нас большая дизайн-система. Несколько библиотек, десятки дизайнеров, сотни экранов. И примерно раз в неделю кто-то прибегал с одной и той же проблемой: Обновил компонент в библиотеке, а в файле что-то пошло не так.

Проблемы были разные. Иногда инстанс просто переставал обновляться — висел как ни в чем не бывало, но уже с устаревшим мастером. Иногда после свапа библиотеки половина компонентов вставала на место, а другая половина превращалась в месиво или потерянные инстансы, мастер вроде бы есть, но Figma его не видит. Иногда слетали цвета, филд оставался, токен отображался как верный, но связь терялась и компонент жил своей жизнью. Или вообще мое любимое... компонент из нужно библиотеки, но внутри лежат компоненты из удаленной, при этом в самой библиотеке все было нормально

Стандартный Swap Library в Figma решал задачу процентов на 70. Остальные 30 нужно было искать руками: листать файл, кликать по каждому подозрительному элементу, смотреть привязан ли стиль, токен, отступ, из чего состоит этот элемент, нет ли каких либо компонетов из других либ. Это конечно была медитация, но не в хорошем смысле....

Что я попробовал сначала

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

Так же пробовал ноу-хау виде Claude Code во главе с Opus 4.6 (позже попробовал даже на 4.7), думал вот оно, решение всех проблем, один запрос и все готово... Реальность оказалась совсем другой, из-за кол-ва метаданных в файлах клауд буквально захлебывался в контексте и постоянных запросов через mcp фигмы, так простая проверка на привязку отступов выдала мне счет на 15$ за API запрос. Подумал что нужно оптимизировать, почитал гайды, пересмотрел кучу видео, развернул сеть агентов с более дешевыми моделями. Каждый знал свою область наших дизайн систем и экранов по разделам. Затраты снизились, но все равно оставались слишком высокие 3$ за проверку по отступов на одной странице.

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

Как писал

Соответственно я начал с документации в Figma, а конкретно с Plugin API. И там на бумаге есть практически все, что нужно для аудита файла: привязки к стилям, переменным, компонентам, информация о том, из какой библиотеки пришел инстанс, есть ли живой мастер, какой токен привязан к отступу.

На практике все оказалось сложнее, плагин на ранних этапах постоянно падал с ошибками, так как Figma накладывает лимиты на запросы к API, и если запрашивать слишком много данных за раз, она просто возвращает ошибку. Пришлось долго разбираться с батчингом, оптимизировать запросы, искать обходные пути для случаев когда API вел себя неожиданно. Часть вещей, которые казались очевидными по документации, в реальных файлах работала иначе.

Начал с простого Design Review, создал несколько правил, текст без привязки к стилю, цвета без токенов или стилей, отступы и скругления, помучился с запросами и наконец получилось, что то рабочее. Запустил на реальном файле, нашлось несколько сотен элементов, о которых никто не знал, стало интереснее. Постепенно правил становилось больше, потом появился Library Cleanup, а затем и автофикс. В какой-то момент понял, что инструмент уже решает ту самую задачу, из-за которой все и начиналось.

В итоге получился плагин Design Ops

Плагин работает в двух режимах: Library Cleanup и Design Review. Хотя базис у них один и тот же, но задачи решают разные:

Library Cleanup

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

Design Review

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

Визуальные ошибки — текст без стиля, цвет без токена или стиля, обводка без стиля, эффект без стиля, дефолтные имена слоев вроде «Frame 12», скрытые слои, clip content режущий тени и обводки и так далее.

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

Сетка и геометрия — высота не кратна базовому шагу, скругления не из разрешенного набора, межэлементные отступы не по сетке, внутренние отступы без токена.

Что дальше

Если сталкивались с похожими проблемами или есть идеи что еще стоит проверять — пишите в комментарии, интересно услышать как это выглядит у других команд.