Figma MCP Server — MCP-сервер для Claude Code: как установить
Передаёт макеты, токены и структуру слоёв из Figma в агентские чаты для генерации кода. Помогает связывать вёрстку с компонентами проекта.
claude mcp add --transport http mcp https://mcp.figma.com/mcpЧто делает Figma MCP Server
Сервер работает удалённо через протокол HTTP по адресу https://mcp.figma.com/mcp. Он отдаёт ассистенту контекст выделенных фреймов: иерархию слоёв, переменные, стили и параметры автолейаута. С помощью Code Connect модель подставляет настоящие компоненты из вашего репозитория вместо генерации дубликатов.
Запись на холст работает на удалённом сервере. В период беты создание и изменение фреймов или переменных остаётся бесплатным. Если в проекте не хватает картинок, агент запросит разрешение и создаст плейсхолдеры через инструмент generate_image.
На бесплатном тарифе Starter и местах View действует ограничение: всего 6 вызовов инструментов чтения в месяц. Без платного места Dev или Full seat постоянная разработка быстро упрётся в лимит.
Какие задачи решает
- извлекать переменные, компоненты и параметры автолейаута из выбранных фреймов
- генерировать код интерфейса с повторным использованием компонентов через Code Connect
- создавать и обновлять фреймы и переменные прямо на холсте Figma
- генерировать плейсхолдеры изображений с помощью
generate_image
Примеры запросов агенту
- Собери React-компонент формы входа по выбранному фрейму из Figma.
- Свяжи кнопку из кодовой базы с дизайн-системой через Code Connect.
- Создай на холсте Figma фрейм карточки товара с автолейаутом.
Как установить Figma MCP Server
Командой платформы: удалённый сервер
claude mcp add --transport http mcp https://mcp.figma.com/mcpКомандой платформы: удалённый сервер
codex mcp add figma-mcp-server --url https://mcp.figma.com/mcpФайл настроек
{
"mcpServers": {
"figma-mcp-server": {
"url": "https://mcp.figma.com/mcp"
}
}
}Файл настроек
{
"servers": {
"figma-mcp-server": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}Командой платформы: удалённый сервер
gemini mcp add -t http figma-mcp-server https://mcp.figma.com/mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Figma MCP Server
Как установить Figma MCP Server в Claude Code?
Выполните команду claude mcp add --transport http figma-mcp-server https://mcp.figma.com/mcp в терминале. Клиент подключит удалённый сервер Figma по протоколу HTTP.
Что делает Figma MCP Server?
Он передаёт агентам структуру слоёв, стили и токены из выбранных фреймов для генерации кода. Также сервер позволяет агенту создавать новые фреймы и переменные прямо на холсте.
Какие лимиты действуют на чтение данных из Figma?
На бесплатном тарифе Starter и с местами View доступно до 6 вызовов инструментов чтения в месяц. Для активной работы потребуется место Dev или Full seat с минутными квотами Tier 1 REST API.
