Claude Figma MCP 연결

 

이 문서는 Claude Desktop과 Figma를 WebSocket을 통해 연결하는 "claude-talk-to-figma-mcp" 프로젝트의 설치 및 실행 과정을 요약한 안내서입니다.

📦 프로젝트 개요

• GitHub 저장소: arinspunk/claude-talk-to-figma-mcp
• 기능: Claude와 Figma를 연결하여 Claude가 Figma 내 객체 생성, 수정, 정보 요청 등을 수행할 수 있게 함
• 구성: MCP 서버 + Figma 플러그인 + Claude Desktop 설정

---

🛠 설치 및 설정 과정

1. 프로젝트 클론 및 의존성 설치

git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git
cd claude-talk-to-figma-mcp
bun install

2. 프로젝트 빌드 및 Claude 설정

bun run build
bun run configure-claude

• Claude 설정 파일 경로:
  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• 백업 자동 생성 후 MCP 설정이 추가됨 (ClaudeTalkToFigma 등록)

3. WebSocket 서버 실행

bun socket

• 성공 시 출력 예시:

ClaudeTalkToFigma MCP WebSocket server listening on port 3055
Waiting for Figma to connect...

4. Figma 플러그인 설치

1. Figma 실행
2. 메뉴 → Plugins → Development → Import plugin from manifest
3. 다음 경로 선택:

src/claude_mcp_plugin/manifest.json

---

🔄 연결 순서 요약

단계 명령 또는 작업 설명

1	bun run configure-claude	Claude Desktop에 MCP 등록
2	bun socket	WebSocket 서버 실행 (포트 3055)
3	Figma에서 plugin import	manifest.json 선택
4	Claude Desktop 실행	MCP에서 ClaudeTalkToFigma 선택
5	Figma 플러그인 실행 → Connect	생성된 channel-ID Claude에게 전달

Claude에게 다음과 같이 입력:

Talk to Figma, channel {channel-ID}

---

🧩 Troubleshooting 체크리스트

증상 원인 및 해결

Connection error	WebSocket 서버 미실행 → bun socket 필요
플러그인 목록에 없음	manifest.json 제대로 Import 되었는지 확인
Claude가 응답하지 않음	Claude Desktop에서 MCP 선택이 빠졌거나 서버 미연결
포트 충돌	포트 3055가 다른 앱에 의해 사용 중인지 확인

---

🔚 참고 사항

• WebSocket 포트는 기본 3055번 사용
• Claude Desktop 재시작 필수 (설정 반영을 위해)
• Claude와 Figma 간 명령은 Prompt로 제어

예시 Prompt:

Talk to Figma, channel 9da3d74d-e7f3-40bd-917f-41a71c67f81c
Create a rectangle at position (100, 100) with width 200 and height 100.