Figmosha 2.0: як Claude Code працює з Figma без MCP

Дизайнер керує макетом через Claude Code і локальний міст Figmosha

У Figma є офіційний MCP-сервер, через який ШІ-агент може читати макети та передавати дизайн у код. Але для великого аудиту дизайн-системи його лімітів може не вистачити ще до того, як агент дістанеться середини файлу. Український дизайнер Денис Осадчий зіткнувся саме з цим і створив Figmosha 2.0 — відкритий локальний міст між Claude Code та Figma.

Figmosha дозволяє Claude Code бачити структуру макета, знаходити компоненти, змінювати текст, працювати з варіантами компонентів і дизайн-токенами та перевіряти результат. Усе відбувається через Figma Plugin API, без офіційного Figma MCP і без повільного керування браузером.

Що таке Figmosha 2.0

Figmosha 2.0 — це безкоштовний інструмент із відкритим кодом під ліцензією MIT. Він складається з локального Python-сервера, командного клієнта та плагіна, який запускається всередині Figma Desktop.

Його завдання просте: передати код від Claude Code у відкритий файл Figma, виконати цей код через Plugin API та повернути агенту результат. Завдяки цьому Claude не працює навпомацки. Він може спочатку прочитати дерево шарів, потім внести зміни, а після цього ще раз перевірити макет і виправити помилку.

Попри назву, Figmosha не прив’язана лише до Claude Code. Команду можна надіслати з термінала, через curl або з будь-якого клієнта, який уміє робити HTTP-запити. Проте саме з Claude Code ця схема виглядає найбільш природно: агент уже вміє працювати з файлами, писати скрипти й запускати команди. Схожий підхід ми бачили в Remotion Agent Skills для створення відео через Claude Code.

Чому офіційного Figma MCP може бути замало

Model Context Protocol, або MCP, — це стандартний спосіб підключити ШІ-агента до зовнішнього сервісу. Офіційний Figma MCP передає агенту дані з макета та підтримує окремі операції запису. Для разового запиту на кшталт «покажи специфікацію цієї кнопки» цього часто достатньо.

Проблема з’являється, коли треба системно пройти всю бібліотеку: прочитати сотні компонентів, перевірити прив’язки змінних, знайти порушення в автолейаутах і повторити перевірку після виправлень. Кожна така дія може перетворюватися на окремий виклик інструмента.

За актуальними правилами Figma, ліміти залежать від тарифу та типу місця. Для Starter передбачено до 20 викликів на місяць, для View і Collab у платних планах — до 6 на місяць, а для Dev або Full — до 200 на день. Обмеження стосуються інструментів читання; деякі функції запису не враховуються. Денис Осадчий розповів, що під час аудиту витратив доступний йому місячний ліміт за кілька годин, коли робота була готова приблизно на 10%.

Критерій Офіційний Figma MCP Figmosha 2.0
Підключення Через сервер і авторизацію Figma Через локальний Python-сервер і dev-плагін
Доступ до макета Готові MCP-інструменти Код Figma Plugin API
Ліміти Figma MCP Залежать від плану та типу місця Не використовуються
Налаштування Простіше для старту Потрібні Python, термінал і імпорт плагіна
Контроль Керований набір операцій Можна виконувати довільний код у відкритому файлі

Як Figmosha передає команди у Figma

У Figmosha немає магії, хоча збоку все виглядає саме так. Схема складається з трьох частин.

  1. Claude Code аналізує завдання та генерує JavaScript для Figma Plugin API.
  2. Локальний сервер bridge.py приймає команду через HTTP і передає її плагіну через WebSocket.
  3. Figmosha Bridge у Figma виконує код у поточному файлі та повертає результат агенту.

Браузер у цьому ланцюжку не потрібен. Раніше автор тестував автоматизацію через Playwright: агент відкривав Figma у браузері, шукав потрібний плагін, вставляв код і натискав кнопку запуску. На одну операцію йшли десятки секунд. У версії 2.0 команда потрапляє прямо в плагін, тому читання та зміни виконуються значно швидше.

За замірами автора, читання займає близько 5 мс, зміна макета — близько 30 мс, а імпорт бібліотечного компонента — приблизно 150 мс. Заявлене прискорення у 150–950 разів стосується порівняння з браузерною автоматизацією, а не з офіційним MCP. Незалежних тестів цих цифр поки немає.

Що Claude Code може робити в макеті

У репозиторії є дев’ять готових CLI-команд і 15 допоміжних функцій. Вони закривають типові ситуації, на яких часто спотикаються автоматично згенеровані скрипти: завантаження шрифтів перед зміною тексту, роботу із замороженими масивами fills і strokes, прив’язку змінних та перемикання варіантів компонента.

За допомогою Figmosha агент може:

  • прочитати дерево сторінки або окремого фрейма;
  • знайти шар за назвою, типом чи текстом;
  • замінити текст із автоматичним завантаженням потрібного шрифту;
  • клонувати елемент і розмістити копію поруч;
  • перемикати властивості варіантів;
  • імпортувати компонент із бібліотеки;
  • створювати й видаляти об’єкти через Plugin API.

Якщо команда падає через знайому помилку, сервер повертає коротку підказку. Claude бачить її, переписує скрипт і може повторити спробу без участі людини. Саме цей цикл «прочитав — змінив — перевірив — виправив» робить інструмент цікавим для великих дизайн-систем.

