Як підключити Figma до Claude Code через MCP-сервер

Коротко (TL;DR)

«Плагін Figma для Claude Code» — це не звичний плагін на канві Figma, а зв’язка двох офіційних речей. Перша — MCP-сервер Figma (mcp.figma.com), який Figma хостить самотужки. Друга — плагін Claude Code від Anthropic, що ставиться однією командою й налаштовує підключення до цього сервера. Разом вони дають Claude Code читати ваш макет і перетворювати його на код, а віднедавна — і навпаки, переносити робочий інтерфейс назад на канву Figma.

Що варто знати одразу:

• Це офіційно і безкоштовно на старті. Remote-сервер доступний на всіх планах Figma, зокрема на безкоштовному Starter, і не потребує платного Dev Mode.
• Є жорсткий ліміт. На безкоштовному сидінні — до 6 звернень до основних інструментів на місяць (дані на 12 липня 2026). Далі потрібен платний план.
• Підключення — двома способами: через офіційний плагін (claude plugin install figma@claude-plugins-official) або вручну командою claude mcp add.
• Головний ризик — переплутати сервери. Гучну RCE-вразливість 2025 року знайшли не в офіційному сервері Figma, а в сторонньому community-пакеті. Ставити треба саме офіційний.

Нижче — як це підключити, що модель реально вміє дістати з макета, у скільки обходиться і де зв’язка спотикається.

Що це фізично: MCP-сервер плюс плагін, а не «плагін на канві»

Якщо шукати «плагін figma для claude code», легко вирішити, що йдеться про звичайний плагін, який ставиться з Figma Community і живе на канві. Це не так. В основі — Model Context Protocol (MCP), відкритий стандарт, за яким ШІ-застосунки підключаються до зовнішніх джерел даних. Той самий протокол Claude Code використовує для зв’язку з базами даних, GitHub та іншими сервісами; загальну механіку підключення серверів ми розбирали окремо — наприклад, є матеріал про те, як ШІ-агент за протоколом MCP веде базу знань.

BINANCE COPY TRADINGКопітрейдинг на BinanceВідкрита статистика трейдерів, старт з $10, вимкнення одним кліком.Обрати трейдера

Зв’язка складається з двох частин:

Skills для Claude: де брати і як не встановити шкідливу навичку

Web for Agents: як дати ШІ-агенту браузер, пошук, пошту й хостинг

Claude в Excel, PowerPoint і Word: створення файлів і надбудови Office — що вибрати

Claude Code вмикає Auto Mode: класифікатор ловить 89% небезпечних команд

Claude Code 2.1.224 звʼязав сесії: SendMessage і ListAgents на macOS та Linux

1. MCP-сервер на боці Figma. Його розробляє й хостить сама Figma за адресою mcp.figma.com. Він віддає дані про ваші дизайн-файли: структуру, змінні, скриншоти, код.
2. Плагін Claude Code від Anthropic. Публікується в офіційному маркетплейсі Anthropic (claude-plugins-official) і рекомендований у документації Figma. Він нічого не малює на канві — він налаштовує підключення до MCP-сервера й додає готові Agent Skills під типові сценарії.

Класичних плагінів Figma (тих, що ставляться на канву з Community) у цій схемі немає взагалі. Слово «плагін» тут стосується лише обгортки на боці Claude Code.

Ще один важливий момент: це офіційна інтеграція обох компаній, а не сторонній хак. Сервер — від Figma, плагін — від Anthropic. Це відрізняє зв’язку від community-серверів на кшталт figma-developer-mcp (проєкт Framelink), з яким згодом пов’язаний окремий ризик — про нього в розділі про безпеку.

Два способи підключення

Підключити Figma до Claude Code можна двома шляхами. Обидва працюють, але обирають їх під різні завдання.

Спосіб 1: офіційний плагін

Найпростіший шлях — поставити плагін із маркетплейсу Anthropic:

claude plugin install figma@claude-plugins-official

Після встановлення всередині Claude Code відкрийте меню плагінів і завершіть підключення:

/plugin  →  Installed  →  figma  →  Enter  →  Allow access (у браузері)

