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