Дизайнер Денис Осадчий створив open-source плагін, який з’єднує Claude Code з Figma через локальний Python-сервер. Завдяки «тулзі» ШІ-помічник сам зможе читати дані з макета, вносити зміни та перевіряти результати, уже без використання Figma MCP. Інструмент отримав назву Figmosha.
Дизайнер Денис Осадчий створив open-source плагін, який з’єднує Claude Code з Figma через локальний Python-сервер. Завдяки «тулзі» ШІ-помічник сам зможе читати дані з макета, вносити зміни та перевіряти результати, уже без використання Figma MCP. Інструмент отримав назву Figmosha.
Про розробку Денис Осадчий розповів на LinkedIn.
Ідея з’явилася, коли Осадчий проводив аудит дизайн-системи за допомогою Claude Code та Figma MCP. Figma MCP працює як своєрідний «міст» між ШІ-помічниками та Figma. Завядки йому вони отримують дані з макетів Figma. Тож, за словами дизайнера, за кілька годин він витратив доступний йому місячний ліміт MCP-запитів, хоча аудит був готовий лише приблизно на 10%.
«Так я дізнався що офіційний міст між AI-агентом і Figma розрахований на разові запити типу дай мені специфікацію цієї кнопки, а не на системну роботу з файлом. А мені потрібна була саме системна: пройтись по всій бібліотеці, зчитати структуру кожного компонента, перевірити прив’язки токенів», — пояснює Осадчий. Тоді він і почав шукати інший спосіб дати Claude доступ до Figma.
Спершу схема була напівручною: Claude Code генерував скрипти, а дизайнер сам копіював їх у плагін Scripter у Figma та запускав. Проте цей пайплайн виявився не дуже зручним, адже цю операцію доводилося повторювати вручну для кожного компонента чи виправлення.
«Я все одно багато робив руками. Клод код генерує скрипт за секунди, а потім чекає поки я скопіюю, вставлю і запущу. На кожен компонент. На кожну ітерацію виправлень. Уфф, це так бісило!», — розповідає Осадчий.
Наступною спробою стала автоматизація через Playwright — інструмент, якому можна наперед задати послідовність дій у браузері, наприклад, відкрити сторінку, знайти потрібне поле, вставити текст або натиснути кнопку. Система вже сама відкривала Figma в браузері, знаходила потрібний плагін, вставляла код і запускала його.
Але тут з’явилася інша проблема: браузеру потрібно було чекати завантаження інтерфейсу, шукати потрібні елементи та перемикати фокус між вікнами. Одна операція могла тривати десятки секунд.
«Коли агенту треба 2-3 цикли виправлень на складний макет, сесія розтягувалась на хвилини очікування там де роботи на секунди. Простіше вже було руками робити…», — пояснює дизайнер.
Тому в фінальній версії Figmosha 2.0 Осадчий взагалі прибрав браузер із цієї схеми. Отже, Осадчий зробив власний плагін для Figma, який напряму працює з локальним сервером на комп’ютері. Claude Code пише команду, сервер передає її плагіну, а той виконує її через Figma Plugin API і повертає результат назад агенту.
Тож тепер дизайнер може, наприклад, попросити Claude створити компонент кнопки. Агент може сам внести зміни у Figma, а потім зчитати результат і перевірити, чи не зламалися налаштування компонентів чи автолейаутів. Якщо щось вийшло погано, Claude може сам ще кілька разів переписати скрипт і повторити спробу.
Для типових проблем при взаємодії Figma та ШІ-помічників автор також додав 15 допоміжних функцій. Наприклад, одна з них сама завантажує потрібний шрифт перед зміною тексту.
«Зробив я їх не тому, що просто захотів, а на основі помилок на реальних задачах. Я ганяв Figmosha2 на робочих кейсах: малювання макетів на компонентах з бібліотеки, автолеяути, прив’язка токенів. Кожен повторюваний шматок коду і кожні граблі ставали хелпером», — розповідає дизайнер.
Figmosha вміє ще й підказувати Claude, що пішло не так. Наприклад, якщо скрипт «падає» через знайому помилку, агент отримує короткий hint із варіантом виправлення.
Код Figmosha 2.0 відкритий на GitHub під ліцензією MIT. Осадчий стверджує, що інструмент уже використовують понад 100 дизайнерів.
Коментар прихований за порушення правил коментування.