AI to Figma: интерфейс из Claude и Cursor в Figma через MCP

ИИ-ассистенты для программирования теперь за несколько минут выдают убедительный лендинг, экран настроек или дашборд. Проблема в том, где этот интерфейс оказывается: в редакторе кода или локальном превью, далеко от файла Figma, в котором ваша команда ревьюит, аннотирует и дорабатывает дизайн.

В этом руководстве показано, как закрыть этот разрыв с помощью связки AI to Figma. HTML to Frames предоставляет MCP-подключение, через которое Claude Code, Claude Desktop, Cursor или любой MCP-клиент отправляют страницы прямо в ваш открытый плагин Figma, где они конвертируются в настоящие редактируемые слои с Auto Layout.

Что здесь значит «AI to Figma»

Под AI to Figma понимают две очень разные вещи:

1. ИИ, который генерирует дизайн внутри Figma по промпту.
2. ИИ, который пишет HTML и CSS, и мост, который конвертирует этот код в слои Figma.

HTML to Frames делает второе. Ваш ИИ-инструмент продолжает делать то, что умеет хорошо, — писать фронтенд-код, а плагин выполняет ту же конвертацию, что и для любой веб-страницы: фреймы, текст, векторы, изображения, переменные и Auto Layout. Качество результата такое же, как при импорте живого сайта, потому что он проходит через тот же конвейер захвата. Обзор продукта — на странице AI to Figma.

Как работает MCP-подключение

Model Context Protocol (MCP) — стандартный способ, которым ИИ-инструменты вызывают внешние инструменты. Когда вы подключаете HTML to Frames как MCP-сервер, ваш ИИ-инструмент получает три инструмента:

Страница попадает в ваш открытый плагин в Figma и импортируется по вашему собственному тарифу, поэтому действуют обычные правила тарифа: экраны на импорт, стили и переменные, компоненты и так далее.

Что получает ИИ-инструмент в ответ

ИИ не получает обратно ваш файл Figma. Он получает ответ на вызов инструмента, подтверждающий, что страница передана, и может вызвать import_status, чтобы узнать, как идёт импорт. Сама дизайн-работа происходит в Figma, внутри плагина, где вы видите экран результатов с фреймами, слоями, долей Auto Layout и предупреждениями, если они есть. Так задумано: плагин не читает содержимое вашего файла Figma, поэтому ничего о вашем файле не уходит обратно к ИИ.

Настройка: подключите ИИ-инструмент во вкладке AI плагина

Настройка делается один раз для каждого ИИ-клиента. Всё начинается в плагине.

1. Откройте HTML to Frames в Figma и перейдите на вкладку AI.
2. Получите токен. Вкладка AI выдаёт токен подключения. Обращайтесь с ним как с паролем.
3. Выберите клиент. Вкладка AI показывает настройку для копирования для поддерживаемых клиентов.
4. Вставьте настройку в клиент ровно в том виде, как она показана (подробности по клиентам ниже).
5. Перезапустите или перезагрузите клиент, чтобы он подхватил новый MCP-сервер.
6. Держите плагин открытым в Figma, пока работаете. Страницы доставляются в открытый плагин.

Claude Code

Claude Code читает MCP-серверы из своей конфигурации. Скопируйте настройку, которую вкладка AI выдаёт для Claude Code, и выполните или вставьте её, как указано. Затем начните новую сессию и попросите Claude перечислить свои инструменты; вы должны увидеть import_html, import_url и import_status.

Claude Desktop

Claude Desktop хранит MCP-серверы в конфигурационном файле, который можно открыть из настроек разработчика в приложении. Вставьте в этот файл фрагмент из вкладки AI, сохраните и полностью перезапустите Claude Desktop. Инструменты появятся в меню инструментов нового чата.

Cursor

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

Любой другой MCP-клиент

Если ваш инструмент поддерживает MCP, подходят тот же токен и та же настройка. Используйте универсальную настройку из вкладки AI и адаптируйте её к тому, как ваш клиент регистрирует серверы.

Пока не поддерживается: веб-коннекторы claude.ai

Веб-коннекторы claude.ai (OAuth) пока не поддерживаются. Если вы работаете в браузерной версии Claude, сгенерируйте HTML там, сохраните его и импортируйте через источник Local file или Paste code в плагине. Или перенесите задачу в Claude Code или Claude Desktop, которые уже сейчас подключаются через MCP.

Конфиденциальность: что происходит с токеном и страницами

ИИ-процессы вызывают закономерные вопросы о том, куда уходят код и дизайн. Вот что делает подключение:

• Токен подключения хранится только в виде хеша. Сервис может его проверить, но сам токен не хранит.
• Страницы ждут в памяти не более 30 минут. Если плагин не заберёт страницу за это время, она исчезает.
• Отрисовка происходит в изолированном браузере в песочнице. Результат передаётся один раз, затем удаляется из памяти и никогда не записывается на диск.
• Никаких cookie, аналитики и пикселей отслеживания в плагине, расширении и на сайте.
• Мы никогда не получаем ваше имя или email от Figma; идентификатор аккаунта формируется из вашего user id в Figma.

