figma-edit-mcp — MCP-сервер для Claude Code: правка Figma из чата
Связывает ИИ-ассистента с Figma: читает макеты, создаёт и меняет слои, правит переменные и стили. Каждое действие проходит проверку внутри плагина ещё до применения.
claude mcp add figma-edit-mcp -- npx -y figma-edit-mcpЧто делает figma-edit-mcp
Сервер работает через Figma-плагин и WebSocket-мост на вашей машине. Ассистент шлёт операции, плагин проверяет каждую и отклоняет те, что испортят файл: например, удаление цветовой переменной, которую ещё используют слои. При подключении вы выбираете одну страницу или фрейм для сессии, и правки за их пределами не пройдут. Если область не выбрана, файл доступен только на чтение.
Каждая правка обязана называть точную цель, и имя слоя сверяется с настоящим. В массовой операции достаточно одного неверного пункта, чтобы отклонён был весь пакет. Заблокированные слои, ассеты общих библиотек и внутренности инстансов компонентов трогать нельзя. Переменные и стили открываются отдельной галочкой в плагине, и по умолчанию она снята.
Проверка отвечает за место и слой, но не за то, что это именно нужная вам правка. Правильная по всем условиям операция пройдёт, так что результат придётся смотреть глазами. Для запуска нужен Node.js: сервер поднимается через npx, мост figma-edit-mcp-socket держите в отдельном терминале, а плагин импортируют из node_modules/figma-edit-mcp/figma_plugin/manifest.json.
Какие задачи решает
- заменить название продукта во всех текстовых слоях страницы
- перенести overrides с одного инстанса компонента на другие
- прочитать структуру макета и вытащить её в код
- обновить переменные и стили без битых ссылок
- запретить ассистенту трогать чужие фреймы
Примеры запросов агенту
- Найди все текстовые слои с названием «Старое имя» на странице Checkout и замени на «Новое имя»
- Скопируй overrides с инстанса
Card/Primaryна остальные инстансы на этом фрейме - Прочитай фрейм Hero и опиши, из каких слоёв он собран
Как установить figma-edit-mcp
Командой платформы
claude mcp add figma-edit-mcp -- npx -y figma-edit-mcpКомандой платформы
codex mcp add figma-edit-mcp -- npx -y figma-edit-mcpФайл настроек
{
"mcpServers": {
"figma-edit-mcp": {
"command": "npx",
"args": [
"-y",
"figma-edit-mcp"
]
}
}
}Файл настроек
{
"servers": {
"figma-edit-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figma-edit-mcp"
]
}
}
}Командой платформы
gemini mcp add figma-edit-mcp npx -y figma-edit-mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о figma-edit-mcp
Как установить figma-edit-mcp в Claude Code?
Выполните claude mcp add figma-edit-mcp -- npx -y figma-edit-mcp. Затем поднимите мост командой npx -y --package figma-edit-mcp figma-edit-mcp-socket и импортируйте плагин в Figma через Plugins → Development.
Что делает figma-edit-mcp?
Даёт ассистенту доступ к Figma через MCP: чтение макетов, создание и правка слоёв, работа с переменными и стилями. Проверки выполняет плагин внутри Figma, ассистент их обойти не может.
Ассистент испортит мой файл?
Плагин отклоняет операции за пределами выбранной области, с несовпадающим именем слоя и по защищённым слоям. Ошибку в самой задумке правки он не поймает, поэтому результат проверяют вручную.
