TF

tranhoaihung/figma-ui-mcp

Developer tools

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기

266 stars 52 forks 품질 87 트렌드 39MIT

tranhoaihung/figma-ui-mcp는 [[T0]에서 가져온 MCP 서버 후보입니다.

개요

tranhoaihung/figma-ui-mcp는 [[T0]에서 가져온 MCP 서버 후보입니다.

개요(AI 번역)

Claude 코드에서 Figma로 · Antigravity → Figma · 커서 → Figma → 모든 MCP IDE에서 Figma로 →

✅ 테스트: Claude 코드, Antigravity  |  🔧 호환: 커서, VS 코드, Windsurf, Zed (모든 MCP 표준 클라이언트)

양방향 Figma MCP 브리지 — AI 어시스턴트(Claude Code, Cursor, Windsurf, Antigravity, VS Code Copilot 또는 모든 MCP 호환 IDE)가 Figma 캔버스에 직접 UI를 그리고 **기존 디자인을 구조화된 데이터, 스크린샷, 코드 준비 토큰으로 다시 읽을 수 있습니다. Figma API 키가 필요 없으며 — 전적으로 localhost를 통해 작동합니다.

Figma Desktop이 필요 — 이 플러그인은 localhost HTTP 폴링을 통해 MCP 서버와 통신합니다. Figma의 웹 앱은 localhost 네트워크 접근을 허용하지 않으므로, Figma Desktop이 필수입니다.

localhost 브리지 작동 방식

MCP 서버는 localhost:38451에 바인딩된 작은 HTTP 서버를 시작합니다. Figma 플러그인(Figma Desktop 내에서 실행됨)은 긴 폴링을 사용합니다 — 서버는 작업이 도착할 때까지 최대 8초까지 요청을 보류하며, 새로운 작업이 대기열에 들어오면 즉시 플러싱합니다(거의 실시간 지연 시간 Claude 코드 (CLI)

Claude Desktop

설정 파일 수정:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요.

README

원문 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

How the localhost bridge works

The MCP server starts a small HTTP server bound to localhost:38451. The Figma plugin (running inside Figma Desktop) uses long polling — the server holds requests up to 8s until work arrives, flushing immediately when new ops are queued (near-realtime latency <100ms). All traffic stays on your machine — nothing is sent to any external server.

Multi-instance support (v2.3.0+): Multiple Figma files/tabs can connect simultaneously. Each plugin instance sends a sessionId, and the bridge routes operations to the correct session. Use the optional sessionId param in figma_write/figma_read to target a specific file.


Features

Direction Tool What it does
Write figma_write Draw frames, shapes, text, prototypes via JS code
Read figma_read Extract node trees, colors, typography, screenshots
GitHub에서 전체 README 보기

설치

npx -y figma-ui-mcp
MCP 초보자라면? mcpskill.org 가이드부터 시작하세요 →

설정

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