Claude Talk to Figma MCP
MCP-сервер, который дает агенту читать и менять макеты Figma: цвета, типографику, компоненты, экспорт
Средний риск
Средний уровень ставим, когда инструмент запускает код, ходит в сеть или читает файлы проекта. Перед установкой посмотрите, что именно он делает.
Почему такой уровень
- Меняет содержимое ваших макетов Figma
- Поднимает локальный websocket и выполняет код
Установка
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/claude-talk-to-figma-mcpОпределит агенты на машине, проверит риск и зафиксирует версию.
Другие способы установки
Выполните в терминале
claude mcp add --transport stdio ClaudeTalkToFigma -- npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-serverИли добавьте в файл .mcp.json, в проекте
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers.
Кнопка откроет агент и предложит добавить сервер. Если ничего не произошло, скопируйте конфиг ниже.
Добавьте в файл ~/.cursor/mcp.json, для всех проектов
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers. Для одного проекта тот же блок кладут в .cursor/mcp.json.
Кнопка откроет агент и предложит добавить сервер. Если ничего не произошло, скопируйте конфиг ниже.
Выполните в терминале
code --add-mcp '{"name":"ClaudeTalkToFigma","type":"stdio","command":"npx","args":["-p","claude-talk-to-figma-mcp@latest","claude-talk-to-figma-mcp-server"]}'Или добавьте в файл .vscode/mcp.json, в проекте
{
"servers": {
"ClaudeTalkToFigma": {
"type": "stdio",
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа servers.
Выполните в терминале
codex mcp add ClaudeTalkToFigma -- npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-serverИли добавьте в файл ~/.codex/config.toml, для всех проектов
[mcp_servers.ClaudeTalkToFigma]
command = "npx"
args = ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]Если файл уже есть, допишите блок в конец.
Добавьте в файл ~/.gemini/settings.json, для всех проектов
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers.
Добавьте в файл ~/.config/devin/mcp_config.json, для всех проектов
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers. В легаси Cascade конфиг MCP лежит в ~/.codeium/windsurf/mcp_config.json.
Бывший Windsurf.
Добавьте в файл cline_mcp_settings.json, для всех проектов
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers. Файл настроек открывается в Cline: вкладка MCP Servers, кнопка Configure MCP Servers.
Добавьте в файл .roo/mcp.json, в проекте
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers.
Форк Roo Code, папки .roo те же.
Добавьте в файл opencode.json, в проекте
{
"mcp": {
"ClaudeTalkToFigma": {
"type": "local",
"command": [
"npx",
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcp.
Добавьте в файл ~/.config/zed/settings.json, для всех проектов
{
"context_servers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа context_servers.
Добавьте в файл .codeassistant/mcp.json, в проекте
{
"mcpServers": {
"ClaudeTalkToFigma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}Если файл уже есть, добавьте сервер внутрь ключа mcpServers.
Установи websocket командой npx claude-talk-to-figma-mcp, импортируй плагин из src/claude_mcp_plugin/manifest.json в Figma Desktop, затем добавь MCP-сервер в клиент через npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-server. Для старта скажи: подключись к Figma, канал такой-то.
Другие способы из описания автора
npx claude-talk-to-figma-mcpКлонирует проект, ставит зависимости и поднимает websocket. Дальше импортируйте плагин из src/claude_mcp_plugin/manifest.json в Figma Desktop.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Сервер соединяет агента с Figma Desktop через локальный websocket и плагин, который ставится вручную из манифеста. После подключения к каналу агент видит выделение и структуру документа, разбирает стили и иерархию, создает фигуры, текст и фреймы, меняет цвета, скругления, тени и авто-лейаут. Работает с бесплатным аккаунтом Figma, лицензия Dev Mode не нужна. Поддерживает параллельную работу нескольких агентов через очередь команд на стороне сервера.
Для кого. Для дизайнеров и фронтенд-разработчиков, которые хотят править макеты Figma и собирать код из дизайна голосом или текстом.
Подходит, если
- Нужно массово поменять цвета, шрифты или отступы по всему документу
- Нужно собрать компонент или разметку по существующему макету
- Нужно проверить контраст и доступность прямо в Figma
Не подходит, если
- Нет Figma Desktop или нельзя импортировать плагин из манифеста
- Нужна работа с Figma только в браузере без десктоп-приложения
Пример запроса к агенту
Подключись к Figma, канал abc123, и замени во всех основных кнопках цвет FF6B6B на E63946Ограничения
Нужны Node.js, Figma Desktop и ручной импорт плагина через меню разработчика. Перед каждой сессией запускается локальный websocket, агент подключается к каналу по его id. При параллельной работе команда set_current_page заблокирована, для создания и структурных правок нужно явно передавать parentId.
Как отключить. Уберите запись сервера из конфигурации MCP-клиента и удалите плагин из Figma через меню разработчика.
MCP
- Транспорт
- stdio
- Авторизация
- не нужна
Проверка безопасности
- Меняет содержимое ваших макетов Figma
- Поднимает локальный websocket и выполняет код
Коротко о README
README описывает установку в три шага: запуск websocket через npx, импорт плагина в Figma Desktop и настройку MCP-клиента. Отдельно показаны конфигурации для Cursor и других инструментов, вариант с Docker и список возможностей: анализ документа, создание и правка элементов, работа со стилями и библиотеками компонентов. Проект развивает cursor-talk-to-figma-mcp Sonny Lazuardi. Лицензия MIT.
Частые вопросы
Нужен ли платный Figma и Dev Mode?
Нет. Сервер работает с любым аккаунтом Figma, включая бесплатный, лицензия Dev Mode не требуется.
Как агент понимает, с каким файлом работать?
Вы открываете плагин в Figma, копируете id канала и просите агента подключиться к этому каналу.
Похожие
Скиллы Next.js
Next.js skills
Официальный плагин Claude Code из репозитория Next.js: переход на Cache Components, Partial Prefetching и проверка изменений на живом dev-сервере
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов
Скиллы Vercel для агентов
Agent Skills
Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой