figma-mcp

Rust로 작성된 고성능 양방향 Model Context Protocol (MCP) 서버로, AI 코딩 어시스턴트를 Figma Desktop에 직접 연결합니다.

AI 에이전트(Claude Code, Cursor, Windsurf, Antigravity, VS Code, Zed)가 Figma 캔버스에 UI를 직접 그리고 기존 디자인을 구조화된 JSON 트리, 디자인 토큰, CSS, 스크린샷으로 다시 읽어올 수 있게 해줍니다 — 외부 API 키가 전혀 필요 없습니다.

⚡ 주요 특징

• 순수 Rust 네이티브 성능: < 1ms로 시작, ~3MB RAM 사용, GC 일시 중지 없음.

• 양방향 브리지: AI가 UI를 작성(벡터, 컴포넌트, 프레임, 오토레이아웃 그리기)하고 디자인을 읽을 수 있음(계층 구조 추출, 스타일 계산, 캔버스 캡처).

• 샌드박스 JS 런타임: Boa(순수 Rust ECMAScript 엔진) 기반으로 디자인 스크립트를 안전하게 실행.

• 내장 에셋 CDN: 7개 아이콘 라이브러리(Ionicons, Lucide, Tabler, Bootstrap, Fluent, Phosphor)에서 SVG 아이콘을 자동으로 가져와 정규화.

• 멀티 탭 / 멀티 세션 지원: 여러 개의 열린 Figma 파일에 동시에 원활하게 연결.

• 100% 로컬호스트 프라이버시: 모든 통신은 HTTP long-polling을 통해 127.0.0.1:38451에서만 엄격하게 유지.

Related MCP server: Figma Dash MCP Server

🏛️ 아키텍처

┌─────────────────────────────────────────────────────────┐
│               Terminal (Standalone Server)              │
│                       figma-mcp                         │
│  • MCP SSE Transport (/sse, /message)                   │
│  • Sandboxed JS Runtime (Boa)                           │
│  • Built-in Asset & Icon Resolver                       │
│  • Async WebSocket & HTTP Long-Polling Bridge (Axum)    │
└───────────────▲─────────────────────────▲───────────────┘
                │ (ws://127.0.0.1:38451)  │ (http://127.0.0.1:38451/sse)
                │                         │
      ┌─────────┴─────────┐     ┌─────────┴─────────┐
      │   Figma Desktop   │     │ AI Assistant(s)   │
      │ (Plugin Bridge)   │     │ Antigravity/Cursor│
      └───────────────────┘     │ Claude Code / Zed │
                                └───────────────────┘

🚀 빠른 시작

1. NPX로 한 줄 실행 (Rust 툴체인 불필요)

figma-mcp는 설정 없이 Mac, Linux, Windows 어디서든 실행할 수 있습니다:

npx figma-mcp

이 명령은 사용자 아키텍처에 맞는 사전 빌드된 네이티브 바이너리를 자동으로 다운로드하고 서버를 시작합니다.

또는 Cursor / Claude Desktop / Windsurf / Antigravity MCP 설정에서 구성하는 경우:

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

2. 또는 소스에서 빌드 (Rust)

전제 조건: Rust 툴체인 (cargo >= 1.80).

git clone https://github.com/BuiHung1612/figma-mcp.git
cd figma-mcp
cargo build --release
./target/release/figma-mcp

3. Figma 플러그인 설치

1. Figma Desktop을 엽니다.

2. Plugins → Development → **Import plugin from manifest...**로 이동합니다.

3. 이 저장소의 plugin/manifest.json 파일을 선택합니다.

4. 플러그인을 실행합니다 (Plugins → Development → Figma MCP Bridge).

5. 플러그인 UI에 녹색 점(Connected)이 표시됩니다.

4. MCP 클라이언트 구성

Google Antigravity (SSE 전송 - 권장)

~/.gemini/config/mcp_config.json 또는 프로젝트 .agents/mcp_config.json에 추가:

{
  "mcpServers": {
    "figma-mcp": {
      "serverUrl": "http://127.0.0.1:38451/sse"
    }
  }
}

Claude Code / Cursor / Windsurf / VS Code

SSE 또는 stdio로 연결할 수 있습니다:

옵션 A: SSE 전송 (권장)

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://127.0.0.1:38451/sse"
    }
  }
}

옵션 B: Stdio 하위 프로세스 (NPX 사용)

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

🛠️ MCP 도구 참조

figma-mcp는 7개의 일급 MCP 도구를 제공합니다:

figma_get_selection

Figma 캔버스에서 현재 선택된 레이어/프레임을 초고속, 토큰 압축 방식으로 검사합니다. 레이아웃 및 타이포그래피 계층 구조를 60-80% 적은 토큰으로 반환합니다.

figma_inspect_node

ID 또는 이름으로 특정 노드를 검사하여 전체 디자인 컨텍스트, CSS, 오토레이아웃 규칙, 타이포그래피를 반환합니다.

figma_export_asset

모든 Figma 노드/레이어를 PNG, JPG 또는 SVG로 직접 내보냅니다.

• outputPath: 지정된 경우(예: src/assets/logo.png) 디스크에 직접 저장하고 큰 base64 문자열로 컨텍스트 창을 채우는 대신 최소한의 JSON 메타데이터를 반환합니다!

figma_status

실시간 브리지 연결 상태, 연결된 Figma 탭, 활성 파일 이름, 지연 시간 통계를 확인합니다.

figma_write

샌드박스 VM 내에서 JavaScript 그리기 명령을 실행하여 Figma 캔버스에 디자인을 만들거나 수정합니다.

• 오토레이아웃(layoutMode, itemSpacing, padding), 타이포그래피, 채우기, 획, 모서리 반경, 드롭 섀도우, 컴포넌트 생성을 지원합니다.

• 아이콘 로딩 지원: figma.loadIcon("ionicons", "heart", { size: 24, fill: "#ff4757" }).

• 이미지 삽입 지원: figma.loadImage(url, { width: 300, height: 200 }).

figma_read

고급 쿼리를 위한 범용 리더: get_design, scan_design, screenshot, export_svg, get_variables, get_styles, search_nodes. 파일 내보내기를 위한 outputPath를 지원합니다.

figma_docs

figma_write에 대한 내장 문서, 디자인 규칙, 레이아웃 가이드라인, 코드 예제를 가져옵니다.

• section: "all" | "rules" | "layout" | "api" | "tokens" | "icons"

figma_rules

현재 Figma 문서를 감사하고 AI 생성을 안내하는 일관성 규칙과 토큰 정의를 생성합니다.

💻 개발 및 테스트

# Run server directly in debug mode
cargo run

# Build release binary
cargo build --release

# Run automated MCP test suite
./scripts/test-rust-mcp.sh

# Rebuild Figma plugin bundle (if plugin-src/ is modified)
node scripts/build-plugin.js

📄 라이선스

MIT © BuiHung1612 — 자유롭게 사용, 수정, 배포할 수 있습니다. 자세한 내용은 LICENSE를 참조하세요.