Дизайн-система сайта

Зачем мне своя Фижма

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

Поэтому я сделал Фижму, холст на prokhor.me/fizhma. У слоя в ней не число, а имя из дизайн-системы, и ошибиться значением просто негде.

Как она работает с Figma

Начать макет можно в Figma, как привык. Кадр переносится в Фижму по ссылке: цвета сверяются с системой, и сразу видно, что в неё не попало и чем заменено.

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

Система живёт в коде

Цвета, шрифты, отступы и скругления лежат одним файлом. Из него собираются и вёрстка, и выгрузка для Figma. Компоненты сайта берут значения только оттуда.

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

Дизайнер правит руками

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

Агент работает с тем же

Ассистент через мой MCP читает холст, забирает готовый код экрана и правит макет. Цвет он может взять только из системы, чужое значение холст не примет.

После работы он сверяет свой код с системой и сам видит, где отошёл от неё.