Безкоштовний плагін Figma · UX Hero
Claude to Figma.Опиши екран, отримай справжні шари.
Claude пише екран як JSON, плагін будує auto layout фрейми з твоїми токенами і текстовими стилями. Не картинка: далі редагуєш як звичайний дизайн.
Плагін уже у Figma Community: один клік, і він у твоєму акаунті. Працює і в браузері, і в десктопній Figma.
Запуск · 1 хвилина
Три кроки.
01
Відкрий у Figma
Сторінка плагіна у Figma Community → Open in… і обери свій файл.
figma.com/community → UX Hero: Claude to Figma → Open in02
Запусти у файлі
Будь-який файл, браузер або десктоп. Далі плагін завжди під рукою.
Правий клік → Plugins → UX Hero: Claude to Figma03
Встав JSON і Render
«Copy prompt for Claude» → опиши екран → встав відповідь Claude у плагін.
Встав JSON → Render
Що вміє
Шари, токени, ітерації.
Туторіал · що є що
Кожна кнопка плагіна.
Кнопок багато, але для старту вистачить трьох: Copy prompt for Claude, Render і Replace selection. Решта - для правок і для роботи на своїй дизайн-системі.
Перший екран за 3 кроки
01
Copy prompt for Claude
Кнопка у верхній панелі. Копіює промпт, який вчить Claude формату: схема, правила і приклад. Встав його в Claude і одразу під ним опиши свій екран: для чого він, мобільний чи десктоп, світлий чи темний.
02
Встав відповідь
Скопіюй відповідь Claude цілком і встав у редактор плагіна. Текст навколо JSON і блоки коду не заважають: плагін сам знайде JSON.
03
Render
Кнопка Render або ⌘ Enter. На канвасі з'явиться фрейм із справжніми шарами на auto layout. Не сподобалось - ⌘Z, і канвас як був.
Верхня панель
| Кнопка | Що робить |
|---|---|
| Render ⌘ Enter | Будує JSON з редактора як шари Figma. Один Render - один крок Undo. |
| Examples | Шість готових екранів: Login, Onboarding, Dashboard cards, Pricing, Settings list, Empty state. Підставляє JSON у редактор, далі тиснеш Render. Зручно, щоб побачити формат. |
| Format ⇧⌘F | Вирівнює JSON і прибирає текст Claude навколо нього. Не обов'язкова: Render і так знаходить JSON у відповіді. |
| Copy prompt for Claude у вузькому вікні: Prompt | Копіює промпт, який вчить Claude формату: схема, правила, приклад, розміри 390 для мобільного і 1440 для десктопу. Вставляєш у Claude і під ним описуєш екран. |
| Copy schema у вузькому вікні: Schema | Повний довідник формату v1. Для Claude Code, Cursor або своєї документації. |
| Kit | Меню дизайн-системи, див. нижче. |
| Settings | Два перемикачі, див. нижче. |
| Help | Відкриває цей туторіал. |
| Clear | Над панеллю результату. Очищає список повідомлень після рендеру. |
Куди ставити екран
Перемикач біля кнопки Render. Обираєш перед тим, як натиснути Render.
| Кнопка | Що робить |
|---|---|
| New | Новий фрейм праворуч від усього, що є на сторінці. Режим за замовчуванням. |
| Into selection | Всередину виділеного фрейму. Наприклад, нова секція в готову сторінку. |
| Replace selection | Нова версія стає на місце виділеного екрана. Стара переїжджає в секцію History поруч, підписана і заблокована: її можна повернути. |
| Patch | Точкові правки без перезбирання. Claude присилає {"patch": [...]} з id потрібних шарів, плагін міняє тільки їх. Інстанси, змінні і твої ручні правки лишаються. |
Коли виділений екран
Виділи на канвасі екран, який зібрав плагін, і над редактором з'явиться смужка з його назвою, версією і кнопками.
| Кнопка | Що робить |
|---|---|
| Copy iteration prompt | Головна кнопка для правок. Копіює для Claude правила, нагадування формату і поточний JSON екрана. Вставляєш у Claude, внизу пишеш, що змінити, відповідь вставляєш у плагін і тиснеш Render з Replace selection. |
| Load JSON | Повертає в редактор JSON, з якого зібраний екран. Можна поправити руками і зібрати знову. |
| From canvas | Читає екран таким, який він зараз на канвасі: з твоїми ручними правками і заміненими компонентами. Наступний Replace їх не загубить. |
| Read as JSON | Те саме для будь-якого фрейму, навіть зробленого руками без плагіна. |
| Restore this version | З'являється, коли виділена стара версія в History. Повертає її на місце, поточна йде в History. |
| Clear history | Видаляє секцію History цього екрана. Спершу перепитає. |
| «changed on canvas» | Не кнопка, а підказка: екран правили руками після рендеру. Replace перед заміною перепитає. |
Kit · твоя дизайн-система
Меню Kit у верхній панелі. Потрібне, щоб Claude ставив справжні компоненти твоєї бібліотеки, а не малював схожі.
| Кнопка | Що робить |
|---|---|
| Scan kit from selection | Виділи екрани, зібрані руками з твоєю бібліотекою. Плагін запам'ятає компоненти, варіанти, токени і текстові стилі в цьому файлі. |
| Copy kit for Claude | Короткий текст з назвами компонентів, варіантів і токенів. Вставляєш у Claude разом із запитом, і він ставить справжні інстанси бібліотеки з кольорами на змінних. |
| Edit kit · Save editor as kit | Відкриває kit як JSON у редакторі. Поправив і зберіг. |
| Check selection against kit | Шукає кольори без змінних, фрейми, які тільки схожі на компоненти, і заборонені символи. Кнопка Fix colors прив'язує кольори до змінних. |
Налаштування і клавіші
| Кнопка | Що робить |
|---|---|
| Auto-load JSON on select | Виділив екран, і його JSON сам з'явився в редакторі. Якщо в редакторі є незібрані зміни, спершу спитає. |
| Keep a History version on Patch | Перед Patch копія екрана йде в History. За замовчуванням вимкнено: Undo теж працює. |
| ⌘ Enter · ⇧⌘F · ⌘S | Render · Format · зберегти текст редактора (він і так зберігається сам). |
| Tab · ⇧Tab · Esc | Відступ рядків · назад · закрити довідку або меню. |
Claude to Figma чи Code Runner?
Claude to Figma
Малює екрани.
Claude описує екран у JSON, плагін будує з нього шари: фрейми, текст, кнопки, картки. Для нових екранів і нових версій екрана.
Code Runner
Виконує код у файлі.
Запускає JavaScript, який написав Claude: змінні з токенів, масові правки, перейменування, перевірки. Для того, що руками робити довго. Про Code Runner
Разом вони дають повний цикл: Claude to Figma будує екран, Code Runner робить змінні з токенів і прив'язує до них усі кольори екрана.
Плагін дає екран. Курс вчить доводити його до продукту.
Курс · Дизайн-система + AI
Токени з Figma, компоненти з усіма станами, Storybook і Claude, який тримає систему в порядку.
Дивитись курсНові плагіни і ефіри: Telegram-бот UX Hero