AI to Figma: перенесите UI из Claude или Cursor в Figma

Model Context Protocol (MCP) — открытый стандарт, позволяющий AI-инструментам вызывать внешние инструменты. HTML to Frames предоставляет свой импорт как MCP-сервер, поэтому любой клиент с поддержкой MCP может отправлять страницы в Figma.

Данные для подключения

Откройте HTML to Frames в Figma и перейдите на вкладку AI. Там показаны персональный токен и готовая настройка для вашего клиента. Писать конфигурацию вручную не нужно.

Claude Code

Добавьте сервер с помощью настройки из вкладки AI, затем попросите Claude отправить в Figma страницу, которую он собирает. Claude вызовет import_html с содержимым файла.

Claude Desktop

Добавьте сервер в MCP-конфигурацию Claude Desktop с помощью готового фрагмента и перезапустите приложение, если оно не подхватило изменения. После этого инструменты HTML to Frames появятся в диалоге.

Cursor

Добавьте сервер в MCP-настройках Cursor с теми же данными. Агент сможет импортировать сгенерированную страницу или URL, пока вы работаете в редакторе.

Другие MCP-клиенты

Любой клиент с поддержкой MCP-серверов подключается с тем же токеном. Учтите, что веб-коннекторы claude.ai, использующие OAuth, пока не поддерживаются.

Актуальные пошаговые инструкции для каждого клиента — в документации.

Сгенерированный AI HTML обычно непоследователен в мелочах: чуть разный синий на каждой кнопке, три почти одинаковых кегля, отступы, гуляющие на несколько пикселей. При буквальном импорте получится неряшливый дизайн-файл. HTML to Frames даёт инструменты, чтобы навести порядок прямо при импорте.

• Проверенный Auto Layout. Раскладки на flexbox и grid из сгенерированного CSS становятся фреймами с Auto Layout, где каждый дочерний элемент остаётся в пределах 2 px, поэтому черновик легко перестраивать.
• Styles & variables (Pro). Повторяющиеся цвета и любые кастомные CSS-свойства становятся переменными, а также создаются стили текста и теней.
• Snap to my file's styles (Pro). Значения, не совпадающие с вашей системой точно, притягиваются к ближайшим существующим стилям цвета и текста, так что AI-черновики приходят уже в рамках системы.
• Компоненты (Pro). Повторяющиеся карточки, кнопки и элементы списков становятся компонентами с экземплярами.

На практике цикл выглядит так: попросите AI сделать макет, отправьте его в Figma, поправьте визуально, затем опишите изменения AI для следующей итерации. Каждый круг ложится новыми фреймами, поэтому история версий остаётся на холсте.

Импорт идёт по вашему собственному тарифу, поэтому действуют те же лимиты, что и для любого импорта. Подробности — на странице цен.

Подключение AI-инструмента к дизайн-файлу вызывает резонные вопросы о том, чем вы делитесь. Вот как устроено MCP-подключение.

Токен

Токен подключения хранится на нашей стороне только в виде хеша. Относитесь к нему как к паролю и не держите его в общих репозиториях: именно он позволяет клиенту отправлять страницы в ваш плагин.

Страницы в пути

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

Ваш файл Figma

Через это подключение AI не может читать ваш файл Figma. Сам плагин не читает содержимое файла: он создаёт новые слои и читает только метаданные собственных фреймов.

Ограничения

• import_html принимает HTML размером до 2 МБ.
• Чтобы страницы попали в Figma, плагин должен быть открыт.
• Каждая страница считается одним импортом по вашему тарифу.
• Веб-коннекторы claude.ai (OAuth) пока не поддерживаются.

Полные сведения о хранении данных — на странице безопасности.