Figma · Plugin

AI assistant

Мост между Cursor IDE и Figma для создания и запуска скриптов

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

Контекст

Плагин я делал для себя. LLM уже помогали создавать скрипты для Figma. Код готовил в Cursor, а для запуска переносил в Figma вручную. Навыков самостоятельного написания кода плагинов и скриптов не хватало, поэтому по ходу работы изучал документацию и API плагинов Figma, а правила генерации скриптов в Cursor постоянно уточнял.

Задача

Задача состояла в том, чтобы убрать ручной перенос кода и запускать скрипты прямо из Figma. Плагину предстояло связать Cursor с Figma, дать возможность повторно запускать сценарии и быстро копировать для LLM контекст выбранного объекта или страницы.

Решение

Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт был готов, достаточно было открыть плагин и нажать «Выполнить». Код автоматически передавался в Figma.

Готовые сценарии запускал чаще, чем создавал новые. Из каталога их можно было запускать и без Cursor.

Для более точных ответов модели плагин копировал данные о выбранной ноде или целой странице. Этот контекст можно было передать LLM вместе с запросом.

Логи выполнения мог читать LLM-бот в Cursor. Логические ошибки разбирал по шагам: делил сценарий на части и запускал их по очереди. Сначала проверял скрипт в отдельном файле, а после успешного теста пробовал в рабочем макете.

Результат

Высвободившееся время позволяло браться за более сложные рабочие сценарии. В рабочих файлах часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также помогали обновлять цветовые токены после ручных изменений и собирать структуру файла дизайн-системы с множеством страниц.

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

За время работы лучше разобрался в Figma Plugin API. Теперь при планировании заранее учитываю, какие действия можно скриптовать, чтобы не тратить время на рутину.

Планы

Дальше планирую убрать Cursor из рабочего процесса и общаться с LLM-агентами прямо в Figma. В зависимости от задачи агент сможет подготовить переиспользуемый скрипт или выполнить действие по текстовой команде.

Сейчас готово только окно интерфейса. Работа с агентами и запуск действий пока не реализованы.