- Я хотел убрать ручной перенос кода и запускать скрипты прямо из Figma. Плагин должен был связать Cursor с Figma, дать возможность повторно запускать уже созданные сценарии и быстро копировать для LLM контекст выбранного объекта или страницы.
- -- Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт готов, я открываю плагин и нажимаю «Выполнить». Код автоматически передаётся в Figma. Каталог сохраняет сценарии для повторного запуска без Cursor. Плагин не ограничен одной операцией: я могу добавлять скрипты под разные задачи. И всё же запускал их чаще, чем создавал новые. -
-- Чтобы LLM точнее понимала макет, плагин умеет копировать информацию о выбранной ноде или целой странице. Логи выполнения мог читать LLM-бот в Cursor. Если проблема была в логике, я разбивал скрипт на небольшие шаги и проверял их по очереди. Сначала тестировал скрипт на отдельном файле. Когда всё работало, пробовал его в рабочем макете. -
+
- + Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт готов, я открываю плагин и нажимаю «Выполнить». Код автоматически передаётся в Figma. +
- + Сохранённые сценарии можно запускать из каталога и без Cursor. Я использовал готовые скрипты чаще, чем создавал новые. +
- 
- 
- 
- + Чтобы LLM точнее понимала макет, плагин копирует информацию о выбранной ноде или целой странице. Эти данные я использовал в диалоге с моделью. +
+
+ + Логи выполнения мог читать LLM-бот в Cursor. Если дело было не в ошибке, а в логике скрипта, я разбивал его на небольшие шаги и запускал их по очереди. Сначала проверял сценарий на отдельном файле, а если всё работало, пробовал в рабочем макете. +
+
+
+ + Высвободившееся время позволяло браться за более сложные рабочие сценарии. В рабочих файлах я часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также обновляли цветовые токены после ручных изменений и помогали собрать файл дизайн-системы с множеством страниц. +
++ Были и другие задачи: добавить варианты компонентов, сохранить набор токенов из JSON в текстовом слое или собрать прототип с переходами по клавиатуре. Я автоматизировал и подсветку кода в макете, чтобы показать идею и подобрать цвета синтаксиса. Вручную я бы за это не взялся. +
- В зависимости от скрипта задача, которая раньше занимала от 1 до 30 минут, теперь выполнялась одним нажатием. Это моя оценка, отдельную статистику я не собирал. Высвободившееся время позволяло браться за более сложные рабочие сценарии. -
-- В рабочих файлах я часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также обновляли цветовые токены после ручных изменений и помогали собрать файл дизайн-системы с множеством страниц. -
-- Были и другие задачи: добавить варианты компонентов, сохранить набор токенов из JSON в текстовом слое или собрать прототип с переходами по клавиатуре. Я автоматизировал и подсветку кода в макете, чтобы показать идею и подобрать цвета синтаксиса. Вручную я бы за это не взялся. -
За время работы я лучше разобрался в Figma Plugin API. Теперь при планировании заранее замечаю, какие действия можно скриптовать, чтобы не тратить время на повторяющиеся операции.
diff --git a/public/en/cases/ai-assistant-figma/index.html b/public/en/cases/ai-assistant-figma/index.html index 83f8bee..68ff1aa 100644 --- a/public/en/cases/ai-assistant-figma/index.html +++ b/public/en/cases/ai-assistant-figma/index.html @@ -431,79 +431,80 @@I wanted to remove the manual code handoff and run scripts directly in Figma. The plugin had to connect Cursor and Figma, let me reuse existing scripts, and make it easy to copy context about a selected node or an entire page for the LLM.
- -- A local server and WebSocket connected Cursor to the plugin. Once a script was ready, I opened the plugin and clicked Run. The code was sent to Figma automatically. The catalog saved scripts for reuse without Cursor. The plugin was not limited to one operation: I could add scripts for different tasks. Still, I ran them more often than I created new ones. -
-- The plugin can copy details about a selected node or an entire page so the LLM can understand the design more accurately. The execution log was available to the LLM in Cursor. When a problem was about the script's logic, I broke it into small steps and ran them one by one. I tested scripts in a separate Figma file first, then tried them in a working file if everything behaved as expected. -
+
- + A local server and WebSocket connected Cursor to the plugin. Once a script was ready, I opened the plugin and clicked Run. The code was sent to Figma automatically. +
- + Saved scripts could be launched from the catalog without Cursor. I ran existing scripts more often than I created new ones. +
- 
- 
- 
- + To give the LLM better context, the plugin could copy information about a selected node or an entire page. I used that data in my conversation with the model. +
+
+ + The LLM in Cursor could read the execution logs. If the issue was with the script's logic rather than a bug, I split it into small steps and ran them one by one. I tested each script in a separate Figma file first, then tried it in a working file when it behaved as expected. +
+
+
+ + The time saved let me try more complex workflows. In working files, I often ran a script to flatten vector icons so they displayed correctly in production. Another turned a frame into a component, created an instance, and moved the master component to a designated place on the components page. Scripts also updated color tokens after manual changes and helped build a design-system file with many pages. +
++ Other tasks included adding component variants, saving a set of tokens from JSON stored in a text layer, and building a prototype with keyboard-driven transitions. I also automated code syntax highlighting in a mockup to present an idea and tune the syntax colors. I would not have colored code by hand. +
- Depending on the script, a task that used to take 1 to 30 minutes now takes one click. This is my estimate, not a tracked measurement. The time saved let me try more complex workflows. -
-- In working files, I often ran a script to flatten vector icons so they displayed correctly in production. Another turned a frame into a component, created an instance, and moved the master component to a designated place on the components page. Scripts also updated color tokens after manual changes and helped build a design-system file with many pages. -
-- Other tasks included adding component variants, saving a set of tokens from JSON stored in a text layer, and building a prototype with keyboard-driven transitions. I also automated code syntax highlighting in a mockup to present an idea and tune the syntax colors. I would not have colored code by hand. -
I learned more about the Figma Plugin API. Now I plan work with scriptable actions in mind, so I spend less time on repetitive steps.
diff --git a/src/pages/cases/ai-assistant-figma.en.html b/src/pages/cases/ai-assistant-figma.en.html index 5998412..a7df84c 100644 --- a/src/pages/cases/ai-assistant-figma.en.html +++ b/src/pages/cases/ai-assistant-figma.en.html @@ -118,79 +118,80 @@I wanted to remove the manual code handoff and run scripts directly in Figma. The plugin had to connect Cursor and Figma, let me reuse existing scripts, and make it easy to copy context about a selected node or an entire page for the LLM.
- -- A local server and WebSocket connected Cursor to the plugin. Once a script was ready, I opened the plugin and clicked Run. The code was sent to Figma automatically. The catalog saved scripts for reuse without Cursor. The plugin was not limited to one operation: I could add scripts for different tasks. Still, I ran them more often than I created new ones. -
-- The plugin can copy details about a selected node or an entire page so the LLM can understand the design more accurately. The execution log was available to the LLM in Cursor. When a problem was about the script's logic, I broke it into small steps and ran them one by one. I tested scripts in a separate Figma file first, then tried them in a working file if everything behaved as expected. -
+
- + A local server and WebSocket connected Cursor to the plugin. Once a script was ready, I opened the plugin and clicked Run. The code was sent to Figma automatically. +
- + Saved scripts could be launched from the catalog without Cursor. I ran existing scripts more often than I created new ones. +
- 
- 
- 
- + To give the LLM better context, the plugin could copy information about a selected node or an entire page. I used that data in my conversation with the model. +
+
+ + The LLM in Cursor could read the execution logs. If the issue was with the script's logic rather than a bug, I split it into small steps and ran them one by one. I tested each script in a separate Figma file first, then tried it in a working file when it behaved as expected. +
+
+
+ + The time saved let me try more complex workflows. In working files, I often ran a script to flatten vector icons so they displayed correctly in production. Another turned a frame into a component, created an instance, and moved the master component to a designated place on the components page. Scripts also updated color tokens after manual changes and helped build a design-system file with many pages. +
++ Other tasks included adding component variants, saving a set of tokens from JSON stored in a text layer, and building a prototype with keyboard-driven transitions. I also automated code syntax highlighting in a mockup to present an idea and tune the syntax colors. I would not have colored code by hand. +
- Depending on the script, a task that used to take 1 to 30 minutes now takes one click. This is my estimate, not a tracked measurement. The time saved let me try more complex workflows. -
-- In working files, I often ran a script to flatten vector icons so they displayed correctly in production. Another turned a frame into a component, created an instance, and moved the master component to a designated place on the components page. Scripts also updated color tokens after manual changes and helped build a design-system file with many pages. -
-- Other tasks included adding component variants, saving a set of tokens from JSON stored in a text layer, and building a prototype with keyboard-driven transitions. I also automated code syntax highlighting in a mockup to present an idea and tune the syntax colors. I would not have colored code by hand. -
I learned more about the Figma Plugin API. Now I plan work with scriptable actions in mind, so I spend less time on repetitive steps.
diff --git a/src/pages/cases/ai-assistant-figma.html b/src/pages/cases/ai-assistant-figma.html index 45be9f7..27fdf91 100644 --- a/src/pages/cases/ai-assistant-figma.html +++ b/src/pages/cases/ai-assistant-figma.html @@ -118,81 +118,81 @@Я хотел убрать ручной перенос кода и запускать скрипты прямо из Figma. Плагин должен был связать Cursor с Figma, дать возможность повторно запускать уже созданные сценарии и быстро копировать для LLM контекст выбранного объекта или страницы.
- -- Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт готов, я открываю плагин и нажимаю «Выполнить». Код автоматически передаётся в Figma. Каталог сохраняет сценарии для повторного запуска без Cursor. Плагин не ограничен одной операцией: я могу добавлять скрипты под разные задачи. И всё же запускал их чаще, чем создавал новые. -
-- Чтобы LLM точнее понимала макет, плагин умеет копировать информацию о выбранной ноде или целой странице. Логи выполнения мог читать LLM-бот в Cursor. Если проблема была в логике, я разбивал скрипт на небольшие шаги и проверял их по очереди. Сначала тестировал скрипт на отдельном файле. Когда всё работало, пробовал его в рабочем макете. -
+
- + Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт готов, я открываю плагин и нажимаю «Выполнить». Код автоматически передаётся в Figma. +
- + Сохранённые сценарии можно запускать из каталога и без Cursor. Я использовал готовые скрипты чаще, чем создавал новые. +
-
-
-
- + Чтобы LLM точнее понимала макет, плагин копирует информацию о выбранной ноде или целой странице. Эти данные я использовал в диалоге с моделью. +
+
+ + Логи выполнения мог читать LLM-бот в Cursor. Если дело было не в ошибке, а в логике скрипта, я разбивал его на небольшие шаги и запускал их по очереди. Сначала проверял сценарий на отдельном файле, а если всё работало, пробовал в рабочем макете. +
+
+
+ + Высвободившееся время позволяло браться за более сложные рабочие сценарии. В рабочих файлах я часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также обновляли цветовые токены после ручных изменений и помогали собрать файл дизайн-системы с множеством страниц. +
++ Были и другие задачи: добавить варианты компонентов, сохранить набор токенов из JSON в текстовом слое или собрать прототип с переходами по клавиатуре. Я автоматизировал и подсветку кода в макете, чтобы показать идею и подобрать цвета синтаксиса. Вручную я бы за это не взялся. +
- В зависимости от скрипта задача, которая раньше занимала от 1 до 30 минут, теперь выполнялась одним нажатием. Это моя оценка, отдельную статистику я не собирал. Высвободившееся время позволяло браться за более сложные рабочие сценарии. -
-- В рабочих файлах я часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также обновляли цветовые токены после ручных изменений и помогали собрать файл дизайн-системы с множеством страниц. -
-- Были и другие задачи: добавить варианты компонентов, сохранить набор токенов из JSON в текстовом слое или собрать прототип с переходами по клавиатуре. Я автоматизировал и подсветку кода в макете, чтобы показать идею и подобрать цвета синтаксиса. Вручную я бы за это не взялся. -
За время работы я лучше разобрался в Figma Plugin API. Теперь при планировании заранее замечаю, какие действия можно скриптовать, чтобы не тратить время на повторяющиеся операции.