Якщо треба щось намалювати чи змінити у Figma руками Claude, вигідніше попросити один скрипт, ніж підключати MCP. Через MCP Claude будує макет крок за кроком: у моєму досвіді кнопка займає близько 2 хвилин, сторінка 15-30 хвилин, і ліміт тарифу Pro швидко закінчується. Скрипт для Figma Plugin API у безкоштовному плагіні UX Hero: Code Runner виконується за секунду, а MCP варто лишити для іншої задачі: щоб Claude читав дизайн і писав по ньому код.
Нижче: чому MCP-малювання таке дороге, як працює підхід зі скриптом, таблиця порівняння за п'ятьма критеріями, коли MCP все ж кращий, і покрокова інструкція, як спробувати за 5 хвилин.
Чому Claude у Figma через MCP виходить так дорого?
MCP (Model Context Protocol) - це стандарт, через який AI-агент викликає інструменти зовнішньої програми, у нашому випадку Figma.
Коли ви кажете Claude «намалюй у Figma кнопку» і в нього підключений MCP-сервер, що вміє писати в канвас, агент не малює кнопку цілком. Він робить серію маленьких кроків:
- створює фрейм і чекає відповідь від Figma
- вмикає auto layout, ставить відступи, знову чекає
- додає текст, підвантажує шрифт, перевіряє результат
- часто робить скріншот або читає структуру шарів, щоб переконатись, що все стало як треба
- щось поправляє і перевіряє ще раз
Кожен такий крок - окремий виклик інструмента, тобто окремий round-trip між моделлю і Figma. І результат кожного виклику лягає в контекст розмови. До двадцятого кроку Claude тягне за собою всю історію попередніх дев'ятнадцяти, а кожна відповідь моделі на цьому контексті коштує токенів.
У моїй практиці це виглядає так: проста кнопка з текстом і станом займає близько 2 хвилин, сторінка лендингу 15-30 хвилин, і за цей час видно, як агент перебирає дрібні операції одну за одною. На тарифі Claude Pro за $20 на місяць ліміт рахується вікнами по 5 годин, і кілька таких «намалюй сторінку» можуть з'їсти його задовго до кінця вікна. Це не лабораторний бенчмарк, а мій робочий досвід, але закономірність проста: більше кроків - більше токенів - довше чекати.
Як працює підхід «один скрипт через плагін»?
Figma Plugin API - це JavaScript-інтерфейс, через який плагіни створюють і змінюють шари у файлі.
Замість того щоб керувати Figma покроково, Claude пише весь план одразу у вигляді одного скрипта: створити фрейми, увімкнути auto layout, додати тексти, прив'язати кольори до змінних. Ви копіюєте цей код у UX Hero: Code Runner, натискаєте Cmd+Enter, і Figma виконує все нативно, всередині файлу, без жодного обміну з моделлю.
Що це дає на практиці, на двох наших демо:
- Хекси в токени. Скрипт знайшов на сторінці 51 шар із захардкодженими кольорами, склеїв майже однакові відтінки, створив колекції змінних і прив'язав кожен шар. Час виконання - приблизно 1,1 секунди.
- Два екрани з одного промпта. Логін і головна 390×844 поруч, усе в auto layout, відступи кратні 8, кольори зі змінних. Claude пише скрипт один раз, Figma будує обидва екрани за секунду-дві.
Головне тут навіть не швидкість виконання, а ціна. Claude витрачає токени на одну відповідь з кодом, а не на десятки викликів інструментів з наростаючим контекстом. І для цього не потрібні ні MCP, ні Claude Code, ні платний тариф: JavaScript пише навіть безкоштовний Claude у звичайному чаті. Code Runner теж безкоштовний, без акаунта і працює на безкоштовній Figma.
MCP чи скрипт: що швидше, дешевше і точніше?
Порівняння для задачі «Claude має щось створити або змінити на канвасі Figma»:
| Критерій | Claude + MCP (малює по кроку) | Claude пише скрипт + Code Runner |
|---|---|---|
| Швидкість | кнопка ~2 хв, сторінка 15-30 хв (мій досвід) | виконання ~1 секунда, плюс час на одну відповідь Claude |
| Вартість токенів | десятки викликів, контекст росте з кожним кроком | одна відповідь з кодом |
| Правки | нова серія кроків, знову по одному | міняєте рядок або просите Claude поправити скрипт і запускаєте ще раз |
| Точність | агент може загубитись посередині й піти не туди | результат детермінований: той самий скрипт дає той самий результат |
| Налаштування | MCP-сервер, авторизація, клієнт з підтримкою MCP | встановити плагін з Figma Community, скопіювати промпт |
| Тариф Claude | на практиці потрібен платний, бо ліміт тане | працює і на безкоштовному |
| Відкат | багато окремих змін у файлі | увесь запуск - один Cmd+Z |
Моя рекомендація: для генерації і масових змін на канвасі беріть скрипт. Кнопка, екрани, перейменування сотні шарів, прив'язка кольорів до токенів - усе це одна відповідь Claude і одна секунда у Figma.
Коли MCP все-таки кращий?
Коли Claude має не малювати, а читати дизайн. Тут MCP робить те, чого скрипт не вміє в принципі:
- Design-to-code. Офіційний Figma MCP сервер (раніше називався Dev Mode MCP) віддає Claude Code чи Cursor структуру фрейму, змінні і компоненти. Агент генерує React-компонент, де відступи беруться з ваших токенів, а не з оцінки «на око». Як це налаштувати, детально в матеріалі Figma MCP сервер: дизайн у код.
- Code Connect. Коли Figma-компонент зв'язаний з компонентом у репозиторії, MCP підказує агенту, що це ваш
<Button>, а не новий абстрактний. - Розібратись у чужому файлі. Якщо Claude має спершу зрозуміти, що в макеті є, і вже потім вирішувати, MCP дає йому цей контекст.
Тому правильне питання не «MCP чи скрипт», а «читаю чи пишу». Читати дизайн для коду - MCP. Писати у Figma - скрипт. Ці два інструменти добре працюють разом: MCP дає Claude контекст, скрипт робить зміни одним пакетом.
І ще одне про позиціювання. Генерувати картинки «в стилі Figma» сьогодні вміє кожен інструмент. Цінність дизайнера у 2026 - доводити дизайн до системи і коду, які не розвалюються. Скрипти і MCP - саме про це, а не про красиві скріншоти.
Як спробувати скрипт-підхід за 5 хвилин?
- Встановіть UX Hero: Code Runner з Figma Community і відкрийте його у своєму файлі: правий клік → Plugins → UX Hero: Code Runner.
- Натисніть у плагіні кнопку Copy prompt for Claude. Промпт пояснює Claude правила плагіна, асинхронні API і готові хелпери для auto layout, шрифтів і варіантів.
- Вставте промпт у чат з Claude і допишіть задачу своїми словами. Наприклад: «Створи 2 екрани 390×844 поруч: логін і головна. Усе в auto layout, відступи кратні 8, тексти українською».
- Скопіюйте код з відповіді в редактор Code Runner і натисніть Cmd+Enter (Ctrl+Enter на Windows).
- Не сподобалось - Cmd+Z відкочує весь запуск. Впала помилка - скопіюйте її Claude разом з рядком, який підсвітив плагін.
Готові промпти для екранів, вайрфрейму лендингу, auto layout усім фреймам і скрипт «хекси → токени» лежать у безкоштовному воркбуці «Автоматизація Figma». Що вміє сам плагін і що змінилось у версії 2, я розбирав у матеріалі Code Runner v2: як запускати код Figma Plugin API з Claude.
Які обмеження у скрипт-підходу?
Чесно, вони є:
- Claude не бачить результат. Через MCP агент може сам подивитись на канвас. Зі скриптом дивитесь ви і описуєте правку словами. На практиці це навіть швидше, але око має бути ваше.
- Перший запуск інколи падає. Найчастіше через синхронні API, які в сучасних файлах не працюють. Промпт з Code Runner закриває це правило заздалегідь, а помилка показує рядок саме вашого коду.
- Читати код таки треба. Скрипт може видаляти і переміщати шари, якщо його про це попросили. Пробуйте нові скрипти на копії файлу.
Як я працюю зі скриптами наживо, без слайдів, показую на YouTube-каналі UX Hero. А ще 7 готових сценаріїв для щоденної рутини є в матеріалі Claude для дизайнера: 7 скриптів.
Часті питання
Чому Claude через Figma MCP малює так повільно і дорого?
Бо через MCP Claude будує макет крок за кроком: створив фрейм, отримав відповідь, додав текст, перевірив, поправив. Кожен крок - окремий виклик інструмента, а його результат лягає в контекст розмови і перечитується на наступних кроках. У досвіді Dmytro Nikolaienko проста кнопка так займає близько 2 хвилин, сторінка 15-30 хвилин, а 5-годинний ліміт тарифу Claude Pro за $20 може закінчитись за кілька таких задач.
Як малювати у Figma через Claude швидше і дешевше?
Попросіть Claude написати один JavaScript для Figma Plugin API і запустіть його в безкоштовному плагіні UX Hero: Code Runner. Скрипт виконується всередині Figma за секунду-дві, а Claude витрачає токени лише на одну відповідь з кодом. На демо UX Hero такий скрипт перевів 51 шар із захардкодженими кольорами на токени приблизно за 1,1 секунди.
Чи працює підхід зі скриптом на безкоштовному Claude?
Так. Для скрипта не потрібні MCP, Claude Code чи платний тариф: досить звичайного чату з Claude, який пише код. Ви копіюєте відповідь у Code Runner і натискаєте Cmd+Enter. Сам плагін безкоштовний, без акаунта і працює на безкоштовній Figma.
Коли Figma MCP все-таки кращий за скрипт?
Коли Claude має читати дизайн, а не малювати його. Figma MCP (раніше Dev Mode MCP) віддає агенту структуру фрейму, змінні і компоненти, щоб Claude Code чи Cursor згенерували код продукту на ваших токенах. Для шляху з Figma в код MCP - правильний інструмент, для масових змін на канвасі вигідніший скрипт.
Чи безпечно запускати скрипт від Claude у робочому файлі Figma?
Скрипт у Code Runner працює в пісочниці Figma з правами звичайного плагіна і без доступу до мережі. Кожен запуск - один крок undo, тож Cmd+Z відкочує все одразу. Нові скрипти краще пробувати на копії файлу і читати перед запуском.
MCP і скрипти не конкурують, вони відповідають на різні питання. Хочете, щоб Claude зрозумів макет і написав код - MCP. Хочете, щоб у Figma за секунду з'явились екрани, компоненти чи токени - один скрипт у Code Runner. А щоб скриптам і агентам було на що спиратись, у файлі має бути система: токени, ролі, компоненти зі станами. Саме її ми будуємо на курсі UX Hero «Дизайн-система + AI».