From 03a8e73ea6018281b3d229a0e2a3cb33c83f538b Mon Sep 17 00:00:00 2001 From: root Date: Sat, 26 Sep 2026 19:48:39 +0200 Subject: [PATCH] =?UTF-8?q?content(ai-assistant-figma):=20callout=20=D0=B8?= =?UTF-8?q?=20=D1=80=D0=B0=D1=81=D0=BF=D1=80=D0=B5=D0=B4=D0=B5=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BC=D0=B5=D0=B4=D0=B8=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/cases/ai-assistant-figma/index.html | 135 ++++++++++-------- public/en/cases/ai-assistant-figma/index.html | 134 +++++++++-------- src/pages/cases/ai-assistant-figma.en.html | 134 +++++++++-------- src/pages/cases/ai-assistant-figma.html | 135 ++++++++++-------- 4 files changed, 296 insertions(+), 242 deletions(-) diff --git a/public/cases/ai-assistant-figma/index.html b/public/cases/ai-assistant-figma/index.html index e5286d8..76a9809 100644 --- a/public/cases/ai-assistant-figma/index.html +++ b/public/cases/ai-assistant-figma/index.html @@ -431,81 +431,81 @@

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

- -

Решение

-

- Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт готов, я открываю плагин и нажимаю «Выполнить». Код автоматически передаётся в Figma. Каталог сохраняет сценарии для повторного запуска без Cursor. Плагин не ограничен одной операцией: я могу добавлять скрипты под разные задачи. И всё же запускал их чаще, чем создавал новые. -

-

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

+
Список скриптов AI-ассистента -
Список доступных скриптов ассистента.
+
Каталог сценариев с поиском, сортировкой и быстрым запуском.
+ +

Решение

+

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

Редактор скриптов AI-ассистента -
Редактор скрипта для запуска в Figma.
+
Экран скрипта перед запуском в Figma.
+

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

Лог выполнения скрипта AI-ассистента -
Представление лога выполнения скрипта.
-
-
- Индикатор работы скрипта AI-ассистента -
Индикатор активного выполнения скрипта.
-
-
- Live Mode AI-ассистента -
Live Mode: интерактивный режим ассистента.
-
-
- Меню More AI-ассистента -
Дополнительное меню (More) с расширенными действиями.
+
Меню дополнительных действий со скриптом.
+
+

+ Чтобы LLM точнее понимала макет, плагин копирует информацию о выбранной ноде или целой странице. Эти данные я использовал в диалоге с моделью. +

+
+ Панель плагина с переключателем Live +
Панель управления скриптом с переключателем Live.
+
+

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

+
+ Редактор скрипта с панелью логов +
Редактор и панель логов выполнения.
-
-
Демонстрация работы AI-ассистента в Figma.
+
Доработка скрипта в Cursor и проверка результата в Figma.
+

Результат

+ +
+ Индикатор выполнения скрипта +
Индикатор активного выполнения скрипта.
+
+

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

+

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

-
Ещё один пример работы AI-ассистента в Figma.
+
Сборка формы из компонентов дизайн-системы по референсу с помощью скрипта.
- -

Результат

-

- В зависимости от скрипта задача, которая раньше занимала от 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.

- -

Solution

-

- 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. -

+
AI assistant script list -
List of available assistant scripts.
+
Script catalog with search, sorting, and quick launch.
+ +

Solution

+

+ 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. +

AI assistant script editor -
Script editor for running code in Figma.
+
Script screen before running it in Figma.
+

+ Saved scripts could be launched from the catalog without Cursor. I ran existing scripts more often than I created new ones. +

AI assistant script execution log -
Script execution log view.
-
-
- AI assistant running indicator -
Active script execution indicator.
-
-
- AI assistant Live Mode -
Live Mode: interactive assistant mode.
-
-
- AI assistant More menu -
More menu with extended actions.
+
Menu of additional actions for a script.
+
+

+ 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. +

