Как сгенерировать свой плагин в Figma 2026?

Плагины годами закрывали боли дизайнеров: то, что Figma не умела, комьюнити дописывало руками. Мы и сами не раз собирали подборки плагинов, которые упрощают работу в Figma – вокруг этого выросла целая экосистема, от бесплатных утилит на пару кнопок до полноценных бизнесов с доступом по подписке.

Figma Generative Plugins. Источник: Figma

А на Config 2026 Figma показала функцию, которая переворачивает эту модель. Генеративные плагины Figma позволяют создать собственный плагин по текстовому запросу, без единой строчки кода, прямо в рабочем файле. В этой статье разберёмся, как это работает и создадим четыре полезных плагина c промтами, которые можно просто скопировать и использовать.

Что такое генеративные плагины в Figma

Генеративные плагины – это функция AI-агента Figma. Ты в чате описываешь инструмент, который тебе нужен: что он делает, какие у него настройки, как выглядит результат. Агент пишет код, собирает интерфейс и отдаёт готовый плагин прямо в твоём файле.

Figma UI-Kit PropsKit. Источник Figma

Интерфейс таких плагинов собирается на PropsKit, внутреннем UI-ките Figma. Поэтому сгенерированный плагин выглядит не как чужеродное окно с кривой версткой, а как нативная панель самой Figma: те же элементы, те же поля ввода, те же слайдеры. Плагин можно дорабатывать и дальше, просто продолжая диалог с агентом.

Как это было раньше: комьюнити, подборки, подписки

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

Плагины в Figma Community

Сама система плагинов была отличным решением для своего времени. Комьюнити Figma накодило тысячи инструментов, и главные боли, давно закрыты достойными плагинами. Подборкой классных плагинов даже мы делились в уроке про плагины на бесплатном курсе Figmaster, она там есть до сих пор, переходите и забирайте.

Проблема была в другом: если твоя задача чуть нестандартная, готового плагина под неё нет и не будет. Писать свой означало разбираться с кодом и лезть в дебри программирования, что дизайнеры делали крайне редко (до вайбкодинга разумеется 😅).

Плагин для генерации графиков

Давайте переходить непосредственно к генерации плагинов в Figma. Первым разберём плагин для генерации графиков.

Graph chart plugin

Незаменимая вещь для дашбордов. Рисовать бар-чарты руками, а потом перестраивать их под новые данные, боль, знакомая каждому, кто делал хоть один аналитический интерфейс.

Промт для генерации:

Create a plugin that generates editable charts on the canvas as vector layers (not images).

Chart types (dropdown control): Line, Bar, Pie.

Data modes (toggle control):

• «Random» — generate 6–12 plausible data points automatically
• «Paste data» — a text field where I paste comma- or newline-separated values (label,value per line)

Controls:

• Trend slider (for Line/Bar): from «declining» to «flat» to «growing» — skews random data toward that trend
  
• Stroke width slider (1–8 px) for line charts
• Data points count slider (3–20)
• Color: use the file’s local color variables if available, otherwise a default palette
• Toggle: show/hide value labels and axis labels

Output: a named frame with auto layout where possible; every element (bars, lines, labels) must be a separate editable layer. Regenerate on every control change.

После генерации проверь плагин на реальных данных: вставь 6–8 значений и посмотри, как он обрабатывает подписи и насколько верное отображение. Дальше этот плагин ты можешь модифицировать новыми промтмами в том же чате, добавить, например, ползунок сглаживания кривой при генерации Line Chart.

Генератор QR-кодов

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

QR-code generator plugin

Промт для генерации:

Create a plugin called «QR code generator» that generates scannable QR codes as vector SVG shapes and pastes them onto the Figma canvas.

Two-step flow:

• User configures settings and clicks «Generate» — this renders a live preview of the QR code inside the plugin panel (rendered as an SVG displayed in an <img> tag).
• User clicks «Paste on canvas» (disabled until a preview is generated) — this creates the QR code as a vector node on the canvas using figma.createNodeFromSvg(), centered in the viewport.

Controls:

• URL or text — text input, default: https://figma.com
• Error correction — options: L, M, Q, H (default M)
• Size — slider 128–1024px, step 8, default 512
• Corner style — dropdown: Square, Rounded, Dots
• Foreground color — color picker, default black
• Background color — color picker, default white
• Transparent background — switch (when on, preview shows checkerboard behind the QR code)

Preview behavior:

• Preview area is 200×200px with a checkerboard background pattern (CSS repeating-conic-gradient).
• The QR code preview is an SVG rendered as a data URI in an <img> element — not canvas-based.
• After generating, changing foreground color, background color, corner style, or transparent background should automatically re-request the preview without needing to click Generate again.
• Text or error correction changes require clicking Generate again.

Canvas output:

• QR code is built as a single SVG <path> element with all cells combined, then placed on canvas via figma.createNodeFromSvg().
• Square style = rectangles, Rounded = rounded rectangles (0.3 × cell radius), Dots = circles.
• Frame background fill respects the background color and transparent toggle.
• The frame is named QR — {text} (truncated to 60 chars).

Technical requirements:

