Для чего: дать ИИ контекст макета из Figma (фреймы, токены, auto-layout) для генерации кода по дизайну.

Что это даёт ИИ

ИИ видит структуру макета, а не просто картинку: фреймы, auto-layout, переменные/токены (цвета, отступы, типографика), имена слоёв и связи компонентов. На этом он генерит код, который реально соответствует дизайну — с правильными размерами, токенами и иерархией, а не «на глаз по скриншоту».

Пример: выделяешь во Figma карточку товара → просишь «свёрстай этот компонент на React+Tailwind» → ИИ берёт точные значения отступов/цветов из переменных макета и отдаёт верстку, близкую к пиксель-в-пиксель.

Подключение (точные шаги)

Claude Code

Предпочтительно — remote-сервер Figma (хостед, OAuth, доступен на всех планах и местах):

claude mcp add --transport http figma https://mcp.figma.com/mcp

После добавления авторизуйся: команда /mcp в Claude Code → вход в Figma в браузере.

Альтернатива — локальный Dev Mode сервер в десктоп-приложении Figma (нужен Dev или Full seat на платном плане): включи его в приложении Figma (Preferences → Dev Mode MCP server), затем подключи локальный эндпоинт http://127.0.0.1:3845/mcp:

claude mcp add --transport http figma-local http://127.0.0.1:3845/mcp

Cursor / Claude Desktop

Remote-сервер (рекомендуется, без десктоп-приложения):

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Локальный desktop-вариант — тот же блок, но "url": "http://127.0.0.1:3845/mcp" (Figma desktop должен быть запущен, сервер включён в Preferences).

Пример использования

Выдели фрейм во Figma и скажи: «сгенерируй этот экран как компонент, используя наши design tokens» → ИИ прочитает переменные макета, сопоставит их с твоими токенами в коде и соберёт компонент. Или «какие отступы и цвета у этой кнопки?» — отдаст точные значения.

Безопасность

Доступ только на чтение дизайна: сервер отдаёт ИИ метаданные макета, он не меняет ваши файлы Figma.
OAuth, а не вечный токен: remote-сервер авторизуется через вход в аккаунт Figma; токен хранится клиентом, отзывается в /mcp → «Clear authentication».
Что проверить: remote — официальный хост mcp.figma.com; локальный desktop-сервер слушает только 127.0.0.1 (не выходит наружу). Подключайтесь к боевому workspace только если доверяете клиенту.

Подводные камни

Локальный Dev Mode сервер требует Dev/Full seat на платном плане и запущенного десктоп-приложения; remote работает на всех планах, но это внешний хост.
Beta: набор тулзов и формат ответа меняются — поведение от версии к версии может отличаться.
Качество кода сильно зависит от чистоты макета: без auto-layout и переменных ИИ выдаст менее точную верстку.

Figma Dev-Mode MCP