Figma MCP

GLips/Figma-Context-MCP· Проверено 12.11.2026· 16,2 тыс.на GitHub

Подключает агента к макетам Figma: прочитать слои и стили для вёрстки по ссылке на фрейм, а через плагин — создавать и править элементы прямо в файле.

3 реализации:

Только чтение через Figma API по токену: отдаёт агенту сжатое описание раскладки и стилей и выгружает картинки, плагин не нужен.

Как подключить

Что сделать до подключения

Node.js с командой npx

Личный токен доступа Figma

FIGMA_API_KEY

Figma → настройки аккаунта → Personal access tokens → создать токен

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --env 'FIGMA_API_KEY=<ваш токен Figma>' --transport stdio figma \
  -- npx -y figma-developer-mcp --stdio

Проверка: claude mcp list показывает статус рядом с каждым сервером: ✔ Connected, ! Needs authentication или ✘ Failed to connect. Внутри сессии то же видно по команде /mcp.

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.figma]
command = "npx"
args = ["-y", "figma-developer-mcp", "--stdio"]

[mcp_servers.figma.env]
FIGMA_API_KEY = "<ваш токен Figma>"

Проверка: В интерфейсе codex введите /mcp: появится список активных серверов. Из терминала то же покажет codex mcp list.

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<ваш токен Figma>"
      }
    }
  }
}

Проверка: Откройте Customize в боковой панели: там список серверов с переключателями. Ошибки подключения смотрите в панели Output (Cmd+Shift+U), пункт MCP Logs в выпадающем списке.

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

{
  "mcpServers": {
    "figma": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<ваш токен Figma>"
      }
    }
  }
}

Проверка: Попросите Copilot выполнить безобидную задачу через сервер и раскройте вызов инструмента в чате. Одна запись в конфиге подключение не подтверждает.

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<ваш токен Figma>"
      }
    }
  }
}

Проверка: Запустите qwen и введите /mcp: откроется окно управления серверами. Из терминала статус покажет qwen mcp list.

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<ваш токен Figma>"
      }
    }
  }
}

Проверка: gemini mcp list показывает каждый сервер, его настройки и статус Connected или Disconnected. В сессии /mcp выводит CONNECTED, CONNECTING или DISCONNECTED и список инструментов.

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "figma": {
        "type": "local",
        "command": ["npx", "-y", "figma-developer-mcp", "--stdio"],
        "environment": {
          "FIGMA_API_KEY": "<ваш токен Figma>"
        }
      }
    }
  }
}

Проверка: opencode mcp list показывает состояние каждого сервера, подключённый выглядит как ✓ context7 connected. Внутри OpenCode то же видно в /mcps.

Настройки → Разработчик → Изменить конфиг: файл claude_desktop_config.json. После правки перезапустите приложение. Подробно о Claude Desktop

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<ваш токен Figma>"
      }
    }
  }
}

Проверка: Нажмите «Add files, connectors, and more /» в левом нижнем углу поля ввода, наведите на Connectors и откройте Manage connectors. Выберите сервер, чтобы увидеть его инструменты.

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<ваш токен Figma>"
      }
    }
  }
}

Проверка: Попросите модель в чате выполнить задачу через инструмент сервера. Через API сервер из mcp.json вызывают по id в integrations, например mcp/playwright.

Инструменты сервера

get_figma_dataчитает раскладку, тексты и стили файла

download_figma_imagesскачивает картинки и иконки из макета

Плагин в Figma и локальный WebSocket-сервер: агент читает выделение и сам рисует фреймы, тексты, автолэйаут, без токена Figma API.

Как подключить

Что сделать до подключения

Поставить Bun и склонировать репозиторий, в папке выполнить bun setup

Запустить WebSocket-сервер командой bun socket и держать его открытым

Поставить плагин Cursor Talk to Figma MCP из Figma Community или через Plugins → Development → Link existing plugin

Открыть файл, запустить плагин и подключиться к каналу: агент вызывает join_channel

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --transport stdio cursor-talk-to-figma-mcp \
  -- bunx cursor-talk-to-figma-mcp@latest

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.cursor-talk-to-figma-mcp]
command = "bunx"
args = ["cursor-talk-to-figma-mcp@latest"]

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

