Which integrations are available for this server?

Allows for direct control and manipulation of Figma designs, including retrieving document and node information, creating and styling elements, managing Auto Layout, interacting with components and instances, and exporting designs as images.

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@F_MCP create a 1200x1200px frame and add a text element that says 'Hello World'" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

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)

구성요소	파일	역할
MCP 서버	`src/talk_to_figma_mcp/server.ts`	Claude Code와 Figma 사이 중계
WebSocket 서버	`src/socket.ts`	MCP 서버 ↔ Figma 플러그인 통신
Figma 플러그인	`src/cursor_mcp_plugin/`	Figma 내부에서 API 실행

설치 방법

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 플러그인 등록 (로컬 개발 모드)

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

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

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

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 도구

문서 & 선택

도구	설명
`get_document_info`	현재 Figma 문서 정보 조회
`get_selection`	현재 선택된 요소 정보 조회
`read_my_design`	선택된 요소의 상세 노드 정보 조회
`get_node_info`	특정 노드 상세 정보 조회
`get_nodes_info`	여러 노드 상세 정보 일괄 조회
`set_focus`	특정 노드로 포커스 이동
`set_selections`	여러 노드 선택

요소 생성

도구	설명
`create_rectangle`	사각형 생성
`create_frame`	프레임 생성
`create_text`	텍스트 생성

스타일링

도구	설명
`set_fill_color`	채우기 색상 설정 (RGBA)
`set_stroke_color`	테두리 색상/두께 설정
`set_corner_radius`	모서리 둥글기 설정
`set_image_fill`	이미지 URL로 채우기 설정 (커스텀 추가)

레이아웃

도구	설명
`move_node`	노드 위치 이동
`resize_node`	노드 크기 변경
`delete_node`	노드 삭제
`delete_multiple_nodes`	여러 노드 일괄 삭제
`clone_node`	노드 복제

Auto Layout

도구	설명
`set_layout_mode`	레이아웃 모드 설정 (NONE, HORIZONTAL, VERTICAL)
`set_padding`	패딩 설정
`set_axis_align`	축 정렬 설정
`set_layout_sizing`	사이징 모드 설정 (FIXED, HUG, FILL)
`set_item_spacing`	요소 간 간격 설정

텍스트

도구	설명
`scan_text_nodes`	텍스트 노드 스캔
`set_text_content`	텍스트 내용 변경
`set_multiple_text_contents`	여러 텍스트 일괄 변경

컴포넌트 & 스타일

도구	설명
`get_styles`	로컬 스타일 조회
`get_local_components`	로컬 컴포넌트 조회
`create_component_instance`	컴포넌트 인스턴스 생성
`get_instance_overrides`	인스턴스 오버라이드 추출
`set_instance_overrides`	인스턴스 오버라이드 적용

어노테이션

도구	설명
`get_annotations`	어노테이션 조회
`set_annotation`	어노테이션 생성/수정
`set_multiple_annotations`	여러 어노테이션 일괄 생성
`scan_nodes_by_types`	특정 타입 노드 스캔

프로토타이핑

도구	설명
`get_reactions`	프로토타입 리액션 조회
`set_default_connector`	기본 커넥터 설정
`create_connections`	커넥터 라인 생성

내보내기 & 연결

도구	설명
`export_node_as_image`	노드를 이미지로 내보내기 (PNG, JPG, SVG, PDF)
`join_channel`	채널 연결

커스텀 기능 추가하기

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

새 도구 추가 방법

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 서버가 새 도구를 로드하도록 재시작

문제 해결

문제	해결
WebSocket 연결 안 됨	`bun socket`이 실행 중인지 확인
플러그인이 안 보임	Figma > Plugins > Development에서 manifest 다시 로드
MCP 도구가 안 보임	Claude Code 재시작 필요
타임아웃 에러	Figma 플러그인이 Connect 상태인지, 채널명이 맞는지 확인
Windows에서 연결 안 됨	`socket.ts`의 hostname을 `0.0.0.0`으로 변경

라이선스

MIT License

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

This server cannot be installed

-

security - not tested

A

license - permissive license

-

quality - not tested

How are these scores calculated?

Resources

Need Help?

Report Issue

Related Servers

F_MCP