TranHoaiHung

Figma UI MCP — Data skill for Claude Code

Data community

AI can draw UI directly on the Figma canvas via JavaScript, and read existing designs back as structured data.

How to install Figma UI MCP

This entry records only its repository, not the path inside it, so there is no exact command to give. Open TranHoaiHung/figma-ui-mcp and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Figma UI MCP does

AI can draw UI directly on the Figma canvas via JavaScript, and read existing designs back as structured data. Works with Claude Code, Cursor, VS Code, and Windsurf. No API KEY required.

Alternatives in Data

Private GPT — Complete API layer for private AI applications on local models: RAG, skills, tools, MCP, text-to-sql, and more 57.5k ★
n8n Code JavaScript — JavaScript in n8n Code nodes with data access patterns 3.6k ★
AI Data Extraction — extract all your personal data history from cursor, codex, claude-code, windsurf, and trae 1.3k ★

README

figma-ui-mcp

Claude Code to Figma · Antigravity to Figma · Cursor to Figma · Any MCP IDE to Figma

✅ Tested: Claude Code, Antigravity | 🔧 Compatible: Cursor, VS Code, Windsurf, Zed (any MCP stdio client)

**Bidirectional Figma MCP bridge** — let AI assistants (Claude Code, Cursor, Windsurf, Antigravity, VS Code Copilot, or any MCP-compatible IDE) **draw UI directly on Figma canvas** and **read existing designs back** as structured data, screenshots, or code-ready tokens. No Figma API key needed — works entirely over localhost.

**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