Claude Desktop에서 Figma MCP 연결하기: 삽질 끝에 찾은 완벽 가이드

늦게 시작해도 괜찮다. 중요한 건 다리를 놓는 거다.

들어가며

“클로드야, 이 피그마 파일 좀 봐줘”

이 한마디가 되려면 생각보다 많은 다리가 필요하다. 나는 이틀 동안 삽질했다. 이 글은 그 삽질의 기록이자, 같은 문제로 고생할 누군가를 위한 지도다.

우리가 만들 것

[Claude Desktop] ←→ [Figma MCP] ←→ [Figma 데스크톱 앱]
                          ↓
              디자인 읽기 (Read-only)

[Claude Desktop] ←→ [cursor-talk-to-figma] ←→ [Figma 데스크톱 앱]
                          ↓
              디자인 생성/수정 (Read-Write)

Figma MCP: 피그마 디자인을 “읽어서” 코드로 변환할 때 사용
cursor-talk-to-figma: 피그마에 직접 “그릴” 때 사용

둘 다 필요하다. 하나씩 설치해보자.

Part 1: Figma MCP 설정 (디자인 읽기용)

1-1. 왜 기본 설정이 안 되는가?

Claude Desktop 앱 설정에서 Figma MCP를 추가하면 이런 에러가 난다:

npm error 404 Not Found - GET https://registry.npmjs.org/@anthropic%2fmcp-figma
npm error 404 '@anthropic/mcp-figma@*' is not in this registry.

원인: Claude Desktop이 기본으로 사용하는 @anthropic/mcp-figma 패키지가 npm에 존재하지 않는다. 배포가 안 됐거나, 내부용이거나.

해결: Figma 공식 Dev Mode MCP 서버를 사용한다.

1-2. Figma 데스크톱 앱에서 MCP 서버 활성화

Figma 데스크톱 앱 설치 및 실행 (웹 버전 아님!)
아무 Design 파일 열기
키보드 Shift + D 또는 하단 툴바에서 Dev Mode 전환
오른쪽 Inspect 패널에서 “Enable desktop MCP server” 클릭

처음이라면 온보딩 화면이 뜬다:

01: Platform 선택 → CSS, px 선택
02: Theme 선택 → 아무거나
03: Enable the MCP server ← 핵심!
04~05: 스킵해도 됨

완료되면 MCP 서버가 http://127.0.0.1:3845/mcp에서 실행된다.

1-3. 서버 작동 확인

터미널에서:

curl http://127.0.0.1:3845/mcp

이렇게 나오면 성공:

{"jsonrpc":"2.0","error":{"code":-32001,"message":"Invalid sessionId"},"id":null}

“Invalid sessionId”는 정상이다. curl로 직접 접속해서 그런 것.

1-4. Claude Desktop 설정

문제: Claude Desktop은 HTTP URL을 직접 연결 못한다.
해결: mcp-remote로 브릿지한다.

cat > ~/Library/"Application Support"/Claude/claude_desktop_config.json << 'EOF'
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "http://127.0.0.1:3845/mcp"]
    }
  }
}
EOF

Claude Desktop 재시작:

pkill -9 Claude

1-5. 연결 확인

Claude Desktop → 설정 → 개발자 → figma가 running 상태면 성공!

Part 2: cursor-talk-to-figma 설정 (디자인 생성용)

Figma MCP는 “읽기 전용”이다. Claude에게 “상세페이지 만들어줘”라고 하면 Figma에 직접 그려주는 건 cursor-talk-to-figma가 필요하다.

2-1. 프로젝트 클론

cd ~
git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp
cd cursor-talk-to-figma-mcp

2-2. Bun 설치

curl -fsSL https://bun.sh/install | bash
source ~/.zshrc

2-3. 프로젝트 세팅

bun setup

2-4. 서버 실행 (터미널 2개 필요)

터미널 1: WebSocket 서버

cd ~/cursor-talk-to-figma-mcp
bun socket

WebSocket server running on port 3055 나오면 성공.

터미널 2: MCP 서버

cd ~/cursor-talk-to-figma-mcp
bunx cursor-talk-to-figma-mcp

FigmaMCP server running on stdio 나오면 성공.

2-5. Figma 플러그인 설치

주의: 이 플러그인은 커뮤니티에 없다. 로컬에서 직접 설치해야 한다.

Figma 데스크톱 앱 열기
Plugins → Development → Import plugin from manifest…
파일 선택: ~/cursor-talk-to-figma-mcp/src/cursor_mcp_plugin/manifest.json

트러블슈팅: “editorType does not include dev” 에러

manifest.json 파일을 수정해야 한다:

