Figma UI

Figma UI позволяет ИИ-клиентам, таким как Claude, создавать, изменять и извлекать данные дизайна прямо в Figma Desktop. Автоматизируйте создание интерфейсов, читайте деревья узлов, стили и скриншоты с помощью безопасной двунаправленной связи через localhost. Расширьте возможности вашего ИИ-воркфлоу для дизайна.

Дизайн Инструменты разработчика Продуктивность и workflow ★ 34 GitHub (34 ★)

Figma UI MCP выступает надёжным мостом, позволяя AI-клиентам, таким как Claude, бесшовно интегрироваться с Figma Desktop. Он обеспечивает двунаправленный поток: AI может программно создавать, изменять и управлять пользовательскими интерфейсами напрямую в Figma с помощью JavaScript-кода. С другой стороны, он может читать и извлекать подробную информацию о дизайне — включая деревья узлов, цвета, типографику и даже скриншоты — из существующих файлов Figma, что позволяет AI анализировать, описывать и конвертировать дизайн в различные форматы, например, в код. Этот инструмент работает безопасно и локально через HTTP-механизм polling на localhost, гарантируя, что все данные остаются на машине пользователя.

Ключевые возможности

01Программная генерация и модификация UI в Figma с помощью JavaScript-кода от AI.

figma-ui-mcp

Bidirectional Figma MCP — use Claude (or any MCP client) to draw UI directly in Figma, and read existing designs back as structured data or code.

Requires Figma Desktop — the plugin communicates with the MCP server over localhost HTTP polling. Figma's web app does not allow localhost network access, so Figma Desktop is required.

Claude ──figma_write──▶ MCP Server ──HTTP (localhost:38451)──▶ Figma Plugin ──▶ Figma Document
Claude ◀─figma_read──── MCP Server ◀──HTTP (localhost:38451)── Figma Plugin ◀── Figma Document

How the localhost bridge works

The MCP server starts a small HTTP server bound to localhost:38451. The Figma plugin (running inside Figma Desktop) polls this server every 500 ms to pick up queued operations and post results back. All traffic stays on your machine — nothing is sent to any external server.

This approach is necessary because Figma plugins run in a sandboxed iframe and cannot use stdio or WebSocket to talk to a local process directly. HTTP polling over localhost is the only supported method for a Figma plugin to communicate with a local tool.

Features

Direction	Tool	What it does
Write	`figma_write`	Draw frames, shapes, text on any page via JS code
Read	`figma_read`	Extract node trees, colors, typography, screenshots
Info	`figma_status`	Check plugin connection status
Docs	`figma_docs`	Get full API reference + examples

Quick Start

Step 1 — Add the MCP server to your AI client

Choose your platform:

Claude Code (CLI)

# Project scope (default)
claude mcp add figma-ui-mcp -- npx figma-ui-mcp

# Global scope (all projects)
claude mcp add --scope user figma-ui-mcp -- npx figma-ui-mcp

Claude Desktop

Edit config file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

Cursor

Edit .cursor/mcp.json (project) or ~/.cursor/mcp.json (global):

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

VS Code / GitHub Copilot

Edit .vscode/mcp.json (project) or add to settings.json (global):

{
  "mcp": {
    "servers": {
      "figma": {
        "command": "npx",
        "args": ["-y", "figma-ui-mcp"]
      }
    }
  }
}

Windsurf

Edit ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

Antigravity (Google)

Open "..." dropdown at the top of the agent panel
Click "Manage MCP Servers" → "View raw config"
Add to mcp_config.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

From source (any client)

git clone https://github.com/TranHoaiHung/figma-ui-mcp
cd figma-ui-mcp
npm install
# Then point your MCP client to: node /path/to/figma-ui-mcp/server/index.js

Step 2 — Run the Figma plugin

