admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

content(ai-assistant-figma): дополнил кейс

Browse Source
This commit is contained in:
root committed 2026-09-26 19:20:05 +02:00
1 parent 3388268697
commit a77033e71f
5 files changed
+157 -85
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/cases/ai-assistant-figma/index.html
+44 -26
View File
@@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Кейс: AI assistant — плагин для Figma с AI-функциями."
content="Кейс о плагине для Figma, который получает скрипты из Cursor и запускает их."
/>
<title>AI assistant — Плагин для Figma — кейс</title>
<title>AI assistant: плагин-мост между Cursor и Figma</title>
<script>
(function () {
var FONT_CSS = {
@@ -112,20 +112,20 @@
<meta property="og:site_name" content="Николай Мамадаев — продуктовый дизайнер" />
<meta property="og:locale" content="ru_RU" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:title" content="AI assistant — Плагин для Figma — кейс" />
<meta property="og:description" content="Кейс: AI assistant — плагин для Figma с AI-функциями." />
<meta property="og:title" content="AI assistant: плагин-мост между Cursor и Figma" />
<meta property="og:description" content="Кейс о плагине для Figma, который получает скрипты из Cursor и запускает их." />
<meta property="og:url" content="https://mamadaevv.site/cases/ai-assistant-figma/" />
<meta property="og:image" content="https://mamadaevv.site/assets/og/og-default.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="AI assistant — Плагин для Figma — кейс" />
<meta property="og:image:alt" content="AI assistant: плагин-мост между Cursor и Figma" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="AI assistant — Плагин для Figma — кейс" />
<meta name="twitter:description" content="Кейс: AI assistant — плагин для Figma с AI-функциями." />
<meta name="twitter:title" content="AI assistant: плагин-мост между Cursor и Figma" />
<meta name="twitter:description" content="Кейс о плагине для Figma, который получает скрипты из Cursor и запускает их." />
<meta name="twitter:image" content="https://mamadaevv.site/assets/og/og-default.png" />
<meta name="twitter:image:alt" content="AI assistant — Плагин для Figma — кейс" />
<meta name="twitter:image:alt" content="AI assistant: плагин-мост между Cursor и Figma" />
<script type="application/ld+json">
{
@@ -169,8 +169,8 @@
"@type": "CreativeWork",
"@id": "https://mamadaevv.site/cases/ai-assistant-figma/#page",
"url": "https://mamadaevv.site/cases/ai-assistant-figma/",
"name": "AI assistant — Плагин для Figma — кейс",
"description": "Кейс: AI assistant — плагин для Figma с AI-функциями.",
"name": "AI assistant: плагин-мост между Cursor и Figma",
"description": "Кейс о плагине для Figma, который получает скрипты из Cursor и запускает их.",
"isPartOf": {
"@id": "https://mamadaevv.site/#website"
},
@@ -181,7 +181,7 @@
"creator": {
"@id": "https://mamadaevv.site/#person"
},
"datePublished": "2026-09-25",
"datePublished": "2026-09-26",
"about": "UX/UI-дизайн и проектирование интерфейсов"
},
{
@@ -203,7 +203,7 @@
{
"@type": "ListItem",
"position": 3,
"name": "AI assistant — Плагин для Figma — кейс",
"name": "AI assistant: плагин-мост между Cursor и Figma",
"item": "https://mamadaevv.site/cases/ai-assistant-figma/"
}
]
@@ -416,26 +416,28 @@
<div class="section__inner case-article" data-case-sequential-images>
<p class="hero__eyebrow">Figma · Plugin</p>
<h1 class="case-page__h1">AI assistant</h1>
<p class="case-page__sub">Плагин для Figma с AI-функциями</p>
<p class="case-page__sub">Мост между Cursor IDE и Figma для создания и запуска скриптов</p>
<p class="section__prose">
<!-- Здесь будет введение -->
Я каждый день работал в Figma: проектировал сайты и приложения, использовал плагины, а когда готовых решений не хватало, делал свои. Со временем заметил, сколько времени уходит на повторяющиеся действия. Рутину вроде организации слоёв хотелось отдать скриптам, а сложные задачи, которые вручную казались неподъёмными, так и оставались в списке на потом.
</p>
<h2 id="context">Контекст</h2>
<p class="section__prose">
<!-- Контекст проекта -->
Плагин я делал для себя. Я уже использовал LLM для разных задач и писал с их помощью скрипты для Figma. Код создавал в Cursor, а для запуска раньше приходилось переносить его в Figma вручную. Сам писать код плагина и скриптов я не умел, поэтому по ходу работы изучал документацию и API плагинов Figma, а правила генерации скриптов в Cursor постоянно уточнял.
</p>
<h2 id="task">Задача</h2>
<p class="section__prose">
<!-- Описание задачи -->
Я хотел убрать ручной перенос кода и запускать скрипты прямо из Figma. Плагин должен был связать Cursor с Figma, дать возможность повторно запускать уже созданные сценарии и быстро копировать для LLM контекст выбранного объекта или страницы.
</p>
<h2 id="solution">Решение</h2>
<p class="section__prose">
Плагин добавляет в Figma панель AI-ассистента: от списка готовых сценариев до
редактора скриптов с логом выполнения. Ниже — ключевые экраны работы.
Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт готов, я открываю плагин и нажимаю «Выполнить». Код автоматически передаётся в Figma. Каталог сохраняет сценарии для повторного запуска без Cursor. Плагин не ограничен одной операцией: я могу добавлять скрипты под разные задачи. И всё же запускал их чаще, чем создавал новые.
</p>
<p class="section__prose">
Чтобы LLM точнее понимала макет, плагин умеет копировать информацию о выбранной ноде или целой странице. Логи выполнения мог читать LLM-бот в Cursor. Если проблема была в логике, я разбивал скрипт на небольшие шаги и проверял их по очереди. Сначала тестировал скрипт на отдельном файле. Когда всё работало, пробовал его в рабочем макете.
</p>
<figure class="case-media case-media--real">
<img
@@ -457,7 +459,7 @@
decoding="async"
data-image-viewer
/>
<figcaption>Редактор скрипта с подсветкой и AI-подсказками.</figcaption>
<figcaption>Редактор скрипта для запуска в Figma.</figcaption>
</figure>
<figure class="case-media case-media--real">
<img
@@ -490,7 +492,7 @@
decoding="async"
data-image-viewer
/>
<figcaption>Live Mode — интерактивный режим ассистента.</figcaption>
<figcaption>Live Mode: интерактивный режим ассистента.</figcaption>
</figure>
<figure class="case-media case-media--real">
<img
@@ -526,6 +528,27 @@
<figcaption>Ещё один пример работы AI-ассистента в Figma.</figcaption>
</figure>
<h2 id="result">Результат</h2>
<p class="section__prose">
В зависимости от скрипта задача, которая раньше занимала от 1 до 30 минут, теперь выполнялась одним нажатием. Это моя оценка, отдельную статистику я не собирал. Высвободившееся время позволяло браться за более сложные рабочие сценарии.
</p>
<p class="section__prose">
В рабочих файлах я часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также обновляли цветовые токены после ручных изменений и помогали собрать файл дизайн-системы с множеством страниц.
</p>
<p class="section__prose">
Были и другие задачи: добавить варианты компонентов, сохранить набор токенов из JSON в текстовом слое или собрать прототип с переходами по клавиатуре. Я автоматизировал и подсветку кода в макете, чтобы показать идею и подобрать цвета синтаксиса. Вручную я бы за это не взялся.
</p>
<p class="section__prose">
За время работы я лучше разобрался в Figma Plugin API. Теперь при планировании заранее замечаю, какие действия можно скриптовать, чтобы не тратить время на повторяющиеся операции.
</p>
<h2 id="next-steps">Планы</h2>
<p class="section__prose">
Дальше я хочу убрать Cursor из рабочего процесса и общаться с LLM-агентами прямо в Figma. В зависимости от задачи агент сможет подготовить переиспользуемый скрипт или выполнить действие по текстовой команде.
</p>
<p class="section__prose">
Сейчас готово только окно интерфейса. Работа с агентами и запуск действий пока не реализованы.
</p>
<figure class="case-media case-media--real">
<div class="case-video-shell">
<video controls preload="metadata" playsinline poster="../../assets/ai-assistant-figma/video/20260916-132035.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
@@ -534,13 +557,8 @@
Ваш браузер не поддерживает видео.
</video>
</div>
<figcaption>Запись экрана: работа AI-ассистента в Figma.</figcaption>
<figcaption>Макет интерфейса планируемой работы с LLM-агентами в Figma.</figcaption>
</figure>
<h2 id="result">Результат</h2>
<p class="section__prose">
<!-- Итоги -->
</p>
</div>
</main>
public/en/cases/ai-assistant-figma/index.html
+44 -26
View File
@@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Case Study: AI Assistant—a Figma plugin with AI features."
content="Case study of a Figma plugin that retrieves and runs scripts from Cursor."
/>
<title>AI Assistant — Figma Plugin — Case Study</title>
<title>AI assistant: a script bridge between Cursor and Figma</title>
<script>
(function () {
var FONT_CSS = {
@@ -112,20 +112,20 @@
<meta property="og:site_name" content="Nikolai Mamadaev — Product Designer" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ru_RU" />
<meta property="og:title" content="AI Assistant — Figma Plugin — Case Study" />
<meta property="og:description" content="Case Study: AI Assistant—a Figma plugin with AI features." />
<meta property="og:title" content="AI assistant: a script bridge between Cursor and Figma" />
<meta property="og:description" content="Case study of a Figma plugin that retrieves and runs scripts from Cursor." />
<meta property="og:url" content="https://mamadaevv.site/en/cases/ai-assistant-figma/" />
<meta property="og:image" content="https://mamadaevv.site/assets/og/og-default.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="AI Assistant — Figma Plugin — Case Study" />
<meta property="og:image:alt" content="AI assistant: a script bridge between Cursor and Figma" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="AI Assistant — Figma Plugin — Case Study" />
<meta name="twitter:description" content="Case Study: AI Assistant—a Figma plugin with AI features." />
<meta name="twitter:title" content="AI assistant: a script bridge between Cursor and Figma" />
<meta name="twitter:description" content="Case study of a Figma plugin that retrieves and runs scripts from Cursor." />
<meta name="twitter:image" content="https://mamadaevv.site/assets/og/og-default.png" />
<meta name="twitter:image:alt" content="AI Assistant — Figma Plugin — Case Study" />
<meta name="twitter:image:alt" content="AI assistant: a script bridge between Cursor and Figma" />
<script type="application/ld+json">
{
@@ -169,8 +169,8 @@
"@type": "CreativeWork",
"@id": "https://mamadaevv.site/en/cases/ai-assistant-figma/#page",
"url": "https://mamadaevv.site/en/cases/ai-assistant-figma/",
"name": "AI Assistant — Figma Plugin — Case Study",
"description": "Case Study: AI Assistant—a Figma plugin with AI features.",
"name": "AI assistant: a script bridge between Cursor and Figma",
"description": "Case study of a Figma plugin that retrieves and runs scripts from Cursor.",
"isPartOf": {
"@id": "https://mamadaevv.site/#website"
},
@@ -181,7 +181,7 @@
"creator": {
"@id": "https://mamadaevv.site/#person"
},
"datePublished": "2026-09-25",
"datePublished": "2026-09-26",
"about": "UX/UI design and interface design"
},
{
@@ -203,7 +203,7 @@
{
"@type": "ListItem",
"position": 3,
"name": "AI Assistant — Figma Plugin — Case Study",
"name": "AI assistant: a script bridge between Cursor and Figma",
"item": "https://mamadaevv.site/cases/ai-assistant-figma/"
}
]
@@ -416,26 +416,28 @@
<div class="section__inner case-article" data-case-sequential-images>
<p class="hero__eyebrow">Figma · Plugin</p>
<h1 class="case-page__h1">AI Assistant</h1>
<p class="case-page__sub">A Figma plugin with AI features</p>
<p class="case-page__sub">A bridge between Cursor IDE and Figma for creating and running scripts</p>
<p class="section__prose">
<!-- Здесь будет введение -->
I worked in Figma every day, designing software, apps and websites. I used plenty of plugins and made a few of my own when I could not find what I needed. The same manual steps kept coming back. Organizing layers was tedious, and some tasks felt unrealistic to do by hand, so I kept putting them off.
</p>
<h2 id="context">Context</h2>
<p class="section__prose">
<!-- Контекст проекта -->
I built the plugin for myself. I was already using LLMs for different tasks and asking them to help write Figma scripts. I created the code in Cursor, then had to move it into Figma manually to run it. I did not know how to write plugin or script code myself, so I learned from Figma's documentation and plugin API as I went, while refining my script-generation rules in Cursor.
</p>
<h2 id="task">Task</h2>
<p class="section__prose">
<!-- Описание задачи -->
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.
</p>
<h2 id="solution">Solution</h2>
<p class="section__prose">
The plugin adds an AI assistant panel to Figma — from a list of ready-made
scenarios to a script editor with an execution log. Key screens below.
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.
</p>
<p class="section__prose">
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.
</p>
<figure class="case-media case-media--real">
<img
@@ -457,7 +459,7 @@
decoding="async"
data-image-viewer
/>
<figcaption>Script editor with highlighting and AI hints.</figcaption>
<figcaption>Script editor for running code in Figma.</figcaption>
</figure>
<figure class="case-media case-media--real">
<img
@@ -490,7 +492,7 @@
decoding="async"
data-image-viewer
/>
<figcaption>Live Mode — interactive assistant mode.</figcaption>
<figcaption>Live Mode: interactive assistant mode.</figcaption>
</figure>
<figure class="case-media case-media--real">
<img
@@ -526,6 +528,27 @@
<figcaption>Another example of the AI assistant working in Figma.</figcaption>
</figure>
<h2 id="result">Result</h2>
<p class="section__prose">
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.
</p>
<p class="section__prose">
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.
</p>
<p class="section__prose">
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.
</p>
<p class="section__prose">
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.
</p>
<h2 id="next-steps">Plans</h2>
<p class="section__prose">
Next, I want to remove Cursor from the workflow and talk to LLM agents directly in Figma. Depending on the task, an agent could create a reusable script or carry out an action from a text command.
</p>
<p class="section__prose">
For now, only the interface window exists. Agent conversations and actions are not implemented yet.
</p>
<figure class="case-media case-media--real">
<div class="case-video-shell">
<video controls preload="metadata" playsinline poster="../../../assets/ai-assistant-figma/video/20260916-132035.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
@@ -534,13 +557,8 @@
Your browser does not support the video tag.
</video>
</div>
<figcaption>Screen recording: the AI assistant working in Figma.</figcaption>
<figcaption>Interface concept for the planned LLM agent workflow in Figma.</figcaption>
</figure>
<h2 id="result">Result</h2>
<p class="section__prose">
<!-- Итоги -->
</p>
</div>
</main>
public/sitemap.xml
+1 -1
View File
@@ -3,7 +3,7 @@
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://mamadaevv.site/cases/ai-assistant-figma/</loc>
<lastmod>2026-09-25</lastmod>
<lastmod>2026-09-26</lastmod>
<xhtml:link rel="alternate" hreflang="x-default" href="https://mamadaevv.site/cases/ai-assistant-figma/" />
<xhtml:link rel="alternate" hreflang="ru" href="https://mamadaevv.site/cases/ai-assistant-figma/" />
<xhtml:link rel="alternate" hreflang="en" href="https://mamadaevv.site/en/cases/ai-assistant-figma/" />
src/pages/cases/ai-assistant-figma.en.html
+34 -16
View File
@@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Case Study: AI Assistant—a Figma plugin with AI features."
content="Case study of a Figma plugin that retrieves and runs scripts from Cursor."
/>
<title>AI Assistant — Figma Plugin — Case Study</title>
<title>AI assistant: a script bridge between Cursor and Figma</title>
{{> head-links}}
{{> head-plyr}}
<style>
@@ -103,26 +103,28 @@
<div class="section__inner case-article" data-case-sequential-images>
<p class="hero__eyebrow">Figma · Plugin</p>
<h1 class="case-page__h1">AI Assistant</h1>
<p class="case-page__sub">A Figma plugin with AI features</p>
<p class="case-page__sub">A bridge between Cursor IDE and Figma for creating and running scripts</p>
<p class="section__prose">
<!-- Здесь будет введение -->
I worked in Figma every day, designing software, apps and websites. I used plenty of plugins and made a few of my own when I could not find what I needed. The same manual steps kept coming back. Organizing layers was tedious, and some tasks felt unrealistic to do by hand, so I kept putting them off.
</p>
<h2 id="context">Context</h2>
<p class="section__prose">
<!-- Контекст проекта -->
I built the plugin for myself. I was already using LLMs for different tasks and asking them to help write Figma scripts. I created the code in Cursor, then had to move it into Figma manually to run it. I did not know how to write plugin or script code myself, so I learned from Figma's documentation and plugin API as I went, while refining my script-generation rules in Cursor.
</p>
<h2 id="task">Task</h2>
<p class="section__prose">
<!-- Описание задачи -->
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.
</p>
<h2 id="solution">Solution</h2>
<p class="section__prose">
The plugin adds an AI assistant panel to Figma — from a list of ready-made
scenarios to a script editor with an execution log. Key screens below.
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.
</p>
<p class="section__prose">
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.
</p>
<figure class="case-media case-media--real">
<img
@@ -144,7 +146,7 @@
decoding="async"
data-image-viewer
/>
<figcaption>Script editor with highlighting and AI hints.</figcaption>
<figcaption>Script editor for running code in Figma.</figcaption>
</figure>
<figure class="case-media case-media--real">
<img
@@ -177,7 +179,7 @@
decoding="async"
data-image-viewer
/>
<figcaption>Live Mode — interactive assistant mode.</figcaption>
<figcaption>Live Mode: interactive assistant mode.</figcaption>
</figure>
<figure class="case-media case-media--real">
<img
@@ -213,6 +215,27 @@
<figcaption>Another example of the AI assistant working in Figma.</figcaption>
</figure>
<h2 id="result">Result</h2>
<p class="section__prose">
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.
</p>
<p class="section__prose">
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.
</p>
<p class="section__prose">
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.
</p>
<p class="section__prose">
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.
</p>
<h2 id="next-steps">Plans</h2>
<p class="section__prose">
Next, I want to remove Cursor from the workflow and talk to LLM agents directly in Figma. Depending on the task, an agent could create a reusable script or carry out an action from a text command.
</p>
<p class="section__prose">
For now, only the interface window exists. Agent conversations and actions are not implemented yet.
</p>
<figure class="case-media case-media--real">
<div class="case-video-shell">
<video controls preload="metadata" playsinline poster="{{assetPrefix}}assets/ai-assistant-figma/video/20260916-132035.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
@@ -221,13 +244,8 @@
Your browser does not support the video tag.
</video>
</div>
<figcaption>Screen recording: the AI assistant working in Figma.</figcaption>
<figcaption>Interface concept for the planned LLM agent workflow in Figma.</figcaption>
</figure>
<h2 id="result">Result</h2>
<p class="section__prose">
<!-- Итоги -->
</p>
</div>
</main>
src/pages/cases/ai-assistant-figma.html
+34 -16
View File
@@ -5,9 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta
name="description"
content="Кейс: AI assistant — плагин для Figma с AI-функциями."
content="Кейс о плагине для Figma, который получает скрипты из Cursor и запускает их."
/>
<title>AI assistant — Плагин для Figma — кейс</title>
<title>AI assistant: плагин-мост между Cursor и Figma</title>
{{> head-links}}
{{> head-plyr}}
<style>
@@ -103,26 +103,28 @@
<div class="section__inner case-article" data-case-sequential-images>
<p class="hero__eyebrow">Figma · Plugin</p>
<h1 class="case-page__h1">AI assistant</h1>
<p class="case-page__sub">Плагин для Figma с AI-функциями</p>
<p class="case-page__sub">Мост между Cursor IDE и Figma для создания и запуска скриптов</p>
<p class="section__prose">
<!-- Здесь будет введение -->
Я каждый день работал в Figma: проектировал сайты и приложения, использовал плагины, а когда готовых решений не хватало, делал свои. Со временем заметил, сколько времени уходит на повторяющиеся действия. Рутину вроде организации слоёв хотелось отдать скриптам, а сложные задачи, которые вручную казались неподъёмными, так и оставались в списке на потом.
</p>
<h2 id="context">Контекст</h2>
<p class="section__prose">
<!-- Контекст проекта -->
Плагин я делал для себя. Я уже использовал LLM для разных задач и писал с их помощью скрипты для Figma. Код создавал в Cursor, а для запуска раньше приходилось переносить его в Figma вручную. Сам писать код плагина и скриптов я не умел, поэтому по ходу работы изучал документацию и API плагинов Figma, а правила генерации скриптов в Cursor постоянно уточнял.
</p>
<h2 id="task">Задача</h2>
<p class="section__prose">
<!-- Описание задачи -->
Я хотел убрать ручной перенос кода и запускать скрипты прямо из Figma. Плагин должен был связать Cursor с Figma, дать возможность повторно запускать уже созданные сценарии и быстро копировать для LLM контекст выбранного объекта или страницы.
</p>
<h2 id="solution">Решение</h2>
<p class="section__prose">
Плагин добавляет в Figma панель AI-ассистента: от списка готовых сценариев до
редактора скриптов с логом выполнения. Ниже — ключевые экраны работы.
Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт готов, я открываю плагин и нажимаю «Выполнить». Код автоматически передаётся в Figma. Каталог сохраняет сценарии для повторного запуска без Cursor. Плагин не ограничен одной операцией: я могу добавлять скрипты под разные задачи. И всё же запускал их чаще, чем создавал новые.
</p>
<p class="section__prose">
Чтобы LLM точнее понимала макет, плагин умеет копировать информацию о выбранной ноде или целой странице. Логи выполнения мог читать LLM-бот в Cursor. Если проблема была в логике, я разбивал скрипт на небольшие шаги и проверял их по очереди. Сначала тестировал скрипт на отдельном файле. Когда всё работало, пробовал его в рабочем макете.
</p>
<figure class="case-media case-media--real">
<img
@@ -144,7 +146,7 @@
decoding="async"
data-image-viewer
/>
<figcaption>Редактор скрипта с подсветкой и AI-подсказками.</figcaption>
<figcaption>Редактор скрипта для запуска в Figma.</figcaption>
</figure>
<figure class="case-media case-media--real">
<img
@@ -177,7 +179,7 @@
decoding="async"
data-image-viewer
/>
<figcaption>Live Mode — интерактивный режим ассистента.</figcaption>
<figcaption>Live Mode: интерактивный режим ассистента.</figcaption>
</figure>
<figure class="case-media case-media--real">
<img
@@ -213,6 +215,27 @@
<figcaption>Ещё один пример работы AI-ассистента в Figma.</figcaption>
</figure>
<h2 id="result">Результат</h2>
<p class="section__prose">
В зависимости от скрипта задача, которая раньше занимала от 1 до 30 минут, теперь выполнялась одним нажатием. Это моя оценка, отдельную статистику я не собирал. Высвободившееся время позволяло браться за более сложные рабочие сценарии.
</p>
<p class="section__prose">
В рабочих файлах я часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также обновляли цветовые токены после ручных изменений и помогали собрать файл дизайн-системы с множеством страниц.
</p>
<p class="section__prose">
Были и другие задачи: добавить варианты компонентов, сохранить набор токенов из JSON в текстовом слое или собрать прототип с переходами по клавиатуре. Я автоматизировал и подсветку кода в макете, чтобы показать идею и подобрать цвета синтаксиса. Вручную я бы за это не взялся.
</p>
<p class="section__prose">
За время работы я лучше разобрался в Figma Plugin API. Теперь при планировании заранее замечаю, какие действия можно скриптовать, чтобы не тратить время на повторяющиеся операции.
</p>
<h2 id="next-steps">Планы</h2>
<p class="section__prose">
Дальше я хочу убрать Cursor из рабочего процесса и общаться с LLM-агентами прямо в Figma. В зависимости от задачи агент сможет подготовить переиспользуемый скрипт или выполнить действие по текстовой команде.
</p>
<p class="section__prose">
Сейчас готово только окно интерфейса. Работа с агентами и запуск действий пока не реализованы.
</p>
<figure class="case-media case-media--real">
<div class="case-video-shell">
<video controls preload="metadata" playsinline poster="{{assetPrefix}}assets/ai-assistant-figma/video/20260916-132035.webp" data-case-video-player style="display: block; width: 100%; height: auto; margin: 0">
@@ -221,13 +244,8 @@
Ваш браузер не поддерживает видео.
</video>
</div>
<figcaption>Запись экрана: работа AI-ассистента в Figma.</figcaption>
<figcaption>Макет интерфейса планируемой работы с LLM-агентами в Figma.</figcaption>
</figure>
<h2 id="result">Результат</h2>
<p class="section__prose">
<!-- Итоги -->
</p>
</div>
</main>