Figma MCP — MCP-сервер для Claude Code: кадры и PNG из макета
Два инструмента для Figma REST API: перечислить верхние фреймы файла и выкачать один кадр в PNG вместе с JSON узла. Пригодится, когда агенту нужен макет, а не скриншот из чата.
claude mcp add --env FIGMA_TOKEN=<FIGMA_TOKEN> --env FIGMA_API_BASE_URL=<FIGMA_API_BASE_URL> --env FIGMA_REQUEST_TIMEOUT_MS=<FIGMA_REQUEST_TIMEOUT_MS> --env FIGMA_MAX_JSON_BYTES=<FIGMA_MAX_JSON_BYTES> --env FIGMA_MAX_FRAME_BYTES=<FIGMA_MAX_FRAME_BYTES> --transport stdio figma-mcp -- npx -y @scalably-io/figma-mcpЧто делает Figma MCP
Сервер даёт агенту list_frames и fetch_frame. Первый проходит по верхним узлам типа FRAME в файле Figma и отдаёт страницу, имя, node-id, размеры и метаданные файла. Второй берёт один кадр и сохраняет рядом три файла: frame.png, node.json и fills.json с нормализованной картой заливок-картинок.
Запись на диск умеет только fetch_frame, поэтому read-only помечен лишь второй инструмент. Всё складывается в подкаталог под FIGMA_OUTPUT_ROOT (по умолчанию ./figma-output, создаётся при первом обращении). Без FIGMA_TOKEN сервер запустится и покажет список инструментов, но каждый вызов вернёт FIGMA_NOT_CONFIGURED.
Токен — личный, из настроек аккаунта Figma, со скоупом file_content:read. Ключ файла берётся из адреса: сегмент после /design/ или /file/. Кадры рендерятся через image API Figma, так что очень крупный фрейм или большой scale упрётся в лимиты байт на JSON и PNG; тогда поможет меньший масштаб или разбиение кадра. Ссылки внутри fills.json временные.
Какие задачи решает
- получить список фреймов файла Figma с точными node-id
- вытащить один кадр в PNG для сверки вёрстки
- отдать агенту JSON узла и карту заливок
- найти ключ файла из ссылки на макет
- ограничить размер ответа Figma API через переменные окружения
Примеры запросов агенту
- Перечисли верхние фреймы в файле
AbC123xyzчерезlist_frames - Скачай фрейм
12:34из файлаAbC123xyzчерезfetch_frameв./figma-output - Покажи, какие заливки-картинки есть в
fills.jsonэтого кадра
Как установить Figma MCP
Командой платформы
claude mcp add --env FIGMA_TOKEN=<FIGMA_TOKEN> --env FIGMA_API_BASE_URL=<FIGMA_API_BASE_URL> --env FIGMA_REQUEST_TIMEOUT_MS=<FIGMA_REQUEST_TIMEOUT_MS> --env FIGMA_MAX_JSON_BYTES=<FIGMA_MAX_JSON_BYTES> --env FIGMA_MAX_FRAME_BYTES=<FIGMA_MAX_FRAME_BYTES> --transport stdio figma-mcp -- npx -y @scalably-io/figma-mcpВместо <…> подставьте свои значения. Ещё 2 переменные окружения — в README сервера
Командой платформы
codex mcp add figma-mcp --env FIGMA_TOKEN=<FIGMA_TOKEN> --env FIGMA_API_BASE_URL=<FIGMA_API_BASE_URL> --env FIGMA_REQUEST_TIMEOUT_MS=<FIGMA_REQUEST_TIMEOUT_MS> --env FIGMA_MAX_JSON_BYTES=<FIGMA_MAX_JSON_BYTES> --env FIGMA_MAX_FRAME_BYTES=<FIGMA_MAX_FRAME_BYTES> -- npx -y @scalably-io/figma-mcpВместо <…> подставьте свои значения. Ещё 2 переменные окружения — в README сервера
Файл настроек
{
"mcpServers": {
"figma-mcp": {
"command": "npx",
"args": [
"-y",
"@scalably-io/figma-mcp"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>",
"FIGMA_API_BASE_URL": "<FIGMA_API_BASE_URL>",
"FIGMA_REQUEST_TIMEOUT_MS": "<FIGMA_REQUEST_TIMEOUT_MS>",
"FIGMA_MAX_JSON_BYTES": "<FIGMA_MAX_JSON_BYTES>",
"FIGMA_MAX_FRAME_BYTES": "<FIGMA_MAX_FRAME_BYTES>"
}
}
}
}Вместо <…> подставьте свои значения. Ещё 2 переменные окружения — в README сервера
Файл настроек
{
"servers": {
"figma-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@scalably-io/figma-mcp"
],
"env": {
"FIGMA_TOKEN": "<FIGMA_TOKEN>",
"FIGMA_API_BASE_URL": "<FIGMA_API_BASE_URL>",
"FIGMA_REQUEST_TIMEOUT_MS": "<FIGMA_REQUEST_TIMEOUT_MS>",
"FIGMA_MAX_JSON_BYTES": "<FIGMA_MAX_JSON_BYTES>",
"FIGMA_MAX_FRAME_BYTES": "<FIGMA_MAX_FRAME_BYTES>"
}
}
}
}Вместо <…> подставьте свои значения. Ещё 2 переменные окружения — в README сервера
Командой платформы
gemini mcp add -e FIGMA_TOKEN=<FIGMA_TOKEN> -e FIGMA_API_BASE_URL=<FIGMA_API_BASE_URL> -e FIGMA_REQUEST_TIMEOUT_MS=<FIGMA_REQUEST_TIMEOUT_MS> -e FIGMA_MAX_JSON_BYTES=<FIGMA_MAX_JSON_BYTES> -e FIGMA_MAX_FRAME_BYTES=<FIGMA_MAX_FRAME_BYTES> figma-mcp npx -y @scalably-io/figma-mcpВместо <…> подставьте свои значения. Ещё 2 переменные окружения — в README сервера
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Figma MCP
Как установить Figma MCP в Claude Code?
Одной командой: claude mcp add figma-mcp -e FIGMA_TOKEN=<FIGMA_TOKEN> -- npx -y @scalably-io/figma-mcp. Токен подставьте свой, со скоупом file_content:read.
Что делает Figma MCP?
Перечисляет верхние FRAME-узлы в файле Figma и выкачивает выбранный кадр как PNG вместе с JSON узла и картой заливок.
Что будет без токена Figma?
Сервер стартует и показывает свои инструменты, но любой вызов завершается ошибкой FIGMA_NOT_CONFIGURED, пока не задан FIGMA_TOKEN.