Open Figma Desktop (required — web app cannot access localhost)
Go to Plugins → Development → Import plugin from manifest...
Select plugin/manifest.json from this repo
Run Plugins → Development → Figma UI MCP Bridge

The plugin UI shows a green dot when the MCP server is connected.

Step 3 — Start designing with AI

The MCP tools are automatically available in your AI client:

figma_status     — check connection
figma_write      — draw / modify UI
figma_read       — extract design data
figma_docs       — API reference

Usage Examples

Draw a screen

Ask Claude: "Draw a dark dashboard with a sidebar, header, and 4 KPI cards"

Claude calls figma_write with code like:

await figma.createPage({ name: "Dashboard" });
await figma.setPage({ name: "Dashboard" });

const root = await figma.create({
  type: "FRAME", name: "Dashboard",
  x: 0, y: 0, width: 1440, height: 900,
  fill: "#0f172a",
});

const sidebar = await figma.create({
  type: "FRAME", name: "Sidebar",
  parentId: root.id,
  x: 0, y: 0, width: 240, height: 900,
  fill: "#1e293b", stroke: "#334155", strokeWeight: 1,
});

await figma.create({
  type: "TEXT", name: "App Name",
  parentId: sidebar.id,
  x: 20, y: 24, content: "My App",
  fontSize: 16, fontWeight: "SemiBold", fill: "#f8fafc",
});
// ... continue

Read a design

Ask Claude: "Read my selected frame and convert it to Tailwind CSS"

Claude calls figma_read with operation: "get_selection", receives the full node tree, then generates corresponding code.

Screenshot a frame

figma_read  →  operation: "screenshot"  →  nodeId: "123:456"

Returns a base64 PNG Claude can analyze and describe.

Architecture

figma-ui-mcp/
├── server/
│   ├── index.js            MCP server (stdio transport)
│   ├── bridge-server.js    HTTP bridge on localhost:38451
│   ├── code-executor.js    VM sandbox — safe JS execution
│   ├── tool-definitions.js MCP tool schemas
│   └── api-docs.js         API reference text
└── plugin/
    ├── manifest.json       Figma plugin manifest
    ├── code.js             Plugin main — operation handlers
    └── ui.html             Plugin UI — HTTP polling + status

Security

Layer	Protection
VM sandbox	`vm.runInContext()` — blocks `require`, `process`, `fs`, `fetch`
Localhost only	Bridge binds `127.0.0.1:38451`, never exposed to network
Operation allowlist	Only 20 predefined operations accepted
Timeout	10s VM execution + 10s per plugin operation
Body size limit	500 KB max per request

Available Write Operations (`figma_write`)

Core CRUD

Operation	Description
`figma.create({ type, ... })`	Create FRAME / RECTANGLE / ELLIPSE / LINE / TEXT / SVG / IMAGE
`figma.modify({ id, ... })`	Update node properties (fill, size, text, layout, etc.)
`figma.delete({ id })`	Remove a node
`figma.query({ type?, name?, id? })`	Find nodes by type, name, or ID
`figma.append({ parentId, childId })`	Move node into parent

Page Management

Operation	Description
`figma.status()`	Current Figma context info
`figma.listPages()`	List all pages
`figma.setPage({ name })`	Switch active page
`figma.createPage({ name })`	Add a new page

Node Operations

Operation	Description
`figma.clone({ id, x?, y?, parentId? })`	Duplicate a node with optional repositioning
`figma.group({ nodeIds, name? })`	Group multiple nodes
`figma.ungroup({ id })`	Ungroup a GROUP/FRAME
`figma.flatten({ id })`	Flatten/merge vectors into single path
`figma.resize({ id, width, height })`	Resize any node
`figma.set_selection({ ids })`	Programmatically select nodes
`figma.set_viewport({ nodeId?, x?, y?, zoom? })`	Navigate viewport
`figma.batch({ operations })`	Execute up to 50 ops in one call (10-25x faster)

Components