• Implement the full QR encoding algorithm in code.ts: byte-mode encoding, Reed-Solomon error correction with GF(256) arithmetic, versions 1–10, all 8 mask patterns with penalty scoring, format info bits.
• SVG path generation happens in code.ts and the complete SVG string is sent to the UI for preview.
• Wrap both preview and generate handlers in try/catch — show errors in the preview area rather than failing silently.
• Support params persistence via setPluginData / getPluginData so relaunching from a QR frame restores its settings.
• Remember params between runs using paramsMemory.

Обязательно протестируй сгенерированные коды, И так же как и графики, ты можешь дорабатывать данный плагин, добавлять другие паттерны отображения кодов, форматы и т.д.

Таблицы на Auto Layout

Частая проблема наших студентов на курсе UX/UI-дизайнер, в больших интерфейсах, админках, CRM, дашбордах, без таблиц никуда. А собирать их вручную на Auto Layout долго и муторно,  – особенно если ещё не до конца разобрался, как работает Auto Layout.

Table generator plugin

Промт для генерации:

Create a plugin that builds data tables using proper auto layout structure.

Structure: table frame (vertical auto layout) → row frames (horizontal auto layout) → cell frames with text layers. Cells must hug content vertically and fill horizontally so the table resizes cleanly when data is edited. Important: set layoutSizingHorizontal / layoutSizingVertical on child nodes only AFTER appendChild — not before, otherwise Figma throws an error.

Data modes (toggle between two options):

• «Random» — generate placeholder content using realistic names, emails, dates, statuses, and dollar amounts
• «Paste data» — multiline text field accepting CSV or tab-separated values; first line becomes the header row

Controls:

• Columns slider (2–8) and rows slider (2–20) — for random mode
• Cell padding slider (4–32 px)
• Toggle: header row with dark background (#222) and white text
• Toggle: zebra striping — alternating white / light-grey row backgrounds
• Border width slider (0–2 px) and border color picker
• Text styles: look up the file’s local text styles — use a bold/heading style for headers and a body/regular style for cell text. Fall back to Inter Bold / Inter Regular if none exist.

Output: one named «Table» frame centered in the viewport; every cell’s text remains fully editable. The button should only be enabled when nothing is selected.

Генератор вариантов компонентов

Одна из рутинных частей работы над UI-китом и дизайн-системами это разложить каждый компонент на состояния. Cтуденты с нашего курса по дизайн-системам не дадут соврать. Механическая работа на часы… Дизайн-системы это долго и дорого. Поэтому почему бы не автоматизировать часть процесса при помощи плагина на генерацию вариантов компонентов?

Плагин для генерации вариантов компонентов

Промт для генерации:

Create a plugin that generates interactive state variants for a selected component.

Behavior: I select a component (or a frame to be converted into a component). The plugin creates a component set with variants along a «State» property: Default, Hover, Pressed, Disabled, Focused.

State styling rules (each adjustable via controls):

• Hover: lighten or darken fill by N% (slider, default 8%)
• Pressed: darken fill by N% (slider, default 16%)
• Disabled: reduce opacity (slider, default 40%) and desaturate
• Focused: add an outer stroke ring (color picker + width slider, default 2 px)

Controls:

• Toggle per state: include/exclude it from the set
• Direction dropdown: lay variants out horizontally or vertically with 24 px spacing

Use color variables from the file where possible instead of hardcoded values. Keep all overrides (text, icons) intact across variants. Name the set after the original layer.

Ограничения и подводные камни

Чтобы не было ощущения, что всё волшебно и мы в мире с розовыми пони, вот честный список того, с чем ты, вероятнее всего столкнёшься.

• Это бета. Плагины генерируются не с первого раза идеально. Мой опыт: простые утилиты (таблицы, варианты) – 1–2 итерации, что-то с нетривиальной логикой (QR-коды, графики) – 3–5 итераций правок в чате. Закладывай на это время и всегда проверяй результат на реальном кейсе.
• Кредиты. Сейчас генерация бесплатна, но после выхода агента из беты за создание и правки плагинов будут списываться AI-кредиты.
• Плагины пока не публикуются. Поделиться плагином с комьюнити или красиво выложить его для всей организации пока нельзя, только через доступ к файлу. Поэтому мы и делимся именно промтами, а не готовыми плагинами. Figma обещает публикацию «в ближайшие месяцы», но точных дат, пока нет.
• Сложное по-прежнему сложно. Генеративный плагин отлично справляется с манипуляциями внутри Figma. Но плагин, которому нужны внешние API, авторизация или база данных это всё ещё территория классической разработки.

Плагины умирают?

Главный сдвиг даже не в технологии, а в модели. Раньше плагин был продуктом: кто-то делал его для тысяч пользователей, усредняя под всех. Теперь плагин – это личный инструмент под твой конкретный workflow, созданный за десять минут и выброшенный без сожаления, когда перестал быть нужен. Это часть большого сдвига – AI уже меняет саму работу дизайнеров, и плагины лишь один из примеров.

AI-агент Figma уже умеет решать задачи напрямую, без плагина вообще: описал проблему – получил результат. По моей оценке, создавать плагины стоит для каких-то многократно повторяющихся задач, а какие-то одноразовые и точечные моменты, отлично закроет Figma AI Agent.

Начни с малого: возьми один промт из этой статьи, вставь в агента и доведи плагин под себя. Это лучший способ прочувствовать новую механику. А если хочешь разобраться с Figma системно, от Auto layout до компонентов, и стать реально PRO в Figma, залетай на наш бесплатный курс Figmaster.