Як встановити Figmosha 2.0

Для запуску потрібні Figma Desktop, Python 3.10 або новіший і встановлений Claude Code. Сам Claude Code працює в терміналі, IDE, десктопному застосунку та браузері, але Figmosha підключається саме до локального середовища й відкритої програми Figma.

  1. Клонуйте репозиторій Figmosha 2.0 на комп’ютер.
  2. Створіть Python-оточення та встановіть єдину залежність aiohttp.
  3. У Figma Desktop відкрийте Plugins → Development → Import plugin from manifest і виберіть файл plugin/manifest.json.
  4. Запустіть локальний сервер командою bash start-bridge.sh або безпосередньо через python bridge.py.
  5. Запустіть у Figma плагін Figmosha Bridge і дочекайтеся зеленого статусу connected.
  6. Перевірте з’єднання командою python figmosha.py status.
git clone https://github.com/denysosadchyi/figmosha2.git
cd figmosha2
python3 -m venv venv
./venv/bin/pip install aiohttp
./venv/bin/python bridge.py

Репозиторій містить окремі інструкції для macOS, Linux, Windows і WSL2. Після перезавантаження комп’ютера сервер треба запустити знову. Якщо перейти в інший файл Figma, плагін також доведеться повторно відкрити.

Приклади завдань для Claude

Після підключення можна давати агенту звичайні інструкції, але краще одразу називати область роботи й критерій перевірки:

  • «Перевір усі компоненти Button у поточному файлі та знайди варіанти без прив’язки кольору до змінних».
  • «Створи копію вибраного фрейма праворуч, заміни текст українською і перевір, чи не зламався автолейаут».
  • «Побудуй дерево компонента до третього рівня, знайди всі текстові шари та склади список використаних шрифтів».

Claude Code варто спочатку попросити прочитати структуру, потім запропонувати план змін і лише після підтвердження виконати запис. Це трохи повільніше, зате рятує від ситуації, коли агент старанно автоматизував не те. Якщо цікаво, як Claude Code працює з іншими зовнішніми інструментами, ми вже пояснювали це на прикладі його вбудованого браузера.

Скільки коштує Figmosha і що потрібно оплатити

Figmosha 2.0 безкоштовна: код відкритий на GitHub під ліцензією MIT. Окремої підписки, платного плагіна чи хмарного сервера немає. Локальний міст також не витрачає виклики Figma MCP.

Водночас залишаються витрати на сам Claude Code. Станом на серпень 2026 року він входить у Claude Pro за $20 на місяць або $200 на рік. Для активної роботи є Max 5x за $100 і Max 20x за $200 на місяць. Також Claude Code можна використовувати через Anthropic Console з оплатою за токени. Актуальні умови краще перевіряти на сторінці тарифів Claude.

Figmosha прибирає ліміт запитів саме з боку Figma MCP, але не робить роботу Claude безлімітною. Довгі аудити, великі файли та багато повторних ітерацій усе одно витрачатимуть ліміт тарифу Claude або кошти на API.

Переваги та обмеження Figmosha 2.0

Головна перевага — системна робота з файлом. Агент може пройти велику бібліотеку, виконати серію однотипних перевірок і сам виправити частину знайдених проблем. Плагін працює навіть тоді, коли вікно Figma згорнуте, а після перезапуску сервера автоматично під’єднується знову.

Та є кілька важливих обмежень:

  • працює лише Figma Desktop, бо браузерна версія не імпортує локальні dev-плагіни;
  • плагін прив’язаний до поточного відкритого файлу;
  • одночасно до сервера підключається лише один екземпляр плагіна;
  • встановлення розраховане на людей, які не бояться термінала й Python;
  • агент отримує можливість виконувати довільний код Figma Plugin API, тому резервна копія й перевірка змін тут не зайві.

Сервер за замовчуванням слухає лише адресу 127.0.0.1, тобто доступний із цього ж комп’ютера. Автор окремо не радить відкривати його на всю локальну мережу: тоді будь-хто в ній потенційно зможе надіслати код у ваш файл Figma.

Кому варто спробувати Figmosha замість Figma MCP

Figmosha найкраще підходить дизайн-інженерам, розробникам дизайн-систем і командам, у яких макети та код постійно рухаються в обидва боки. Вона корисна для масового аудиту компонентів, перевірки токенів, пакетного перейменування, створення варіантів і повторюваних виправлень.

Якщо вам потрібно зрідка передати один фрейм у Claude Code або отримати код компонента, офіційний Figma MCP буде простішим. Там менше налаштувань і більш передбачуваний набір дій. Figmosha варто брати тоді, коли готових команд стає мало, ліміти заважають роботі, а ручне копіювання скриптів уже починає діяти на нерви.

Проєкт молодий і поки більше схожий на сильний інструмент для технічних ентузіастів, ніж на плагін «встановив і забув». Але сама ідея важлива: ШІ-агент може працювати з дизайном не через скриншоти й перекази людини, а напряму через структуру файлу. І робити це локально, швидко та з можливістю перевірити власну роботу.

Підпишіться на новини про штучний інтелект!

Ви будете отримувати від нас листи раз на тиждень.
Політика конфіденційності

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Прокрутка до верху