+
+ Plugin toolbar with the Live toggle +
Script controls with the Live toggle.
+
+

+ 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. +

+
+ Script editor with an execution log panel +
Script editor and execution log panel.
@@ -514,9 +515,33 @@ Your browser does not support the video tag. -
Demo of the AI assistant working in Figma.
+
Editing a script in Cursor and checking the result in Figma.
+

Result

+ +
+ Script execution indicator +
Indicator that a script is running.
+
+

+ 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. +

-
Another example of the AI assistant working in Figma.
+
A script assembles a form from design-system components using a reference.
- -

Result

-

- 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.

- -

Solution

-

- 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. -

+
AI assistant script list -
List of available assistant scripts.
+
Script catalog with search, sorting, and quick launch.
+ +

Solution

+

+ 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. +

AI assistant script editor -
Script editor for running code in Figma.
+
Script screen before running it in Figma.
+

+ Saved scripts could be launched from the catalog without Cursor. I ran existing scripts more often than I created new ones. +

AI assistant script execution log -
Script execution log view.
-
-
- AI assistant running indicator -
Active script execution indicator.
-
-
- AI assistant Live Mode -
Live Mode: interactive assistant mode.
-
-
- AI assistant More menu -
More menu with extended actions.
+
Menu of additional actions for a script.
+
+

+ 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. +

+
+ Plugin toolbar with the Live toggle +
Script controls with the Live toggle.
+
+

+ 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. +

+
+ Script editor with an execution log panel +
Script editor and execution log panel.
@@ -201,9 +202,33 @@ Your browser does not support the video tag. -
Demo of the AI assistant working in Figma.
+
Editing a script in Cursor and checking the result in Figma.
+

Result

+ +
+ Script execution indicator +
Indicator that a script is running.
+
+

+ 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. +

-
Another example of the AI assistant working in Figma.
+
A script assembles a form from design-system components using a reference.
- -

Result

-

- 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. Если проблема была в логике, я разбивал скрипт на небольшие шаги и проверял их по очереди. Сначала тестировал скрипт на отдельном файле. Когда всё работало, пробовал его в рабочем макете. -

+
Список скриптов AI-ассистента -
Список доступных скриптов ассистента.
+
Каталог сценариев с поиском, сортировкой и быстрым запуском.
+ +

Решение

+

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

Редактор скриптов AI-ассистента -
Редактор скрипта для запуска в Figma.
+
Экран скрипта перед запуском в Figma.
+

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

Лог выполнения скрипта AI-ассистента -
Представление лога выполнения скрипта.
-
-
- Индикатор работы скрипта AI-ассистента -
Индикатор активного выполнения скрипта.
-
-
- Live Mode AI-ассистента -
Live Mode: интерактивный режим ассистента.
-
-
- Меню More AI-ассистента -
Дополнительное меню (More) с расширенными действиями.
+
Меню дополнительных действий со скриптом.
+
+

+ Чтобы LLM точнее понимала макет, плагин копирует информацию о выбранной ноде или целой странице. Эти данные я использовал в диалоге с моделью. +

+
+ Панель плагина с переключателем Live +
Панель управления скриптом с переключателем Live.
+
+

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

+
+ Редактор скрипта с панелью логов +
Редактор и панель логов выполнения.
-
-
Демонстрация работы AI-ассистента в Figma.
+
Доработка скрипта в Cursor и проверка результата в Figma.
+

Результат

+ +
+ Индикатор выполнения скрипта +
Индикатор активного выполнения скрипта.
+
+

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

+

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

-
Ещё один пример работы AI-ассистента в Figma.
+
Сборка формы из компонентов дизайн-системы по референсу с помощью скрипта.
- -

Результат

-

- В зависимости от скрипта задача, которая раньше занимала от 1 до 30 минут, теперь выполнялась одним нажатием. Это моя оценка, отдельную статистику я не собирал. Высвободившееся время позволяло браться за более сложные рабочие сценарии. -

-

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

-

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

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