Operation	Description
`figma.listComponents()`	List all components in document
`figma.instantiate({ componentId })`	Create component instance
`figma.createComponent({ nodeId, name? })`	Convert FRAME/GROUP → reusable Component

Design Tokens & Styles

Operation	Description
`figma.createVariableCollection({ name })`	Create variable collection ("Colors", "Spacing")
`figma.createVariable({ name, collectionId, value })`	Create COLOR/FLOAT/STRING/BOOLEAN variable
`figma.applyVariable({ nodeId, field, variableName })`	Bind variable to node fill/stroke/opacity
`figma.createPaintStyle({ name, color })`	Create reusable paint style
`figma.createTextStyle({ name, fontFamily, fontSize, ... })`	Create reusable text style
`figma.modifyVariable({ variableName, value })`	Change variable value — all bound nodes update instantly
`figma.setupDesignTokens({ colors, numbers })`	Bootstrap complete token system in one call (idempotent)
`figma.ensure_library()`	Create/get Design Library frame
`figma.get_library_tokens()`	Read library color + text tokens

Image & Icon Helpers (server-side)

Operation	Description
`figma.loadImage(url, opts)`	Download image → place on canvas
`figma.loadIcon(name, opts)`	Fetch SVG icon (auto fallback: Fluent → Bootstrap → Phosphor → Lucide)
`figma.loadIconIn(name, opts)`	Icon inside centered circle background

Available Read Operations (`figma_read`)

Operation	Description
`get_selection`	Full design tree of selected node(s) + design tokens
`get_design`	Full node tree for a frame/page (depth param: default 10, or "full")
`get_page_nodes`	Top-level frames on the current page
`screenshot`	Export node as PNG — displays inline in Claude Code
`export_svg`	Export node as SVG markup
`export_image`	Export node as base64 PNG/JPG — for saving to disk (`format`, `scale` params)
`get_node_detail`	CSS-like properties for single node (no tree traversal)
`get_styles`	All local paint, text, effect, grid styles
`get_local_components`	Component listing with descriptions + variant properties
`get_viewport`	Current viewport position, zoom, bounds
`get_variables`	Local variables (Design Tokens) — collections, modes, values

Star History

If figma-ui-mcp helps you, please give it a star — it helps others discover the project!

License

MIT © TranHoaiHung — free to use, modify, and distribute. See LICENSE for details.

Figma UI MCP

Двунаправленный мост между AI-ассистентами (Claude и другими MCP-клиентами) и Figma. Позволяет рисовать интерфейсы прямо в Figma по текстовому описанию, а также читать существующие дизайны в виде структурированных данных или кода (Tailwind, CSS и т.д.).

Важно: требуется Figma Desktop — плагин общается с MCP-сервером через HTTP-опрос по localhost. Веб-версия Figma не поддерживает локальные сетевые запросы.

Как это работает

MCP-сервер запускает HTTP-сервер на порту localhost:38451. Плагин Figma (внутри Figma Desktop) каждые 500 мс опрашивает этот сервер, забирает операции и отправляет результаты. Весь трафик остаётся на вашей машине — данные не уходят на внешние серверы.

Такая архитектура необходима, потому что плагины Figma работают в песочнице iframe и не могут использовать stdio или WebSocket для связи с локальным процессом. HTTP-опрос — единственный поддерживаемый способ.

Возможности

Направление	Инструмент	Что делает
Запись	`figma_write`	Создаёт фреймы, фигуры, текст на любой странице через JS-код
Чтение	`figma_read`	Извлекает дерево узлов, цвета, типографику, скриншоты
Инфо	`figma_status`	Проверяет статус подключения плагина
Документация	`figma_docs`	Полная справка по API + примеры

Быстрый старт

Шаг 1 — Добавьте MCP-сервер в ваш AI-клиент

Claude Code (CLI)

# Для текущего проекта
claude mcp add figma-ui-mcp -- npx figma-ui-mcp

