TokenFlow
Вставьте адрес сайта, получите его дизайн-токены как переменные Figma. Цвет, шрифт и отступы прямо с живой страницы.
Пересборка существующего продукта в Figma начинается с одного и того же неоплаченного часа: открыть dev tools и копировать hex по одному. TokenFlow читает страницу, выясняет, какие из её значений задумывались системой, и записывает их в Figma Variables.
- Год
- 2026
- Роль
- Дизайн и разработка
- Тип
- Плагин Figma, бесплатный, без лимитов
- Вход
- Публичный URL или ваш готовый JSON
Проблема
Токены уже записаны. Они в стайлшите, в CSS-переменных, в значениях, которыми покрашена страница. Перенести их в Figma - переписывание: медленное, с ошибкой на одну цифру, и никто не считает это дизайном.
Чтоясделал
Адрес - весь ввод
Наберите домен и нажмите одну кнопку. Плагин забирает страницу, читает пришедший с ней стайлшит и возвращается со счётом: цвета, отступы, кегли, радиусы. Ни аккаунта, ни расширения, ни настройки, потому что что-то ещё стоило бы дороже часа, который он экономит.
Всё показано до того, как что-то записано
Экран результата - предпросмотр, а не отчёт о сделанном. Каждый цвет с именем, которое ему собираются дать, шкала отступов, которая у страницы оказалась, кегли, которыми она реально пользуется. Закройте панель здесь - и файл Figma ровно такой, каким вы его оставили. Автоматизацию, которая сначала пишет, а потом показывает, второй раз к настоящему файлу не подпускают.
Страница упоминает сотни цветов, а пользуется дюжиной
Каждое значение взвешено местом, где найдено. Переменная, объявленная в :root, весит сильно больше, чем hex в одном правиле, потому что первую кто-то сел и назвал. Чистые чёрный и белый выброшены: ими полна каждая страница, и ни один из них не решение. Выживает верх рейтинга - разница между набором токенов и списком.
Имена, которые он может оправдать
Где страница значение назвала, CSS-переменная сохраняет своё имя. Где нет - имя из тона и ранга: blue_5, gray_7. Намеренно простые, потому что выдуманное семантическое имя - догадка в мундире. Токен по имени blue_5 просит переименования; токен по имени primary говорит, что уже решено.
Ложится переменными, а не файлом на перепечатку
Выход - родные Figma Variables в своих коллекциях: цвет как COLOR, отступы и кегли как FLOAT. Ничего не экспортируется, не скачивается и не вставляется потом куда-то. В момент окончания к ним уже можно привязать компонент.
Второй вход, для команд с готовыми токенами
Вторая вкладка берёт JSON прямо из того, в чём команда их держит. Он парсится и считается до включения кнопки, так что лишняя запятая ловится в панели, а не посреди создания переменных. Эта половина сети не касается вовсе.
Один экран, два входа, один выход
Окно - 600 на 750, и всё происходит внутри: адрес, предпросмотр, импорт. Ни визарда, ни страницы настроек, ни второго окна. Маленькая система под ним - две вкладки, одна главная кнопка, четыре счётчика и свотч: всё, чему может позволить себе учить инструмент на девяносто секунд за раз.
Подкапотом
Плагин Figma не может открыть веб-страницу
Код плагина работает внутри Figma без способа загрузить кросс-доменный документ, поэтому запрос идёт через публичный CORS-прокси, а возвращается страница в том виде, в каком её отдали. Это честная граница инструмента: он читает доставленный стайлшит, а не стили, посчитанные браузером после запуска сайтового JavaScript, и достаёт только публичные страницы.
Место находки - единственная улика
Ничто в стайлшите не говорит, какие значения - дизайн-система. Единственный доступный сигнал - форма объявления: именованная переменная в :root, свойство, которое что-то красит, inline-стиль, hex, болтающийся в разметке. Взвесить их по-разному - весь продукт, и это же та часть, которая всегда останется суждением, а не фактом.
Две половины, которые ломаются по-разному
Извлечение зависит от сети, прокси и чужой разметки, поэтому ломается часто и обязано говорить об этом прямо. Импорт JSON не зависит ни от чего и либо парсится, либо нет. Держать их двумя вкладками, а не одним хитрым инпутом, значит, что ни одной не приходится извиняться за другую.
Бесплатно, и ничего не придержано
Извлечения без лимита, импорты без лимита, без аккаунта, без ключа. Инструменту, чьё обещание - сэкономленный час, нечего просить карту в конце этого часа.