Плагін сам пропише конфігурацію MCP і підтягне Agent Skills — заготовки під типові сценарії на кшталт «зроби компонент із цього фрейму». Для більшості користувачів це рекомендований спосіб.

BINANCEДосі дивишся збоку?Ринок працює без вихідних. Рахунок на Binance відкривається за 2 хвилини.Почати зараз

Спосіб 2: ручне підключення remote-сервера

Якщо Agent Skills не потрібні, а потрібен контроль, додайте сервер безпосередньо:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Щоб сервер був доступний у всіх проєктах, а не лише в поточній теці, додайте прапорець --scope user:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Далі — авторизація:

/mcp  →  Authenticate  →  Allow Access

Це той самий remote-сервер, що й у першому способі, лише без обгортки-плагіна.

Спосіб 3: desktop-сервер (коли він узагалі потрібен)

Є ще локальний desktop-сервер — він живе всередині застосунку Figma Desktop. Його вмикають у сайдбарі Dev Mode, копіюють адресу й додають командою:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Важливі застереження. По-перше, desktop-сервер потребує Dev Mode, а це платний план (Professional і вище). По-друге, сама Figma в документації прямо радить remote-версію як основну, а desktop лишає для вузьких enterprise-кейсів.

І окреме попередження для тих, хто копіює команди зі старих гайдів: раніше desktop-адреса закінчувалася на /sse (http://127.0.0.1:3845/sse). Цей транспорт застарів — актуальний ендпоінт закінчується на /mcp. Команда зі старим /sse просто не підключиться.

Що Claude Code бачить у вашому макеті

Після підключення Claude Code отримує набір інструментів MCP-сервера. На дату звірки (12 липня 2026) офіційна документація перелічує 23 інструменти — частина з них доступна лише в remote-версії. Якщо в чужому гайді ви натрапите на цифру «14 інструментів», це застарілі дані: перелік помітно розширився.

Основні з них:

• get_design_context — головний інструмент. Повертає код за вибраним фреймом. За замовчуванням — React і Tailwind, але стек налаштовується: можна вказати Vue, чистий HTML + CSS чи iOS Swift, або згенерувати файл правил під свій проєкт командою /create-design-system-rules.
• get_variable_defs — змінні дизайну (кольори, відступи, типографіка), щоб код використовував ваші токени, а не випадкові значення.
• get_metadata — структура вибраного вузла: які шари, як вкладені.
• get_screenshot — картинка фрейму, щоб модель могла візуально звірити результат.
• search_design_system — пошук по вашій дизайн-системі, щоб перевикористати наявні компоненти, а не малювати їх заново.

Крім Claude Code, той самий MCP-сервер офіційно працює з Cursor, VS Code, Codex від OpenAI, Gemini CLI, Xcode (beta) та іншими клієнтами. Осібно стоїть Claude Desktop: він теж уміє ходити у Figma, але через власний Figma-конектор, а не через той самий плагін, що Claude Code. Схожий принцип «ШІ-агент як окремий колега з доступом до сервісів» ми розбирали на прикладі Claude Tag у Slack.

Сценарій «макет → компонент» покроково

Розберімо типовий маршрут: у вас є готовий фрейм у Figma, потрібно отримати робочий компонент. Передати дизайн-контекст у промпт можна двома режимами.

Режим за виділенням (selection-based). Виділяєте фрейм або компонент у Figma Desktop і просите Claude Code його реалізувати — клієнт підтягне контекст з активного виділення.

Режим за посиланням (link-based). Клікаєте правою кнопкою по фрейму → Copy link to selection → вставляєте посилання в промпт. Тут є нюанс: Claude Code не переходить за посиланням у браузері. Він видобуває з нього node-id — ідентифікатор конкретного вузла — і запитує дані в MCP-сервера вже за ним.

Далі маршрут має такий вигляд:

1. Скопіюйте посилання на фрейм (Copy link to selection).
2. Вставте його в промпт Claude Code й укажіть стек, наприклад: «Збери цей екран як компонент на Vue, використай змінні з дизайн-системи».
3. Claude Code викликає get_design_context (код) і get_variable_defs (токени), за потреби — get_metadata для структури.
4. Модель генерує код.
5. Для візуальної звірки Claude Code запитує get_screenshot і порівнює результат з оригіналом.

Практична порада з досвіду дизайнерів: без підключеної дизайн-системи (змінні, Code Connect) модель схильна «перемальовувати» іконки й компоненти заново замість того, щоб їх перевикористати. Саме зв’язка MCP плюс токени дає консистентність — це цінують не лише розробники, а й самі дизайнери, що стежать за єдністю бібліотек.

Двостороння зв’язка: не лише з Figma в код

Тривалий час зв’язка працювала в один бік: макет ставав кодом — нейромережа Claude перетворювала фрейми Figma на розмітку. З функцією Code to Canvas (анонс 17 лютого 2026) з’явився зворотний напрямок. Вона дає змогу захопити реальний, робочий інтерфейс із браузера — на localhost, staging чи production — і перетворити його на редаговані фрейми на канві Figma.

Ключова відмінність від звичного «зроби скриншот»: це не картинка. На виході — повноцінні шари Figma з auto-layout, які можна рухати, анотувати й порівнювати варіанти. Навіщо це потрібно: дизайнер бачить, на що перетворився макет у реальному коді, і виправляє розбіжності просто на канві, а не в листуванні з розробником.

Одне застереження щодо грошей: на етапі бети запис у канву (write to canvas) безкоштовний, але Figma попереджає, що в майбутньому він стане платним за використання. Це варто тримати в голові, плануючи такий workflow надовго.

Собівартість: із чого складається

Вартість зв’язки — двокомпонентна: план Figma і витрата токенів Claude Code. Окремої плати «за інтеграцію» немає.

Про ліміти докладніше. На безкоштовних сидіннях (View/Collab на будь-якому плані, зокрема Starter) — до 6 викликів основних read-інструментів на місяць. На платних Dev/Full-сидіннях ліміт обчислюється за хвилинами, як у Tier-1 Figma REST API: 15 запитів за хвилину на Professional і 20/хв на Organization; для Enterprise окремий ліміт у таблиці не вказано (дані на 12 липня 2026). Інструменти запису в канву в загальнодоступній таблиці лімітів окремо не згадані.

Зверніть увагу на часту помилку в оглядах: цифри «200 запитів на день» в офіційній таблиці немає — там лише місячний ліміт для безкоштовних сидінь і похвилинний для платних.

Другий компонент — токени Claude Code. Figma їх не враховує, але відповіді get_design_context і get_metadata бувають об’ємними, і контекст сесії росте швидше, ніж під час звичайного чату. На великих макетах це помітно за витратою.

Де генерація спотикається: три обмеження точності

Зв’язка гарна, але не чарівна. Три моменти варто розуміти заздалегідь.

1. Точкові правки наявного коду — слабке місце. Claude Code чудово генерує нові компоненти з нуля. Але коли макет змінився і треба акуратно поправити вже написаний код, без глибокого розуміння архітектури дизайн-системи модель робить це погано — частіше простіше перегенерувати компонент повністю або доправити руками.
2. Багатоекранні флоу збираються по одному фрейму. Карусель, онбординг, будь-який багатоекранний сценарій конвертується пофреймово. Щоб зібрати екрани в єдиний інтерактивний компонент, потрібен окремий додатковий промпт — це більше ітерацій і токенів, ніж на простому одноекранному макеті.
3. Без токенів модель «перемальовує» замість перевикористання. Уже згаданий ефект: якщо дизайн-система не підключена, агент генерує іконки й елементи заново, замість того щоб узяти готові з бібліотеки. Лікується підключенням змінних і Code Connect.

Ці обмеження — не вирок, а рамка очікувань. Зв’язка заощаджує час на чорновому переведенні макета в код, але фінальне доведення й архітектурні правки бере на себе людина.

Ризики: безпека, приватність, права

Розділ, який в оглядах найчастіше пропускають. А дарма — тут і є головний факт-чек теми.

Не переплутайте офіційний сервер зі стороннім. У жовтні 2025 було розкрито серйозну вразливість CVE-2025-53967 (оцінка CVSS 7.5) — command injection, що дозволяла віддалене виконання коду. Але вона була не в офіційному сервері Figma, а в сторонньому community-пакеті figma-developer-mcp (проєкт Framelink, використовувався у зв’язці з Cursor). Вразливість закрили у версії 0.6.3 від 29 вересня 2025 року. Офіційного сервера mcp.figma.com вона не стосувалася. Висновок простий: ставте MCP-сервер лише з офіційного каталогу Figma, а не перший-ліпший community-пакет зі схожою назвою.

Prompt injection. Сама Anthropic у документації Claude Code прямо попереджає: перед підключенням будь-якого MCP-сервера переконайтеся, що довіряєте йому. Сервери, які тягнуть зовнішній контент, можуть стати вектором prompt injection — коли в «зовнішніх даних» захована інструкція, що збиває модель.

Інтелектуальна власність. Головний ризик доступу ШІ-агента до дизайн-файлів — не персональні дані, а IP. У Figma-файлах лежать нерелізнуті продукти, брендові активи, внутрішні користувацькі флоу, іноді — креди чи клієнтські дані, випадково залишені в коментарях і мокапах. Підключаючи агента, ви даєте йому доступ до всього цього. Для команд це привід подумати, до яких файлів відкривати доступ.

Чим це відрізняється від Figma Make і Claude Design

Навколо теми багато плутанини «Claude всередині Figma», тож розведімо три різні речі.

Figma MCP + Claude Code (тема цієї статті) — Claude Code як зовнішній інструмент читає ваші макети через MCP-сервер і пише код.

Figma Make — окремий продукт Figma для генерації прототипів за промптом. Усередині нього можна вибрати модель, і серед варіантів є Claude — Sonnet 4.6 та Opus (плюс Gemini і GPT). Але це Claude як модель-провайдер усередині Figma, а не Claude Code. Якщо вам цікаво, що являє собою актуальна лінійка моделей Anthropic, у нас є окремий огляд Claude Sonnet 5.

Claude Design — інструмент від Anthropic для генерації дизайну, який часто порівнюють із Figma Make як альтернативу. Це вже не про міст між Figma і кодом, а про створення дизайну з нуля; його можливості й реальний кейс ми розібрали в огляді Claude Design.

Короткий орієнтир: треба перетворити готовий Figma-макет на код — це MCP + Claude Code; треба згенерувати прототип за текстовим описом усередині Figma — це Figma Make; потрібен дизайн із нуля силами Anthropic — це Claude Design.

FAQ

Чи потрібен платний Figma, щоб зв’язати його з Claude Code? Ні. Remote MCP-сервер доступний на безкоштовному плані Starter без Dev Mode. Обмеження безкоштовного сидіння — до 6 звернень до основних інструментів на місяць (на 12 липня 2026). Платний план потрібен, щоб зняти цей ліміт або отримати desktop-сервер.

«Плагін Figma для Claude Code» — це плагін із Figma Community? Ні. Це MCP-сервер на боці Figma плюс плагін Claude Code від Anthropic, який ставиться командою claude plugin install figma@claude-plugins-official. Класичних плагінів на канві Figma у цій зв’язці немає.

Чи витрачаються токени Claude окремо від Figma? Так. Figma бере плату лише за свій план і не тарифікує токени. Генерація коду витрачає звичайні токени Claude Code за вашим тарифом, і контекст сесії росте швидко через об’ємні відповіді інструментів.

Той гучний злам Figma MCP — це небезпечно для мене? Вразливість CVE-2025-53967 (жовтень 2025) була в сторонньому community-сервері figma-developer-mcp (Framelink), а не в офіційному mcp.figma.com. Якщо ви підключаєте офіційний сервер Figma, ця конкретна діра вас не стосується. Але підключати будь-який MCP-сервер варто лише з довіреного джерела.

У якому стеку Claude Code генерує код за макетом? За замовчуванням — React і Tailwind. Стек налаштовується: можна вказати Vue, чистий HTML + CSS, iOS Swift або задати власні правила через /create-design-system-rules.

Чи можна перенести готовий інтерфейс назад у Figma? Так, через функцію Code to Canvas (анонс 17 лютого 2026): робочий UI із браузера перетворюється на редаговані фрейми на канві Figma, а не на статичний скриншот. На етапі бети запис у канву безкоштовний, згодом стане платним.