ИИ-агент САМ рисует макеты в Figma — Figma Console MCP
Figma Console MCP — бесплатный открытый мост между десктопной Figma и Claude Code, Codex или Cursor. Через него агент получает
130 инструментов и сам правит открытый макет: слои, компоненты, переменные.
Внутри Figma Console MCP
// ЧТО УМЕЕТ
├
Рисует сам: создаёт и правит фреймы, фигуры, текст и компоненты прямо в открытом файле
├
Ведёт дизайн-систему: заводит переменные и токены, выгружает их в 10 форматов, от CSS до Tailwind
├
Видит твои правки: что выделено и что поменялось в файле, сразу, без перезагрузки
└
Проверяет макет: ищет проблемы с доступностью и сверяет компонент с кодом
// СКОЛЬКО СТОИТ
├
Ноль рублей: код открыт под MIT, мост крутится у тебя на компе
└
Тариф Figma не важен: работает и на бесплатном, даже с переменными, которые обычный API Figma отдаёт только в Enterprise
Что важно: плагин-мост ставится только в десктопную Figma, из браузерной версии агент к макету не подключится.
Шаг 0 — что понадобится
Готовим комп
Шаг · Действие
1 ·
ставим десктопную Figma с официального сайта
2 ·
ставим Node.js 18 или новее с nodejs.org, на нём работает мост
3 ·
открываем терминал: на Windows жмём Win+X → «Терминал» или PowerShell, на маке «Терминал» лежит в «Утилитах». Проверяем Node командой node --version, команды вставляем по одной и ждём, пока терминал снова будет готов
4 ·
нужен сам агент: Claude Code или Codex. Сервер не нужен, мост работает на твоём компе, пока открыт агент
Шаг 1 — токен и подключение
Токен берём в Figma: меню аккаунта → Settings → Security → Personal access tokens → Generate new token. Права ставим Read у File content, File versions, Library content, Library assets и Current user, а у Comments — Read и Write. Токен начинается с figd_ и показывается один раз,
сразу копируем.
Дальше одна команда в терминал, вместо figd_ВАШ_ТОКЕН вставляем свой:
Подключаем к агенту
Агент · Команда (нажми, чтобы скопировать)
Claude Code · claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_ВАШ_ТОКЕН -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest
Codex · codex mcp add figma-console --env FIGMA_ACCESS_TOKEN=figd_ВАШ_ТОКЕН --env ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest
Codex ещё просит поднять таймауты: открываем Блокнотом файл .codex\config.toml в папке пользователя, в блок [mcp_servers.figma-console] дописываем две строки и сохраняем Ctrl+S.
Строка для config.toml (нажми, чтобы скопировать)
startup_timeout_sec = 60
tool_timeout_sec = 300
Шаг 2 — плагин и первый запрос
Связываем с Figma
Шаг · Действие
1 ·
перезапускаем агента: закрываем сессию и открываем заново, мост при старте сам кладёт файлы плагина в папку .figma-console-mcp
2 · в Figma жмём
Plugins → Development → Import plugin from manifest и выбираем manifest.json: на Windows вставляем в окно выбора путь %USERPROFILE%\.figma-console-mcp\plugin, на маке жмём ⌘⇧G и вставляем ~/.figma-console-mcp/plugin
3 · открываем макет и запускаем
Plugins → Development → Figma Desktop Bridge, в плашке плагина загорится «Local · ready»
4 · пишем агенту Check Figma status, потом Create a simple frame with a blue background, и
в макете появляется синий фрейм
Ссылки
GitHub
Инструкция
😎КиберПоток/Навигация
#гайд #figma #mcp
