figma-ui-mcp — MCP-сервер для Claude Code
Двусторонний MCP-сервер для работы ИИ с Figma: он рисует интерфейсы на canvas и возвращает существующий дизайн в виде данных.
claude mcp add figma-ui-mcp -- npx -y figma-ui-mcpЧто делает figma-ui-mcp
figma-ui-mcp связывает ИИ-клиент с Figma Desktop через локальный HTTP-мост на localhost:38451. Сервер принимает операции от MCP-клиента, а плагин внутри Figma выполняет их в документе. В обратную сторону можно получить дерево узлов, цвета, типографику и скриншоты.
Основные инструменты сервера: figma_write для создания фреймов, фигур, текста и прототипов через JavaScript, figma_read для чтения дизайна, figma_status для проверки подключения, figma_docs для справки и figma_rules для сборки правил дизайн-системы. Через чтение также доступны CSS, компоненты, варианты и разрешённые значения переменных, если они есть в документе.
Figma Desktop обязателен: веб-приложение Figma не даёт плагину обращаться к localhost. Ключ Figma API не нужен, весь обмен остаётся на локальной машине.
Какие задачи решает
- нарисовать экран интерфейса в Figma из описания
- прочитать структуру существующего макета
- получить CSS и токены дизайна из узла
- проверить подключение плагина и активные сессии
Примеры запросов агенту
- Нарисуй в Figma экран профиля с фреймами, текстом и кнопками через
figma_write. - Прочитай выбранный фрейм и верни дерево узлов, цвета, типографику и CSS через
figma_read. - Проверь подключение Figma-плагина и активные сессии через
figma_status.
Как установить figma-ui-mcp
Командой платформы
claude mcp add figma-ui-mcp -- npx -y figma-ui-mcpКомандой платформы
codex mcp add figma-ui-mcp -- npx -y figma-ui-mcpФайл настроек
{
"mcpServers": {
"figma-ui-mcp": {
"command": "npx",
"args": [
"-y",
"figma-ui-mcp"
]
}
}
}Файл настроек
{
"servers": {
"figma-ui-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figma-ui-mcp"
]
}
}
}Командой платформы
gemini mcp add figma-ui-mcp npx -y figma-ui-mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о figma-ui-mcp
Как установить figma-ui-mcp в Claude Code?
Выполните claude mcp add figma-ui-mcp -- npx -y figma-ui-mcp, затем откройте Figma Desktop и запустите плагин.
Что делает figma-ui-mcp?
Сервер передаёт команды между ИИ-клиентом и Figma Desktop. Он умеет создавать элементы на canvas, читать существующие узлы и возвращать данные для кода.
Нужен ли Figma API key для работы?
Нет. Обмен идёт через локальный мост localhost:38451, но для подключения нужен Figma Desktop, а не веб-приложение.
