claude-talk-to-figma-mcp MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

Works with free Figma accounts (no Dev Mode license)
Read: document info, selection, style audits, component scans
Write: create/modify shapes, text, frames, colors, auto-layout
Channel-ID pairing connects each Claude session to one Figma file

라이브 데모

실제 사용 모습

claude-talk-to-figma.replay ▶ 준비됨

0/0

설치

클라이언트 선택

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

{
  "mcpServers": {
    "claude-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "claude-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "claude-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "claude-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "claude-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "claude-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "claude-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "claude-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "claude-talk-to-figma",
      "command": "npx",
      "args": [
        "-y",
        "claude-talk-to-figma-mcp"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "claude-talk-to-figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "claude-talk-to-figma-mcp"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add claude-talk-to-figma -- npx -y claude-talk-to-figma-mcp

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: claude-talk-to-figma-mcp

Audit a Figma file for off-system colors and styles

👤 Design system maintainers ⏱ ~20 min intermediate

언제 쓸까: The team's file has drifted from the design tokens and you want to find the strays.

사전 조건

Figma plugin imported via manifest — Figma → Plugins → Development → Import from manifest
Running bun run socket — From the repo; opens the WebSocket

흐름

Connect

Connect to Figma, channel abc123 (copy from the plugin UI).✓ 복사됨

→ Connected; document name shown
Scan for off-system fills

Scan all nodes for fill colors that aren't in our 12 brand tokens. List node paths.✓ 복사됨

→ List of drift instances
Report

Group by nearest frame and summarize. Suggest which token each stray should be.✓ 복사됨

→ Actionable cleanup list

결과: A file you can hand to a designer with concrete fixes.

함정

Channel ID rotates if you restart the plugin — Always copy fresh from the plugin panel; stale IDs silently time out

Turn a written spec into a rough Figma frame

👤 PMs, non-designers ⏱ ~15 min beginner

언제 쓸까: You want a quick wireframe without opening Figma yourself.

흐름

Describe the layout

Create a new frame 1440x900 in the current file. Add a header, a 3-column feature grid, and a footer. Use our brand colors.✓ 복사됨

→ Frame appears in Figma with the structure
Iterate

Make the feature cards use our 'Card' component. Swap the header to variant 'primary'.✓ 복사됨

→ Frame updated in real time

결과: A rough wireframe without touching the Figma UI.

Run an accessibility color-contrast check on a Figma file

👤 Designers, accessibility advocates ⏱ ~25 min intermediate

언제 쓸까: Before handoff, you want to flag contrast failures.

흐름

Walk text nodes with their backgrounds

For every text node, compute WCAG contrast against the nearest background fill. Flag anything below 4.5:1 for body or 3:1 for large.✓ 복사됨

→ List of failing pairs with ratios
Suggest adjustments

For each failure, suggest the minimum token swap to pass.✓ 복사됨

→ Fix suggestions

결과: An accessibility report before QA catches it later.

조합

다른 MCP와 조합해 10배 효율

claude-talk-to-figma + meigen-ai-design

Generate an image, drop it into a Figma frame as a placeholder

Generate a hero image with MeiGen, then place it as a fill in the selected Figma frame.✓ 복사됨

claude-talk-to-figma + unreal

Figma HUD → Unreal UMG widget scaffold

Export the selected Figma HUD frame structure, then create a matching UMG Widget Blueprint in Unreal.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출
get_document_info		First step; confirm the right file
get_selection		Operate on what the user selected
scan_styles		Drift detection
create_shape	type, x, y, w, h, fill?	Build layouts
create_text	content, x, y, style?	Add labels/headings
set_fill	node_id, color	Fix strays
set_auto_layout	node_id, direction, padding, gap	Convert to responsive

비용 및 제한

운영 비용

API 쿼터: None — everything is local WebSocket
호출당 토큰: Document scans can be 5-30k tokens on big files
금액: Free
팁: Operate on get_selection whenever possible; full-doc scans burn tokens

보안

권한, 시크릿, 파급범위

자격 증명 저장: No API keys; the plugin uses your current Figma session

데이터 외부 송신: Local WebSocket only; Figma data only leaves if you share results

문제 해결

자주 발생하는 오류와 해결

Connection timeout / channel not found

Channel IDs rotate — copy fresh from the plugin panel and reconnect

Plugin missing from Figma menu

Re-import via Plugins → Development → Import from manifest; dev plugins don't persist across Figma restarts on some setups

Writes fail silently

Figma restricts plugin writes on some file types (libraries, community duplicates). Check for the lock icon

대안

claude-talk-to-figma-mcp 다른 것과 비교

대안	언제 쓰나	단점/장점
Framelink / Figma-Context MCP	You want read-only via Figma's API with a personal token	No write; needs API access
Figma Dev Mode MCP (official)	Your org pays for Dev Mode	Paid seats required

claude-talk-to-figma-mcp