UX Hero: Code Runner - це безкоштовний плагін для Figma, у якому ви пишете або вставляєте JavaScript, натискаєте Cmd+Enter, і код виконується прямо у відкритому файлі через Figma Plugin API. У версії 2 (6 жовтня 2026) плагін перейшов з SF Pro на Inter, тому скрипти працюють на Windows і в браузері, помилки показують рядок саме вашого коду, а кнопка Copy prompt for Claude копіює промпт, з яким Claude з першого разу пише робочі скрипти. Всередині 8 готових сніпетів, серед них аудит захардкоджених кольорів.
Нижче: що це за інструмент і кому він потрібен, що змінилось у v2, і покроковий приклад, як за 5 хвилин отримати від Claude скрипт, який знаходить у файлі весь текст без стилів.
Що таке Code Runner і навіщо він дизайнеру?
Code Runner - це маленький редактор для Figma Plugin API, де нудна частина вже зроблена: хелпери для автолейауту, шрифтів і варіантів завантажені, консоль показує нормальні логи, а кожен запуск відкочується одним Cmd+Z.
Навіщо це дизайнеру, а не розробнику плагінів? Бо половина рутини у Figma це однакові дії на сотнях шарів. Перейменувати 200 фреймів. Знайти всі кнопки, де колір вбитий хексом, а не змінною. Зібрати кнопку на 3 типи і 3 стани. Руками це вечір, скриптом хвилина. Раніше між вами і цією хвилиною стояло «треба вміти писати плагіни». Тепер скрипт пише Claude, а Code Runner дає місце, де його запустити.
Перша версія Code Runner виросла з моїх робочих скриптів під клієнтський проєкт. Станом на 6 жовтня 2026 у плагіна близько 475 користувачів у Figma Community. Друга версія закриває те, що найбільше заважало в першій: шрифти, незрозумілі помилки і відсутність нормального промпта для Claude.
Що змінилось у Code Runner v2?
| Що | v1 | v2 |
|---|---|---|
| Шрифт хелперів | SF Pro, є тільки на Mac. На Windows і в браузері сніпети падали | Inter, є в кожній Figma. setFont() перемикає сімейство |
| Помилки | рядок усередині плагіна, з якого нічого не зрозуміло | рядок вашого коду, клік переносить у редактор і підсвічує його |
| Claude | промпт треба було писати самому | кнопка Copy prompt for Claude з правилами плагіна і списком хелперів |
| Сніпети | кілька прикладів під старий проєкт | 8 сніпетів, що будують реальні компоненти, плюс аудит кольорів |
| Змінні | тільки сирі кольори | v(name) знаходить локальну змінну, bindFill() привʼязує її до шару |
| Дрібниці | - | запуск виділених рядків, автозбереження, Cmd+S, console.table, один undo на запуск |
Старі скрипти не зламаються: хелпери зберегли назви й аргументи, всі ключі DS на місці. Якщо дуже треба SF Pro, напишіть setFont('SF Pro') на початку скрипта.
Які сніпети є в Code Runner?
Сніпет завантажується в редактор одним кліком. Його можна прочитати, поміняти значення і запустити. Усі вісім використовують тільки асинхронні API, які вимагають файли з динамічним завантаженням сторінок.
- Button - 3 типи × 3 стани в одному component set, текст кнопки як property.
- Input - Default, Focus, Error і Disabled з лейблом і підказкою.
- Card - медіа, заголовок, текст і лінк, фіксована ширина.
- Badge - пʼять тонів з крапкою як варіанти.
- Avatar - чотири розміри з ініціалами, від 24 до 56 px.
- Toast - Success і Error з кольоровою смугою і дією.
- Palette - кожна локальна змінна кольору як свотч, привʼязаний до неї.
- Audit colors - знаходить і виділяє всі шари із захардкодженими кольорами: без змінної і без стилю.
Останній мій улюблений. Відкриваю чужий файл «з дизайн-системою», запускаю аудит, а там пів сторінки виділено. На одному реальному аудиті американського стартапу 73% кольорів у макетах виявились хексами, а не токенами. Code Runner показує таке за секунду.
Як написати скрипт для Figma з Claude: покроково
Задача з життя: перед передачею в розробку треба знайти всі текстові шари без текстового стилю і зрозуміти, які шрифти і розміри там «загубились». Плагін для цього шукати не будемо, напишемо свій за 5 хвилин.
- Скопіюйте промпт. У тулбарі Code Runner натисніть Copy prompt for Claude. Той самий промпт є на сторінці плагіна. Він пояснює Claude, як виконується код, які API можна, а які не можна (тільки async), і які хелпери вже є.
- Допишіть задачу в кінці промпта. Наприклад: «Знайди на поточній сторінці всі текстові шари без текстового стилю, згрупуй за шрифтом і розміром, виведи таблицю в консоль і виділи ці шари».
- Вставте відповідь Claude в редактор. Промпт просить Claude відповідати одним блоком коду, тож копіюєте як є.
- Натисніть Cmd+Enter (Ctrl+Enter на Windows). Шари виділяться на канвасі, а в консолі зʼявиться таблиця.
- Не сподобалось - Cmd+Z. Весь запуск це один крок undo.
Ось приблизно такий скрипт Claude повертає на цю задачу:
// Текст без стилю: групуємо за шрифтом і розміром, виділяємо на канвасі
const texts = page.findAllWithCriteria({ types: ['TEXT'] });
const loose = texts.filter(t => t.textStyleId === '');
if (!loose.length) { ok('Усі тексти мають стилі'); return; }
const groups = {};
for (const t of loose) {
const font = t.fontName === figma.mixed ? 'mixed' : t.fontName.family + ' ' + t.fontName.style;
const size = t.fontSize === figma.mixed ? 'mixed' : t.fontSize;
const key = font + ' / ' + size;
groups[key] = (groups[key] || 0) + 1;
}
console.table(Object.entries(groups).map(([k, n]) => ({ 'шрифт / розмір': k, 'шарів': n })));
page.selection = loose;
figma.viewport.scrollAndZoomIntoView(loose);
ok(loose.length + ' текстових шарів без стилю');Зверніть увагу: тут немає жодного figma.getNodeById чи figma.currentPage = .... Саме через такі синхронні виклики скрипти від «голого» ChatGPT чи Claude часто падають у сучасних файлах. Промпт з плагіна закриває це правило заздалегідь, тому перший скрипт зазвичай запускається без правок.
Що робити, якщо скрипт падає?
Скопіювати помилку і віддати її Claude. У v2 це реально працює, бо помилка вказує на ваш рядок, а не на внутрішності плагіна:
- У консолі біля помилки стоїть мітка на кшталт
Line 6:21. Клік переносить у редактор і підсвічує рядок. - Якщо зламався хелпер (наприклад,
hex()отримав не той рядок), помилка вказує на рядок, звідки його викликали. - Синтаксичні помилки ловляться ще до запуску, з рядком і колонкою.
- Можна виділити кілька рядків і запустити тільки їх. Номери рядків при цьому лишаються правильними.
Одне правило безпеки: скрипт може видаляти і переміщати шари, якщо його про це попросили. Тому чужі скрипти (і скрипти від Claude) читайте перед запуском, а нові пробуйте на копії файлу. Ось чому я раджу дизайнерам вчитись хоча б читати JavaScript: писати його за вас буде AI, а відповідальність за файл лишається ваша.
Code Runner, Figma MCP чи Claude Code: що коли брати?
| Інструмент | Напрямок | Коли брати |
|---|---|---|
| Code Runner | Claude → скрипт → канвас Figma | рутина у файлі: аудит, перейменування, генерація компонентів і станів |
| Figma MCP + Claude | макет → контекст для Claude | Claude має «бачити» дизайн, щоб писати код продукту. Детально в матеріалі Figma MCP сервер: дизайн у код |
| Claude Code | репозиторій → код продукту | компоненти в React, токени в CSS, Storybook, сайт. Почати можна з гайду Claude Code для дизайнерів |
Вони не конкурують. Це три шматки одного пайплайну дизайнера, який кодить. Code Runner найпростіший вхід: ні терміналу, ні репозиторію, ні налаштувань. Відчули, що код слухається вас, далі вже не страшно відкрити Claude Code. Як це виглядає наживо, я показую на YouTube-каналі UX Hero.
Як встановити Code Runner?
- Відкрийте UX Hero: Code Runner у Figma Community і відкрийте плагін у своєму файлі.
- У будь-якому файлі: Resources → Plugins → UX Hero: Code Runner.
- Оберіть сніпет Button і натисніть Cmd+Enter. Перший компонент буде на канвасі за кілька секунд.
Плагін безкоштовний, без акаунта, працює офлайн. Якщо хочете отримувати нові скрипти і плагіни, коли вони виходять, заходьте в Telegram-бот UX Hero.
Часті питання
Чи безкоштовний Code Runner?
Так. Плагін UX Hero: Code Runner безкоштовний, без лімітів, без акаунта і без платної версії. Він працює офлайн: у плагіна немає доступу до мережі, тому ваш код і файл не виходять за межі Figma.
Чи працює Code Runner на Windows і у Figma в браузері?
Так, з версії 2. Перша версія використовувала шрифт SF Pro, який є тільки на Mac, тому сніпети падали на Windows і в браузері. У v2 всі хелпери і сніпети працюють на Inter, який є в кожній Figma. Замість Cmd+Enter на Windows натискайте Ctrl+Enter.
Чи треба знати JavaScript, щоб користуватись Code Runner?
Писати з нуля не обовʼязково. Достатньо скопіювати промпт кнопкою Copy prompt for Claude, описати задачу словами і вставити готовий скрипт. Але читати код варто навчитись: перед запуском ви маєте розуміти, що саме скрипт змінить у файлі.
Чи безпечно запускати скрипти від Claude у робочому файлі?
Скрипт працює в пісочниці Figma з тими самими правами, що й будь-який плагін: він може змінювати відкритий файл, але не має доступу до мережі чи диска. Кожен запуск це один крок undo, тож Cmd+Z відкочує все одразу. Нові скрипти краще спершу пробувати на копії файлу.
Чим Code Runner відрізняється від Figma MCP?
Figma MCP дає Claude читати макет і контекст дизайну, щоб писати код продукту. Code Runner працює у зворотний бік: Claude пише скрипт, а плагін виконує його всередині файлу і змінює канвас. Перше про шлях з Figma в код, друге про автоматизацію рутини в самій Figma.
Один скрипт економить вечір. Але скрипт, який знаходить захардкоджені кольори, лікує симптом. Щоб їх не було взагалі, потрібна система: токени в три шари, компоненти з усіма станами і код, який на них спирається. Цьому я вчу на курсі «Дизайн-система з AI», і Code Runner там один з робочих інструментів.