# Для всех проектов
claude mcp add --scope user figma-ui-mcp -- npx figma-ui-mcp

Claude Desktop

Отредактируйте файл конфигурации:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

Добавьте:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

Cursor — отредактируйте .cursor/mcp.json (для проекта) или ~/.cursor/mcp.json (глобально):

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

VS Code / GitHub Copilot — отредактируйте .vscode/mcp.json (для проекта) или добавьте в settings.json (глобально):

{
  "mcp": {
    "servers": {
      "figma": {
        "command": "npx",
        "args": ["-y", "figma-ui-mcp"]
      }
    }
  }
}

Windsurf — отредактируйте ~/.codeium/windsurf/mcp_config.json.

Antigravity (Google) — в панели агента нажмите «...» → «Manage MCP Servers» → «View raw config» и добавьте тот же JSON.

Из исходников (для любого клиента)

git clone https://github.com/TranHoaiHung/figma-ui-mcp
cd figma-ui-mcp
npm install
# Затем укажите путь: node /путь/к/figma-ui-mcp/server/index.js

Шаг 2 — Запустите плагин Figma

Откройте Figma Desktop
Перейдите в Plugins → Development → Import plugin from manifest...
Выберите файл plugin/manifest.json из репозитория
Запустите Plugins → Development → Figma UI MCP Bridge
В интерфейсе плагина появится зелёная точка, если соединение с MCP-сервером установлено

Шаг 3 — Начните проектировать с AI

После настройки инструменты MCP будут доступны в вашем AI-клиенте:

figma_status — проверка соединения
figma_write — создание/изменение UI
figma_read — извлечение данных дизайна
figma_docs — справка по API

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

Нарисовать экран

Попросите Claude: «Нарисуй тёмную панель администратора с боковым меню, шапкой и 4 карточками KPI». Claude вызовет figma_write с примерно таким кодом:

await figma.createPage({ name: "Dashboard" });
await figma.setPage({ name: "Dashboard" });

const root = await figma.create({
  type: "FRAME", name: "Dashboard",
  x: 0, y: 0, width: 1440, height: 900,
  fill: "#0f172a",
});

const sidebar = await figma.create({
  type: "FRAME", name: "Sidebar",
  parentId: root.id,
  x: 0, y: 0, width: 240, height: 900,
  fill: "#1e293b", stroke: "#334155", strokeWeight: 1,
});

await figma.create({
  type: "TEXT", name: "App Name",
  parentId: sidebar.id,
  x: 20, y: 24, content: "My App",
  fontSize: 16, fontWeight: "SemiBold", fill: "#f8fafc",
});
// ... продолжайте

Прочитать дизайн

Попросите: «Прочитай мой выбранный фрейм и преобразуй его в Tailwind CSS». Claude вызовет figma_read с операцией "get_selection", получит полное дерево узлов и сгенерирует код.

Сделать скриншот фрейма

figma_read → operation: "screenshot" → nodeId: "123:456" вернёт base64 PNG, который Claude может проанализировать и описать.

Архитектура

figma-ui-mcp/
├── server/
│   ├── index.js          — MCP-сервер (stdio транспорт)
│   ├── bridge-server.js  — HTTP-мост на localhost:38451
│   ├── code-executor.js  — VM-песочница для безопасного выполнения JS
│   ├── tool-definitions.js — схемы инструментов MCP
│   └── api-docs.js       — текст справочника API
└── plugin/
    ├── manifest.json     — манифест плагина Figma
    ├── code.js           — основной код плагина (обработчики операций)
    └── ui.html           — UI плагина (HTTP-опрос + статус)

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

Уровень	Защита
VM-песочница	`vm.runInContext()` — блокирует `require`, `process`, `fs`, `fetch`
Только localhost	Мост привязан к `127.0.0.1:38451`, не выставляется в сеть
Белый список операций	Только 20 предопределённых операций
Таймаут	10 с на выполнение в VM + 10 с на операцию плагина
Лимит тела запроса	Максимум 500 КБ

