AI

[Claude] Figma MCP 연동하기 (windows11)

개발자 쿠키 2026. 3. 20. 10:18

Claude Desktop과 Figma Desktop을 MCP로 연결하면, 대화만으로 Figma 디자인을 자동으로 수정할 수 있습니다. 아래는 claude-talk-to-figma-mcp 설치부터 연결, 트러블슈팅까지의 전체 과정입니다.

사전 준비

1단계: 프로젝트 클론

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

2단계: Bun 설치 + 빌드 + 소켓 실행

npm으로 bun을 글로벌 설치

npm install -g bun

그 다음 의존성 설치하고 빌드

bun install
bun run build

빌드가 끝나면 소켓 서버를 실행

bun run socket

터미널에 WebSocket server started on port 3055 같은 메시지가 뜨면 성공이다. 이 터미널은 끄면 안 된다.

3단계: Figma Desktop에서 플러그인 등록

  1. Figma Desktop 열고 아무 파일 하나 열기 (파일 안에 들어가야 플러그인 메뉴가 보임)
  2. 좌측 상단 Figma 로고(≡) 클릭
  3. Plugins → Development → Import plugin from manifest...
  4. 아까 클론한 폴더에서 이 파일을 선택:
C:\Users\{유저이름}\claude-talk-to-figma-mcp\src\claude_mcp_plugin\manifest.json

이러면 플러그인이 등록된다.

4단계: Claude Desktop 설정

  1. Claude Desktop 앱 열기
  2. 좌측 하단 설정(⚙️) → 개발자(Developer) → 구성 편집(Edit Config) 클릭
  3. claude_desktop_config.json 파일이 열림
{
  "preferences": {
    "coworkWebSearchEnabled": true,
    "ccdScheduledTasksEnabled": true,
    "coworkScheduledTasksEnabled": true,
    "sidebarMode": "task"
  }
}

아래처럼 mcpServers를 추가한다

{
  "preferences": {
    "coworkWebSearchEnabled": true,
    "ccdScheduledTasksEnabled": true,
    "coworkScheduledTasksEnabled": true,
    "sidebarMode": "task"
  },
  "mcpServers": {
    "ClaudeTalkToFigma": {
      "command": "npx",
      "args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]
    }
  }
}

저장하고 Claude Desktop을 완전히 종료한 뒤 다시 실행한다.

5단계: 연결

  1. Figma에서 파일 하나 열기
  2. Plugins → Development → Claude Talk to Figma 클릭 → Run
  3. 플러그인 창에 채널 ID가 뜬다
  4. Claude Desktop에서 새 대화를 열고 입력:
Connect to Figma, channel 79ce9b3f

connected on port 3055가 뜨면 연결 성공이다.

6단계: 테스트

이제 Claude Desktop에서 Copy the channel ID를 입력하면 연결됩니다. 그리고 원하는 것들을 말하면 자동으로 변경해줍니다!

아쉬운건 속도가 아직은 많이 느립니다. 그러나 매우 만족합니다:)

트러블슈팅

bun: command not found

→ npm install -g bun으로 설치

Module not found "dist/socket.js"

→ bun run build를 먼저 해야 함. 빌드 안 하면 dist 폴더가 없다.

npm run socket 했는데 bun은 내부 또는 외부 명령이 아닙니다

→ 이 프로젝트의 package.json 스크립트가 bun으로 되어있어서 bun 설치가 필수다.

Figma에서 Plugins → Development 메뉴가 안 보임

→ 파일을 안 열고 홈 화면에 있으면 안 보인다. 파일 하나 열고 들어가야 함.

Claude Desktop에서 MCP가 안 잡힘

→ 설정 파일 저장 후 Claude Desktop을 완전히 종료했다가 다시 실행해야 한다. 그냥 닫기만 하면 안 됨.

정리

설치 순서를 한 줄로 요약하면

  1. git clone → bun install → bun run build → bun run socket (터미널 유지)
  2. Figma Desktop에서 플러그인 등록 (manifest.json import)
  3. Claude Desktop 설정 파일에 mcpServers 추가 → 재시작
  4. Figma 플러그인 Run → 채널 ID 복사 → Claude Desktop에서 연결

참고