Для MacOS, але якщо у вас windows, то просто закиньте цей мануал в AI, попросіть оптимізувати під вінду.
Буквально пару команд зміниться.
Якщо нічого не інсталювали, не працювали з терміналом - потрібно встановити 👇
Homebrew
В терміналі:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Виконуємо дії «next steps»
Якщо пройшла команда brew help то переходимо далі
node.js
В терміналі:
brew install node
Буде анімація, біля 1 хв.
👇
Крок 1: Встановити пакет figma-console-mcp
В терміналі:
bashnpm install -g figma-console-mcp
👉 Зачекайте, поки завершиться встановлення (~1 хвилина).
Крок 2: Отримати персональний токен доступу Figma
👉 Перейдіть за адресою https://www.figma.com/settings
👉 Перейдіть до розділу Security, внизу буде «Personal access tokens»
👉 Натисніть «Generate new token»
👉Назвіть його: «Claude MCP Access» (з усіма дозволами - Scopes)
👉 Скопіюйте токен (починається з figd_)
⚠️ Токен показується лише один раз. Збережіть його одразу
Крок 3: Налаштувати Claude Desktop
В терміналі:
👉 Відкрийте файл конфігурації:
bashopen -a TextEdit ~/Library/Application\ Support/Claude/claude_desktop_config.json
👉 Додайте або оновіть вміст на:
json{
"preferences": {
"sidebarMode": "chat"
},
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "figma-console-mcp"],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_TOKEN_HERE"
}
}
}
}
👉 Замініть YOUR_TOKEN_HERE на ваш справжній токен з пункту 2
👉 Збережіть файл (Cmd+S)
Якщо у вам вже підключені якісь MCP в Claude - закиньте ваш конфіг і той що вище в Claude, або буль який AI і попросіть згенерувати конфіг файл щоб додалось те що треба і не видалилось те що вже працює
💡 Якщо npx не знаходиться (наприклад, Node.js встановлений через nvm), вкажіть повний шлях. Дізнайтесь його командою which npx і замініть "command": "npx" на, наприклад, "command": "/usr/local/bin/npx".
Крок 4: Імпортувати плагін Figma Desktop Bridge з GitHub
👉 Знайти шлях до плагіна
В терміналі:
find ~/.npm/_npx -name "manifest.json" -path "*/figma-desktop-bridge/*" 2>/dev/null
Ви побачите шлях виду:
/Users/ваше_ім'я/.npm/_npx/.../node_modules/figma-console-mcp/figma-desktop-bridge/manifest.json
👉 Скопіюйте цей шлях — він знадобиться далі.
В Figma Desktop:
👉 Menu → Plugins → Development → Import plugin from manifest
👉 У діалозі вибору файлу натисніть Cmd+Shift+G (перехід до папки)
👉 Вставте скопійований шлях до manifest.json
👉 Виберіть файл manifest.json
Крок 5: Запустити Figma з увімкненим налагодженням
👉 Повністю закрийте Figma (Cmd+Q)
👉 Потім запустіть через термінал:
bashopen -a "Figma" --args --remote-debugging-port=9222
⚠️ Figma завжди потрібно запускати саме цією командою, щоб Claude міг надсилати команди. Якщо відкрити Figma звичайним способом — підключення не працюватиме.
Тож збережіть цю команду
Крок 6: Активувати плагін у Figma
👉 Відкрийте ваш файл у Figma
👉 Натисніть правою кнопкою миші на полотні
👉 Plugins → Development → Figma Desktop Bridge
👉 Має з'явитися індикатор підключення (MCP ready) і він має бути відкритий весь час роботи з клодом!
Крок 7: Перезапустити Claude Desktop
👉 Повністю закрийте Claude Desktop (Cmd+Q)
👉 Відкрийте Claude Desktop знову
👉 Почніть новий чат
Перевірка підключення
Після перезапуску у правій панелі нового чату (розділ Context → Connectors) повинен з'явитися figma.
Це означає, що MCP-сервер успішно підключений.
Або опросіть зробити пустий фрейм. 🤔
Щоденне використання
Кожного разу, коли ви хочете працювати з Figma через Claude:
Запустіть Figma через термінал:
bash open -a "Figma" --args --remote-debugging-port=9222
Відкрийте ваш файл у Figma
Запустіть плагін: правий клік → Plugins → Development → Figma Desktop Bridge
Відкрийте Claude Desktop і починайте працювати
Буду вдячний за лайки, репости і каву 💛
Якщо є проблеми - пишіть комменти, будемо разом покращувати інструкцію!