Доступные операции

Запись (figma_write)

Основные CRUD

figma.create({ type, ... }) — создание FRAME, RECTANGLE, ELLIPSE, LINE, TEXT, SVG, IMAGE
figma.modify({ id, ... }) — обновление свойств узла (заливка, размер, текст, layout и т.д.)
figma.delete({ id }) — удаление узла
figma.query({ type?, name?, id? }) — поиск узлов по типу, имени или ID
figma.append({ parentId, childId }) — перемещение узла внутрь родителя

Управление страницами

figma.listPages() — список всех страниц
figma.setPage({ name }) — переключение активной страницы
figma.createPage({ name }) — создание новой страницы

Операции с узлами

figma.clone({ id, x?, y?, parentId? }) — дублирование узла с опциональным перемещением
figma.group({ nodeIds, name? }) — группировка узлов
figma.ungroup({ id }) — разгруппировка
figma.flatten({ id }) — сведение векторов в один контур
figma.resize({ id, width, height }) — изменение размера
figma.set_selection({ ids }) — программный выбор узлов
figma.set_viewport({ nodeId?, x?, y?, zoom? }) — навигация по области просмотра
figma.batch({ operations }) — пакетное выполнение до 50 операций (в 10–25 раз быстрее)

Компоненты

figma.listComponents() — список всех компонентов в документе
figma.instantiate({ componentId }) — создание экземпляра компонента
figma.createComponent({ nodeId, name? }) — преобразование FRAME/GROUP в переиспользуемый компонент

Дизайн-токены и стили

figma.createVariableCollection({ name }) — создание коллекции переменных (например, «Colors», «Spacing»)
figma.createVariable({ name, collectionId, value }) — создание переменной COLOR/FLOAT/STRING/BOOLEAN
figma.applyVariable({ nodeId, field, variableName }) — привязка переменной к заливке/обводке/прозрачности
figma.createPaintStyle({ name, color }) — создание переиспользуемого стиля заливки
figma.createTextStyle({ name, fontFamily, fontSize, ... }) — создание переиспользуемого текстового стиля
figma.modifyVariable({ variableName, value }) — изменение значения переменной (все связанные узлы обновляются мгновенно)
figma.setupDesignTokens({ colors, numbers }) — инициализация полной системы токенов за один вызов (идемпотентно)
figma.ensure_library() — создание/получение фрейма библиотеки
figma.get_library_tokens() — чтение токенов цветов и текста из библиотеки

Изображения и иконки (на стороне сервера)

figma.loadImage(url, opts) — загрузка изображения по URL и размещение на холсте
figma.loadIcon(name, opts) — получение SVG-иконки (автоматический fallback: Fluent → Bootstrap → Phosphor → Lucide)
figma.loadIconIn(name, opts) — иконка внутри круга с фоном

Чтение (figma_read)

Операция	Описание
`get_selection`	Полное дерево дизайна выбранных узлов + дизайн-токены
`get_design`	Дерево узлов для фрейма/страницы (глубина по умолчанию 10)
`get_page_nodes`	Топ-уровневые фреймы на текущей странице
`screenshot`	Экспорт узла как PNG (отображается inline в Claude Code)
`export_svg`	Экспорт узла как SVG
`export_image`	Экспорт узла как base64 PNG/JPG (параметры: `format`, `scale`)
`get_node_detail`	CSS-подобные свойства для одного узла (без обхода дерева)
`get_styles`	Все локальные стили заливки, текста, эффектов, сеток
`get_local_components`	Список компонентов с описаниями и вариантами свойств
`get_viewport`	Текущая позиция, зум, границы области просмотра
`get_variables`	Локальные переменные (дизайн-токены) — коллекции, режимы, значения

Лицензия

Источник: https://mcpmarket.com/server/figma-ui