cat > ~/cursor-talk-to-figma-mcp/src/cursor_mcp_plugin/manifest.json << 'EOF'
{
  "name": "Cursor MCP Plugin",
  "id": "cursor-mcp-plugin",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": [
    "figma",
    "figjam",
    "dev"
  ],
  "permissions": [],
  "networkAccess": {
    "allowedDomains": [
      "https://google.com"
    ],
    "devAllowedDomains": [
      "http://localhost:3055",
      "ws://localhost:3055"
    ]
  },
  "documentAccess": "dynamic-page",
  "enableProposedApi": true,
  "enablePrivatePluginApi": true
}
EOF

"dev"를 editorType 배열에 추가하는 게 핵심!

2-6. 플러그인 실행

중요: Design Mode에서 실행해야 한다! (Dev Mode 아님)

Shift + D로 Design Mode 전환
Plugins → Development → Cursor MCP Plugin
팝업 창에서 채널 코드 확인 (예: s7q3b9m0)

2-7. Claude Desktop 설정 업데이트

cat > ~/Library/"Application Support"/Claude/claude_desktop_config.json << 'EOF'
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "http://127.0.0.1:3845/mcp"]
    },
    "talk-to-figma": {
      "command": "/Users/본인아이디/.bun/bin/bunx",
      "args": ["cursor-talk-to-figma-mcp"]
    }
  }
}
EOF

주의: /Users/본인아이디/ 부분을 자신의 사용자명으로 바꿔야 한다!

확인 방법:

echo 
# 출력: /Users/cezips → 이 경우 /Users/cezips/.bun/bin/bunx

Claude Desktop 재시작:

pkill -9 Claude

2-8. 연결 확인

Claude Desktop → 설정 → 개발자:

figma: running ✅
talk-to-figma: running ✅

Part 3: 실제 사용법

3-1. 채널 연결

Claude에게:

talk-to-figma 채널 [채널코드] 연결해줘

예: talk-to-figma 채널 s7q3b9m0 연결해줘

3-2. 디자인 생성

새 프레임 하나 만들어줘. 가로 400, 세로 600

Figma에 400×600 프레임이 생성된다!

3-3. 더 복잡한 요청

모바일 상세페이지 레이아웃 만들어줘.
- 상단에 히어로 이미지 영역 (가로 꽉 차게, 높이 300)
- 그 아래 제품명 텍스트
- 가격 텍스트
- 구매 버튼

트러블슈팅 모음

Q: “Could not attach to MCP server talk-to-figma” 에러

원인: bunx 경로를 못 찾음
해결: 전체 경로로 지정

"command": "/Users/본인아이디/.bun/bin/bunx"

Q: “Request to Figma timed out” 에러

원인: Figma 플러그인이 닫혔거나 채널이 바뀜
해결:

Figma에서 플러그인 다시 실행
새 채널 코드로 다시 연결

Q: 플러그인 실행해도 아무것도 안 뜸

원인: Dev Mode에서 실행함
해결: Shift + D로 Design Mode 전환 후 다시 실행

Q: “npm error 404 @anthropic/mcp-figma” 에러

원인: Claude Desktop 기본 Figma MCP 패키지가 npm에 없음
해결: Part 1의 방법대로 Figma 공식 MCP + mcp-remote 사용

매번 해야 하는 것들

서버들은 터미널 닫으면 꺼진다. 작업 전에 항상:

Figma 데스크톱 앱 켜기 (MCP 서버가 여기서 돈다)
터미널 1: cd ~/cursor-talk-to-figma-mcp && bun socket
터미널 2: cd ~/cursor-talk-to-figma-mcp && bunx cursor-talk-to-figma-mcp
Figma에서 Cursor MCP Plugin 실행 → 채널 코드 확인
Claude Desktop에서 채널 연결

귀찮으면 쉘 스크립트로 자동화할 수 있다:

#!/bin/bash
# ~/start-figma-mcp.sh

# WebSocket 서버 (백그라운드)
cd ~/cursor-talk-to-figma-mcp && bun socket &

# 잠시 대기
sleep 2

# MCP 서버
cd ~/cursor-talk-to-figma-mcp && bunx cursor-talk-to-figma-mcp

마치며

솔직히 말하면, 이 설정은 아직 “판자 다리” 수준이다. 언젠가 Anthropic이나 Figma가 제대로 된 다리를 놓아줄 거다.

하지만 지금 당장 필요한 사람들에게, 이 판자 다리가 도움이 되길 바란다.

늦게 시작해도 괜찮다.
중요한 건 다리를 놓는 거다.
그리고 그 다리를 건너는 거다.

— 늦깎이연구소

참고 자료

이 글은 2026년 1월, macOS + Claude Desktop 환경에서 작성되었습니다.
환경이 다르면 세부 사항이 다를 수 있습니다.