F_MCP - Claude Code x Figma MCP

Claude Code에서 Figma를 직접 제어할 수 있는 MCP(Model Context Protocol) 브릿지입니다.

원본 프로젝트: grab/cursor-talk-to-figma-mcp (MIT License) 이 저장소는 원본을 Claude Code 환경에 맞게 수정한 fork입니다.

구조

Claude Code ←MCP→ 서버 (server.ts) ←WebSocket→ Figma 플러그인 (code.js)

설치 방법

1. 사전 준비

• Bun 설치 필요
• Figma 데스크탑 앱 설치 필요
• Claude Code CLI 설치 필요

Windows:

powershell -c "irm bun.sh/install.ps1|iex"

Mac/Linux:

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

2. 저장소 클론 및 의존성 설치

git clone https://github.com/yerininin/F_MCP.git
cd F_MCP
bun install

3. WebSocket 서버 실행

bun socket

WebSocket 서버가 localhost:3055에서 실행됩니다. 이 터미널은 열어둔 채로 유지하세요.

4. Figma 플러그인 등록 (로컬 개발 모드)

1. Figma 데스크탑 앱 실행
2. 아무 파일 열기
3. 좌측 상단 메뉴 > Plugins > Development > Import plugin from manifest...
4. 클론한 폴더의 src/cursor_mcp_plugin/manifest.json 선택
5. 등록 완료

5. Figma 플러그인 실행 및 연결

1. Figma에서 Plugins > Development > Claude Code Figma MCP Plugin 실행
2. Connect 버튼 클릭
3. 연결 성공 시 채널명이 표시됨 (예: abc12345)
4. 이 채널명을 복사

6. Claude Code에 MCP 등록

claude mcp add TalkToFigma -- bun /클론한경로/src/talk_to_figma_mcp/server.ts

예시 (Windows):

claude mcp add TalkToFigma -- bun D:\F_MCP\src\talk_to_figma_mcp\server.ts

예시 (Mac/Linux):

claude mcp add TalkToFigma -- bun ~/F_MCP/src/talk_to_figma_mcp/server.ts

7. Claude Code에서 사용

Claude Code를 실행하고 다음과 같이 말하세요:

Figma MCP 채널 abc12345 연결해줘

연결 후 자연어로 Figma를 제어할 수 있습니다:

1200x1200 프레임 만들어줘
텍스트 추가해줘 "Hello World"
배경색 검정으로 바꿔줘

Windows 사용 시 참고

WSL 환경에서 사용하는 경우 src/socket.ts에서 hostname을 수정하세요:

// 이 줄의 주석을 해제
hostname: "0.0.0.0",

사용 가능한 MCP 도구

문서 & 선택

요소 생성

스타일링

레이아웃

Auto Layout

텍스트

컴포넌트 & 스타일

어노테이션

프로토타이핑

내보내기 & 연결

커스텀 기능 추가하기

이 저장소는 로컬 소스에서 실행되므로 자유롭게 기능을 추가할 수 있습니다.

새 도구 추가 방법

1. MCP 서버에 도구 등록 (src/talk_to_figma_mcp/server.ts)

server.tool(
  "my_new_tool",           // 도구 이름
  "도구 설명",              // 설명
  {
    nodeId: z.string(),    // 파라미터 정의 (zod 스키마)
  },
  async ({ nodeId }) => {  // 핸들러
    const result = await sendCommandToFigma("my_new_tool", { nodeId });
    return { content: [{ type: "text", text: JSON.stringify(result) }] };
  }
);

2. Figma 플러그인에 핸들러 추가 (src/cursor_mcp_plugin/code.js)

switch문에 case 추가:

case "my_new_tool":
  return await myNewTool(params);

함수 구현:

async function myNewTool(params) {
  const { nodeId } = params;
  const node = await figma.getNodeByIdAsync(nodeId);
  // Figma API로 원하는 작업 수행
  return { id: node.id, name: node.name };
}

3. Claude Code 재시작 — MCP 서버가 새 도구를 로드하도록 재시작

문제 해결

라이선스

MIT License

원본 프로젝트: Copyright (c) 2025 sonnylazuardi

• 원본 저장소: https://github.com/grab/cursor-talk-to-figma-mcp