Полное описание — на странице безопасности.

Ограничения, которые стоит знать

• Размер HTML: import_html принимает до 2 МБ. Встраивайте большие base64-изображения умеренно; по возможности ссылайтесь на размещённые изображения.
• Только публичные URL для import_url. Если превью ИИ работает на localhost, либо попросите ИИ отправить HTML напрямую через import_html, либо снимите запущенную страницу расширением для Chrome, которое работает с localhost и страницами за логином.
• Расходуется лимит тарифа. Каждая страница считается импортом по вашему тарифу. Free даёт 10 импортов в месяц и 1 экран на импорт; Pro и Team — безлимит в рамках добросовестного использования и до 4 экранов на импорт. См. цены.
• Те же правила конвертации, что и для любой страницы. iframe, WebGL-canvas и видео без постера становятся скриншотом своего блока. Skew и 3D-трансформации пока не конвертируются.

Промпты, которые стоит попробовать

После подключения вы общаетесь с ИИ как обычно и просите отправить результат в Figma. Несколько промптов, которые хорошо работают:

1. «Сверстай страницу цен с тремя тарифами на чистом HTML и CSS с flexbox, затем отправь её в Figma через import_html».
2. «Возьми экран настроек, который ты только что собрал, встрой CSS inline и импортируй в Figma. Потом проверь import_status».
3. «Наш staging-сайт доступен по этому публичному URL. Импортируй страницы цен и регистрации в Figma через import_url».
4. «Сделай два варианта этого первого экрана: с заголовком, выровненным по левому краю, и с центрированным. Отправь каждый в Figma отдельным импортом».
5. «Перепиши эту сетку карточек с CSS custom properties для цветов, затем импортируй, чтобы переменные перенеслись».

Как формулировать промпты для чистого результата в Figma

ИИ пишет код, который импортируется лучше, если подсказать ему с CSS:

• Просите flexbox и grid с gap вместо margin между соседними элементами. Они чисто ложатся на Auto Layout; см. CSS flexbox и grid в Auto Layout.
• Просите CSS custom properties для цветов. С включённым Styles & variables (Pro) --brand-primary становится переменной brand/primary.
• Просите настоящий текст, а не текст, впечатанный в изображения, чтобы каждый заголовок оставался редактируемым.
• Просите одну страницу на импорт; длинные многоэкранные документы сложнее ревьюить.

Цикл дизайна и кода

Настоящая ценность не в одном импорте. Она в цикле, в котором дизайн и код перестают расходиться.

1. Промпт: ИИ собирает первую версию в коде.
2. Импорт: ИИ отправляет её в Figma через import_html или import_url.
3. Ревью в Figma: дизайнеры правят отступы, типографику, цвет и вёрстку во фреймах с Auto Layout, оставляют комментарии и пробуют альтернативы.
4. Обратное описание изменений: расскажите ИИ, что изменилось, или вставьте нужные значения, и пусть он обновит код.
5. Re-import (повторный импорт), чтобы убедиться, что код теперь совпадает, и сравнить с предыдущим фреймом.

Кому это полезно

• Дизайнеры перестают вручную перерисовывать ИИ-прототипы и начинают с редактируемых фреймов.
• Фронтенд-разработчики получают дизайн-ревью реального результата без экспорта скриншотов.
• Продакт-менеджеры могут превратить промпт в страницу Figma для ревью на встрече со стейкхолдерами.
• Соло-разработчики хранят визуальную историю каждой итерации в одном файле.

AI to Figma в сравнении с другими путями

Все три пути через плагин используют один и тот же движок. MCP просто убирает шаг копирования и вставки и позволяет ИИ управлять процессом. Auto Layout проверяется: позиция каждого дочернего элемента сверяется с точностью до 2 px, и если раскладка не сходится, пробуется более простой план или фрейм сохраняет абсолютные позиции. Дизайн никогда не ломается. Подробнее — в статье Auto Layout изнутри.

Решение проблем

• ИИ говорит, что инструмент недоступен. Перезапустите клиент после добавления сервера и проверьте, что фрагмент вставлен без изменений.
• Импорт так и не появляется. Убедитесь, что плагин открыт в Figma. Страницы ждут до 30 минут, так что откройте плагин — и он заберёт их в этот промежуток.
• Токен отклонён. Сгенерируйте новый токен во вкладке AI и обновите настройку клиента.
• Вёрстка выглядит не так. Посмотрите диагностику на экране результатов — она объясняет, почему фрейм остался абсолютным, — и попросите ИИ использовать flexbox или grid для этой секции.

С чего начать

Откройте плагин, перейдите на вкладку AI и подключите один клиент. Попросите ИИ-инструмент собрать небольшой компонент и отправить его в Figma — вы увидите, как всё работает, прежде чем доверять ему целый экран. Вкладка AI описана в документации, а на странице возможностей перечислено всё, что поддерживает импорт.