Решение
- Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт готов, я открываю плагин и нажимаю «Выполнить». Код автоматически передаётся в Figma. + Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт был готов, достаточно было открыть плагин и нажать «Выполнить». Код автоматически передавался в Figma.
- Сохранённые сценарии можно запускать из каталога и без Cursor. Я использовал готовые скрипты чаще, чем создавал новые. + Готовые сценарии запускал чаще, чем создавал новые. Из каталога их можно было запускать и без Cursor.
- Чтобы LLM точнее понимала макет, плагин копирует информацию о выбранной ноде или целой странице. Эти данные я использовал в диалоге с моделью. + Для более точных ответов модели плагин копировал данные о выбранной ноде или целой странице. Этот контекст можно было передать LLM вместе с запросом.
- Логи выполнения мог читать LLM-бот в Cursor. Если дело было не в ошибке, а в логике скрипта, я разбивал его на небольшие шаги и запускал их по очереди. Сначала проверял сценарий на отдельном файле, а если всё работало, пробовал в рабочем макете. + Логи выполнения мог читать LLM-бот в Cursor. Логические ошибки разбирал по шагам: делил сценарий на части и запускал их по очереди. Сначала проверял скрипт в отдельном файле, а после успешного теста пробовал в рабочем макете.
По моей оценке, на задачу вручную уходило от 1 до 30 минут. Запустить сценарий теперь можно было одним нажатием.
+На ручное выполнение отдельной задачи уходило от 1 до 30 минут. Это оценка, отдельную статистику не собирал. Теперь скрипт запускался одним нажатием.
- Высвободившееся время позволяло браться за более сложные рабочие сценарии. В рабочих файлах я часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также обновляли цветовые токены после ручных изменений и помогали собрать файл дизайн-системы с множеством страниц. + Высвободившееся время позволяло браться за более сложные рабочие сценарии. В рабочих файлах часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также помогали обновлять цветовые токены после ручных изменений и собирать структуру файла дизайн-системы с множеством страниц.
- Были и другие задачи: добавить варианты компонентов, сохранить набор токенов из JSON в текстовом слое или собрать прототип с переходами по клавиатуре. Я автоматизировал и подсветку кода в макете, чтобы показать идею и подобрать цвета синтаксиса. Вручную я бы за это не взялся. + Были и другие задачи: добавлял варианты компонентов, сохранял набор токенов из JSON в текстовом слое или собирал прототип с переходами по клавиатуре. Подсветку кода в макете тоже автоматизировал скриптом, чтобы нагляднее показать идею и подобрать цвета синтаксиса. Вручную за такую работу не взялся бы.
- За время работы я лучше разобрался в Figma Plugin API. Теперь при планировании заранее замечаю, какие действия можно скриптовать, чтобы не тратить время на повторяющиеся операции. + За время работы лучше разобрался в Figma Plugin API. Теперь при планировании заранее учитываю, какие действия можно скриптовать, чтобы не тратить время на рутину.
Планы
- Дальше я хочу убрать Cursor из рабочего процесса и общаться с LLM-агентами прямо в Figma. В зависимости от задачи агент сможет подготовить переиспользуемый скрипт или выполнить действие по текстовой команде. + Дальше планирую убрать Cursor из рабочего процесса и общаться с LLM-агентами прямо в Figma. В зависимости от задачи агент сможет подготовить переиспользуемый скрипт или выполнить действие по текстовой команде.
Сейчас готово только окно интерфейса. Работа с агентами и запуск действий пока не реализованы. diff --git a/src/pages/cases/ai-assistant-figma.html b/src/pages/cases/ai-assistant-figma.html index 27fdf91..63042a7 100644 --- a/src/pages/cases/ai-assistant-figma.html +++ b/src/pages/cases/ai-assistant-figma.html @@ -106,22 +106,22 @@
Мост между Cursor IDE и Figma для создания и запуска скриптов
- Я каждый день работал в Figma: проектировал сайты и приложения, использовал плагины, а когда готовых решений не хватало, делал свои. Со временем заметил, сколько времени уходит на повторяющиеся действия. Рутину вроде организации слоёв хотелось отдать скриптам, а сложные задачи, которые вручную казались неподъёмными, так и оставались в списке на потом. + Рабочие будни проходили в Figma: проектировал сайты и приложения, использовал плагины, а когда готовых решений не хватало, делал свои. Со временем заметил, сколько времени уходит на повторяющиеся действия. Рутину вроде организации слоёв хотелось отдать скриптам, а задачи, которые вручную казались неподъёмными, так и оставались в списке на потом.
Контекст
- Плагин я делал для себя. Я уже использовал LLM для разных задач и писал с их помощью скрипты для Figma. Код создавал в Cursor, а для запуска раньше приходилось переносить его в Figma вручную. Сам писать код плагина и скриптов я не умел, поэтому по ходу работы изучал документацию и API плагинов Figma, а правила генерации скриптов в Cursor постоянно уточнял. + Плагин я делал для себя. LLM уже помогали создавать скрипты для Figma. Код готовил в Cursor, а для запуска переносил в Figma вручную. Навыков самостоятельного написания кода плагинов и скриптов не хватало, поэтому по ходу работы изучал документацию и API плагинов Figma, а правила генерации скриптов в Cursor постоянно уточнял.
Задача
- Я хотел убрать ручной перенос кода и запускать скрипты прямо из Figma. Плагин должен был связать Cursor с Figma, дать возможность повторно запускать уже созданные сценарии и быстро копировать для LLM контекст выбранного объекта или страницы. + Задача состояла в том, чтобы убрать ручной перенос кода и запускать скрипты прямо из Figma. Плагину предстояло связать Cursor с Figma, дать возможность повторно запускать сценарии и быстро копировать для LLM контекст выбранного объекта или страницы.
Решение
- Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт готов, я открываю плагин и нажимаю «Выполнить». Код автоматически передаётся в Figma. + Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт был готов, достаточно было открыть плагин и нажать «Выполнить». Код автоматически передавался в Figma.
- Сохранённые сценарии можно запускать из каталога и без Cursor. Я использовал готовые скрипты чаще, чем создавал новые. + Готовые сценарии запускал чаще, чем создавал новые. Из каталога их можно было запускать и без Cursor.
- Чтобы LLM точнее понимала макет, плагин копирует информацию о выбранной ноде или целой странице. Эти данные я использовал в диалоге с моделью. + Для более точных ответов модели плагин копировал данные о выбранной ноде или целой странице. Этот контекст можно было передать LLM вместе с запросом.
- Логи выполнения мог читать LLM-бот в Cursor. Если дело было не в ошибке, а в логике скрипта, я разбивал его на небольшие шаги и запускал их по очереди. Сначала проверял сценарий на отдельном файле, а если всё работало, пробовал в рабочем макете. + Логи выполнения мог читать LLM-бот в Cursor. Логические ошибки разбирал по шагам: делил сценарий на части и запускал их по очереди. Сначала проверял скрипт в отдельном файле, а после успешного теста пробовал в рабочем макете.
По моей оценке, на задачу вручную уходило от 1 до 30 минут. Запустить сценарий теперь можно было одним нажатием.
+На ручное выполнение отдельной задачи уходило от 1 до 30 минут. Это оценка, отдельную статистику не собирал. Теперь скрипт запускался одним нажатием.
- Высвободившееся время позволяло браться за более сложные рабочие сценарии. В рабочих файлах я часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также обновляли цветовые токены после ручных изменений и помогали собрать файл дизайн-системы с множеством страниц. + Высвободившееся время позволяло браться за более сложные рабочие сценарии. В рабочих файлах часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также помогали обновлять цветовые токены после ручных изменений и собирать структуру файла дизайн-системы с множеством страниц.
- Были и другие задачи: добавить варианты компонентов, сохранить набор токенов из JSON в текстовом слое или собрать прототип с переходами по клавиатуре. Я автоматизировал и подсветку кода в макете, чтобы показать идею и подобрать цвета синтаксиса. Вручную я бы за это не взялся. + Были и другие задачи: добавлял варианты компонентов, сохранял набор токенов из JSON в текстовом слое или собирал прототип с переходами по клавиатуре. Подсветку кода в макете тоже автоматизировал скриптом, чтобы нагляднее показать идею и подобрать цвета синтаксиса. Вручную за такую работу не взялся бы.
- За время работы я лучше разобрался в Figma Plugin API. Теперь при планировании заранее замечаю, какие действия можно скриптовать, чтобы не тратить время на повторяющиеся операции. + За время работы лучше разобрался в Figma Plugin API. Теперь при планировании заранее учитываю, какие действия можно скриптовать, чтобы не тратить время на рутину.
Планы
- Дальше я хочу убрать Cursor из рабочего процесса и общаться с LLM-агентами прямо в Figma. В зависимости от задачи агент сможет подготовить переиспользуемый скрипт или выполнить действие по текстовой команде. + Дальше планирую убрать Cursor из рабочего процесса и общаться с LLM-агентами прямо в Figma. В зависимости от задачи агент сможет подготовить переиспользуемый скрипт или выполнить действие по текстовой команде.
Сейчас готово только окно интерфейса. Работа с агентами и запуск действий пока не реализованы.