Figma-Context-MCP — MCP-сервер для Claude Code: установка
MCP-сервер передаёт агенту разметку и стили из макетов Figma. Помогает собирать интерфейс по ссылке на фрейм без ручной нарезки скриншотов.
claude mcp add figma-context-mcp -e FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-developer-mcpЧто делает Figma-Context-MCP
MCP-сервер запускает пакет figma-developer-mcp через npx и связывает редактор кода с API Figma. Вместо передачи сырого дерева документа сервер отбирает только параметры геометрии и стилей. За счёт такой фильтрации модель не перегружается лишними метаданными.
В чат помощника отправляют ссылку на фрейм или группу слоёв. Сервер запрашивает параметры узлов и отдаёт их агенту для сборки компонентов на нужном фреймворке.
Без действующего токена FIGMA_API_KEY сервер не сможет прочитать макеты. Токен создают в настройках аккаунта Figma и прописывают в параметры запуска.
Какие задачи решает
- перенести верстку фрейма из Figma в компоненты
- получить точные отступы и цвета элементов макета
- сверстать интерфейс по ссылке на выбранную группу слоёв
Примеры запросов агенту
- Сверстай компонент карточки на Tailwind по ссылке на фрейм из Figma
- Посмотри структуру макета по ссылке на Figma и создай разметку формы входа
- Извлеки отступы и цвета кнопок из этой ссылки на группу в Figma
Как установить Figma-Context-MCP
Командой платформы
claude mcp add figma-context-mcp -e FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-developer-mcpВместо <…> подставьте свои значения
Командой платформы
codex mcp add figma-context-mcp --env FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-developer-mcpВместо <…> подставьте свои значения
Файл настроек
{
"mcpServers": {
"figma-context-mcp": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}Вместо <…> подставьте свои значения
Файл настроек
{
"servers": {
"figma-context-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figma-developer-mcp"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}Вместо <…> подставьте свои значения
Командой платформы
gemini mcp add -e FIGMA_API_KEY=<FIGMA_API_KEY> figma-context-mcp npx -y figma-developer-mcpВместо <…> подставьте свои значения
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Figma-Context-MCP
Как установить Figma-Context-MCP в Claude Code?
Выполните команду claude mcp add figma-context-mcp -e FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-developer-mcp, указав персональный токен Figma вместо плейсхолдера.
Что делает Figma-Context-MCP?
Сервер запрашивает данные узлов через Figma API, очищает лишнюю служебную информацию и передаёт агенту параметры оформления со структурой разметки.
Что нужно подготовить перед запуском?
Потребуется персональный токен доступа к Figma, который передаётся через флаг --figma-api-key или переменную окружения FIGMA_API_KEY.