{
  "mcpServers": {
    "cursor-talk-to-figma-mcp": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

{
  "mcpServers": {
    "cursor-talk-to-figma-mcp": {
      "type": "stdio",
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

{
  "mcpServers": {
    "cursor-talk-to-figma-mcp": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

{
  "mcpServers": {
    "cursor-talk-to-figma-mcp": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "cursor-talk-to-figma-mcp": {
        "type": "local",
        "command": ["bunx", "cursor-talk-to-figma-mcp@latest"]
      }
    }
  }
}

{
  "mcpServers": {
    "cursor-talk-to-figma-mcp": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

{
  "mcpServers": {
    "cursor-talk-to-figma-mcp": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

Инструменты сервера

join_channelподключается к каналу плагина

get_document_infoчитает сведения о документе

get_selectionчитает текущее выделение

read_my_designразбирает выделенные слои

get_node_infoчитает свойства слоя

create_frameсоздаёт фрейм

create_textсоздаёт текстовый слой

create_rectangleрисует прямоугольник

scan_text_nodesсобирает все тексты макета

set_multiple_text_contentsменяет много текстов разом

set_layout_modeвключает автолэйаут фрейма

set_paddingзадаёт отступы автолэйаута

set_fill_colorменяет цвет заливки

set_corner_radiusскругляет углы

set_image_fillзаливает слой картинкой

move_nodeдвигает слой

clone_nodeкопирует слой

create_component_instanceвставляет экземпляр компонента

set_instance_overridesпереносит настройки экземпляров

export_node_as_imageвыгружает слой картинкой

Заточен под дизайн-системы: переменные и токены в обе стороны, проверки доступности и сверка с кодом, FigJam и Slides; пишет в файл через плагин Desktop Bridge.

Как подключить

Что сделать до подключения

Node.js 18 или новее и приложение Figma Desktop

Личный токен Figma с правами File content, File versions, Library content, Library assets, Comments, Current user

В Figma Desktop: Plugins → Development → Import plugin from manifest… и выбрать ~/.figma-console-mcp/plugin/manifest.json

Запустить плагин Desktop Bridge в файле: он сам находит сервер на портах 9223–9232

FIGMA_ACCESS_TOKEN

Figma → Manage personal access tokens → новый токен, начинается с figd_, показывается один раз

Конфиг для вашего клиента

Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code

claude mcp add --env 'FIGMA_ACCESS_TOKEN=<токен figd_…>' --env ENABLE_MCP_APPS=true --transport stdio figma-console-mcp \
  -- npx -y figma-console-mcp@latest

Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex

[mcp_servers.figma-console-mcp]
command = "npx"
args = ["-y", "figma-console-mcp@latest"]

[mcp_servers.figma-console-mcp.env]
FIGMA_ACCESS_TOKEN = "<токен figd_…>"
ENABLE_MCP_APPS = "true"

Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor

{
  "mcpServers": {
    "figma-console-mcp": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "<токен figd_…>",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code

{
  "mcpServers": {
    "figma-console-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "<токен figd_…>",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code

{
  "mcpServers": {
    "figma-console-mcp": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "<токен figd_…>",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI

{
  "mcpServers": {
    "figma-console-mcp": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "<токен figd_…>",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "figma-console-mcp": {
        "type": "local",
        "command": ["npx", "-y", "figma-console-mcp@latest"],
        "environment": {
          "FIGMA_ACCESS_TOKEN": "<токен figd_…>",
          "ENABLE_MCP_APPS": "true"
        }
      }
    }
  }
}

{
  "mcpServers": {
    "figma-console-mcp": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "<токен figd_…>",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio

{
  "mcpServers": {
    "figma-console-mcp": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "<токен figd_…>",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Инструменты сервера

figma_get_statusпроверяет связь с плагином

figma_get_design_system_kitвыгружает дизайн-систему целиком

figma_get_variablesчитает переменные и токены

figma_get_componentчитает свойства компонента

figma_get_stylesчитает стили цвета и текста

figma_take_screenshotснимает страницу или слой

figma_get_selectionчитает текущее выделение

figma_executeвыполняет код Plugin API

figma_create_component_setсоздаёт набор вариантов компонента

figma_set_layoutзадаёт автолэйаут или сетку

figma_set_textменяет текст и шрифт

figma_instantiate_componentвставляет экземпляр компонента

figma_create_variableсоздаёт переменную

figma_batch_create_variablesсоздаёт до 100 переменных разом

figma_setup_design_tokensсобирает коллекцию токенов с режимами

figma_check_design_parityсверяет компонент с кодом

figma_lint_designпроверяет макет по WCAG

figma_audit_design_system_reportоценивает здоровье дизайн-системы

figma_get_commentsчитает комментарии файла

figma_get_console_logsчитает консоль плагина

Показано 20 из 130.

Что попросить агента

«Сверстай экран по ссылке <ссылка на фрейм в Figma>»Framelink вызовет get_figma_data, скачает картинки через download_figma_images и напишет разметку по этим данным

«Замени все тексты на экране <имя фрейма> на русские из этого списка: <список>»Talk to Figma найдёт текстовые слои через scan_text_nodes и заменит их пачкой через set_multiple_text_contents

«Перенеси переопределения с этого экземпляра на остальные карточки»Talk to Figma применит переопределения к выбранным экземплярам через set_instance_overrides

«Создай коллекцию цветов «Brand Colors» с режимами Light и Dark»Figma Console MCP соберёт коллекцию с режимами и переменными через figma_setup_design_tokens или figma_batch_create_variables

«Сравни компонент Button в Figma с нашей реализацией на React»Figma Console MCP сверит макет с кодом через figma_check_design_parity и выдаст отчёт о расхождениях

Для каких задач

Сверстать экран по ссылке на фрейм или группу в Figma

Выгрузить картинки и иконки из макета в проект

Заменить тексты во всём макете одной командой

Перенести переменные Figma в токены DTCG и вернуть правки из кода обратно

Проверить макет на доступность по WCAG и сверить компонент с его кодом

Собрать доску FigJam или презентацию в Figma Slides

Ограничения

Framelink только читает файл: создавать и менять слои он не умеет

Talk to Figma работает, пока запущены WebSocket-сервер bun socket и плагин в открытом файле

Figma Console MCP пишет в файл только через Figma Desktop с плагином Desktop Bridge; удалённое подключение без плагина только читает

Переменные через REST API Figma доступны только на тарифе Enterprise; плагин Desktop Bridge работает с ними на любом тарифе

Если не работает

Figma Console MCP: связь с плагином пропадает, статус «not connected»

Обновите сервер до v1.31.0 или новее и один раз заново импортируйте плагин: Plugins → Development → Import plugin from manifest…, файл ~/.figma-console-mcp/plugin/manifest.json. Состояние проверяет figma_get_status.

Плагин Desktop Bridge пишет «No MCP server found»

Плагин не нашёл сервер на портах 9223–9232: запустите клиент с настроенным figma-console-mcp и проверьте figma_get_status.

Figma API отвечает 403 Forbidden

У токена нет права, которое требует запрос: выпустите новый токен с правами из раздела Setup, обновите FIGMA_ACCESS_TOKEN и перезапустите клиент.

Плагин подключён, но команды падают по таймауту

Команды идут в активный файл: запустите Desktop Bridge в том файле, с которым работаете, и проверьте через figma_get_status, какой файл подключён.

Сервер в Docker не связывается с плагином

Задайте в контейнере FIGMA_WS_HOST=0.0.0.0 и пробросьте порт -p 9223:9223.

Какую реализацию выбрать

Реализация	Кто делает	Звёзды	Запуск	Ключ	Инструменты	Обновлён
Framelink MCP for Figma	Framelink (GLips)	16,2 тыс.	локально	токен	2	27 октября 2026
Talk to Figma MCP	Grab	7,1 тыс.	локально	не нужен	20	26 июля 2026
Figma Console MCP	Southleft	3,3 тыс.	локально	токен	130	29 октября 2026

Частые вопросы

Какой из трёх серверов выбрать?

Для вёрстки по макету хватит Framelink: он отдаёт агенту раскладку и стили и ничего не меняет в файле. Чтобы агент рисовал в Figma, нужен Talk to Figma или Figma Console MCP с плагином. Console MCP шире: токены, проверки доступности, FigJam и Slides.

Зачем подключать Figma, если можно вставить скриншот?

Framelink перед ответом упрощает ответ Figma API и оставляет только раскладку и стили. По такому описанию агент точнее повторяет макет, чем по вставленной картинке.

Где взять токен Figma?

Создайте personal access token в настройках аккаунта Figma. Для Figma Console MCP отметьте права File content, File versions, Library content, Library assets, Comments и Current user. Токен начинается с figd_ и показывается один раз.

Есть ли MCP-сервер у самой Figma?

Есть: его размещает Figma, он отдаёт контекст для кода, работает с Code Connect и умеет создавать контент в файлах. Figma Console MCP можно держать рядом с ним в одном клиенте для задач дизайн-системы.

Можно подключить Figma к Claude.ai в браузере?

Да, через Cloud Mode у Figma Console MCP: адрес https://figma-console-mcp.southleft.com/mcp, токен Figma как Bearer. Затем в плагине Desktop Bridge включите Cloud Mode и введите код из 6 символов, который выдаст агент; код действует 5 минут.

Работает ли сервер из России?

Серверы запускаются на вашем компьютере, но работают с вашим аккаунтом Figma: Framelink и Figma Console MCP обращаются к Figma API по личному токену.

Figma MCP

Как подключить

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

Как подключить

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

Как подключить

Что сделать до подключения

Конфиг для вашего клиента

Инструменты сервера

Что попросить агента

Для каких задач

Ограничения

Если не работает

Какую реализацию выбрать

Частые вопросы

Похожие серверы