Codex и Figma: подключение через официальный MCP в 2026

Codex можно подключить к Figma через официальный Figma MCP-сервер. Для большинства удобнее установить плагин Figma в приложении Codex, а для терминала подходит штатная команда подключения из инструкции ниже. Интеграция передаёт агенту контекст макета, но готовую страницу всё равно нужно проверять.

Что именно получает Codex из Figma

Официальный Figma MCP Server умеет передавать агенту компоненты, переменные, структуру слоёв и контекст выбранного фрейма. Он также помогает связать компоненты макета с компонентами кода через Code Connect. Он даёт структурированный доступ к данным дизайна, а не экспорт одной картинки.

Есть два разных результата. В первом Codex читает макет и пишет код в вашем проекте. Во втором агент создаёт или изменяет объекты внутри Figma. Для записи нужны подходящий клиент, права редактирования файла и соответствующее место в Figma. Официальная документация отдельно указывает, что Dev seat подходит для чтения контекста, а для записи в canvas нужен Full seat и право редактирования файла: условия write to canvas.

Если задача состоит в переносе готового макета в код, начните с чтения. Разрешение на запись в Figma выдавайте только тогда, когда агент действительно должен менять исходный дизайн.

Что подготовить перед подключением

Откройте проект в приложении Codex или установите Codex CLI. Если вы только начинаете, сначала проверьте основной способ работы в практическом руководстве по Codex. Затем подготовьте ссылку на нужный файл Figma и убедитесь, что ваш аккаунт видит этот файл.

• Аккаунт Figma с доступом к конкретному файлу.
• Codex app для простого подключения или Codex CLI для терминального сценария.
• Ссылка на файл, страницу, фрейм или слой, который относится к задаче.
• Отдельная ветка Git либо чистый рабочий каталог для проверки изменений.
• Понимание требуемого режима: только чтение макета или запись в canvas.

Не передавайте агенту всё пространство дизайна без необходимости. Ссылка на конкретный фрейм уменьшает неоднозначность и помогает проверить, что код соответствует именно выбранному состоянию интерфейса.

Способ 1: установить плагин Figma в Codex app

Figma называет приложение Codex предпочтительным способом подключения. Пошаговая схема опубликована в официальной инструкции удалённого MCP-сервера.

1. Откройте Codex app и перейдите в раздел Plugins.
2. Найдите Figma, нажмите кнопку добавления, затем выберите установку плагина.
3. Пройдите авторизацию Figma и внимательно прочитайте запрашиваемые разрешения.
4. Откройте проект в Codex и дайте ссылку на конкретный фрейм Figma.
5. Попросите сначала перечислить найденные компоненты, размеры и переменные без изменения файлов.

Последний шаг служит безопасной проверкой канала. Если агент вернул сведения именно о выбранном фрейме, связь работает. Только после этого формулируйте задачу на изменение кода.

По теме: Claude и Figma: как работать через официальный коннектор в 2026

Способ 2: подключить Figma к Codex CLI

Для терминала Figma публикует одну команду подключения. Выполните её в обычной пользовательской сессии, а затем завершите авторизацию в браузере.

codex mcp add figma --url https://mcp.figma.com/mcp

После подключения запустите Codex в нужном репозитории. Не вставляйте токены Figma в AGENTS.md, исходный код или историю команд. Авторизацию должен вести MCP-клиент, а не текстовый файл проекта. Общую механику подключения серверов можно сверить с руководством по Codex MCP.

Первый тест должен быть без записи: попросите назвать имя выбранного фрейма, ширину, основные цвета и компоненты. Затем сравните четыре пункта с Figma вручную. Совпадение этих признаков надёжнее общего ответа вроде «файл доступен».

Как поставить задачу от макета к коду

Хорошая задача задаёт границу изменений и критерии приёмки. Вместо просьбы «сверстай как в Figma» укажите фрейм, целевой маршрут, существующие компоненты, допустимые файлы и размеры экранов для проверки.

• Сначала попросите агента перечислить расхождения между макетом и текущей страницей.
• Выберите один экран или компонент, а не весь продукт.
• Запретите замену общей дизайн-системы без отдельного решения.
• Попросите сохранить доступность: подписи полей, клавиатурный фокус и контраст.
• После правки запустите сборку и сравните страницу на заданных ширинах.

Приёмка состоит из пяти проверок: структура совпадает, переменные дизайна переиспользованы, изображения не потеряны, интерактивные состояния работают, сборка проходит. Внешнее сходство без этих проверок не считается готовым результатом.

По теме: Как сделать сайт в Фигме в 2026: Figma Sites, плагины и вайбкодинг

Если Codex не видит Figma

Если Codex не видит Figma, разделите проверку на три звена. Сначала проверьте, добавлен ли сервер. Затем повторите авторизацию. В конце дайте новую ссылку на конкретный узел, потому что удалённый сервер работает со ссылками на файлы и выбранные элементы.

• Ответ относится не к тому экрану: скопируйте ссылку на конкретный фрейм, а не на главную страницу файла.
• Доступ есть только на чтение: проверьте тип места и право редактирования, не пытайтесь обходить ограничение.
• Код не использует компоненты проекта: перечислите существующие компоненты и попросите не создавать дубликаты.
• После изменения сломана страница: откатите рабочую ветку и повторите задачу на одном компоненте.
• Авторизация зациклилась: удалите подключение из клиента и выполните штатное подключение заново, не копируя токены вручную.

Список доступных инструментов меняется вместе с сервером. Проверять названия и назначение следует по официальному перечню инструментов Figma MCP, а не по случайной инструкции для старой версии.

Когда интеграция не нужна

Интеграция не нужна, если у вас нет исходного Figma-файла, задача ограничена одной статичной картинкой или политика организации запрещает подключение внешнего MCP-сервера. В таком случае безопаснее экспортировать разрешённые ассеты и описать размеры вручную. Для проекта без дизайна сначала полезнее определить структуру интерфейса, как в материале Codex для дизайна интерфейса.

Если доступ к рабочему файлу выдан временно, после завершения удалите плагин или MCP-подключение и отзовите доступ в Figma. Затем проверьте, что проект собирается без активной сессии Figma: готовый код не должен зависеть от постоянного подключения к макету.

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

Можно ли подключить Figma без терминала?

Да. Официальная инструкция рекомендует установить плагин Figma через раздел Plugins в Codex app и пройти авторизацию.

Codex сможет менять сам файл Figma?

Это зависит от доступных инструментов, типа места и права редактирования. Начинайте с чтения и включайте запись только для конкретной задачи.

Нужно ли устанавливать Figma Desktop?

Для рекомендованного удалённого MCP-сервера приложение Figma Desktop не требуется. Локальный desktop server нужен только для отдельных сценариев организации.

Как понять, что подключён правильный макет?

Попросите Codex назвать фрейм, размеры, компоненты и переменные, затем вручную сравните их с выбранным узлом Figma до любых изменений кода.