Figma MCP와 커서 대화

이 프로젝트는 Cursor AI와 Figma 간의 MCP(Model Context Protocol) 통합을 구현하여 Cursor가 Figma와 통신하여 디자인을 읽고 프로그래밍 방식으로 수정할 수 있도록 합니다.

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

프로젝트 구조

• src/talk_to_figma_mcp/ - Figma 통합을 위한 TypeScript MCP 서버

• src/cursor_mcp_plugin/ - 커서와 통신하기 위한 Figma 플러그인

• src/socket.ts - MCP 서버와 Figma 플러그인 간 통신을 용이하게 하는 WebSocket 서버

Related MCP server: Cursor Talk To Figma MCP

시작하기

1. 아직 Bun을 설치하지 않았다면 설치하세요.

지엑스피1

2. 설치를 실행하면 커서의 활성 프로젝트에도 MCP가 설치됩니다.

3. Websocket 서버를 시작합니다

4. Figma 플러그인 설치

수동 설정 및 설치

MCP 서버: 커서와의 통합

~/.cursor/mcp.json 의 Cursor MCP 구성에 서버를 추가합니다.

웹소켓 서버

WebSocket 서버를 시작합니다.

Figma 플러그인

1. Figma에서 플러그인 > 개발 > 새 플러그인으로 이동합니다.

2. "기존 플러그인 연결"을 선택하세요

3. src/cursor_mcp_plugin/manifest.json 파일을 선택하세요

4. 이제 Figma 개발 플러그인에서 플러그인을 사용할 수 있습니다.

용법

1. WebSocket 서버를 시작합니다

2. 커서에 MCP 서버 설치

3. Figma를 열고 Cursor MCP 플러그인을 실행하세요.

4. join_channel 사용하여 채널에 가입하여 플러그인을 WebSocket 서버에 연결합니다.

5. MCP 도구를 사용하여 Figma와 통신하려면 커서를 사용하세요.

MCP 도구

MCP 서버는 Figma와 상호작용하기 위한 다음과 같은 도구를 제공합니다.

문서 및 선택

• get_document_info - 현재 Figma 문서에 대한 정보를 가져옵니다.

• get_selection - 현재 선택 항목에 대한 정보를 가져옵니다.

• get_node_info - 특정 노드에 대한 자세한 정보를 가져옵니다.

요소 만들기

• create_rectangle - 위치, 크기 및 선택적 이름을 사용하여 새 사각형을 만듭니다.

• create_frame - 위치, 크기 및 선택적 이름을 사용하여 새 프레임을 만듭니다.

• create_text - 사용자 정의 가능한 글꼴 속성을 사용하여 새 텍스트 노드를 만듭니다.

스타일링

• set_fill_color - 노드의 채우기 색상 설정(RGBA)

• set_stroke_color - 노드의 선 색상과 두께를 설정합니다.

• set_corner_radius - 코너별 제어 옵션을 사용하여 노드의 코너 반경을 설정합니다.

레이아웃 및 구성

• move_node - 노드를 새 위치로 이동합니다.

• resize_node - 새로운 차원으로 노드 크기 조정

• delete_node - 노드 삭제

구성 요소 및 스타일

• get_styles - 로컬 스타일 정보 가져오기

• get_local_components - 로컬 구성 요소에 대한 정보 가져오기

• get_team_components - 팀 구성 요소에 대한 정보를 가져옵니다.

• create_component_instance - 구성 요소의 인스턴스를 생성합니다.

수출 및 고급

• export_node_as_image - 노드를 이미지(PNG, JPG, SVG 또는 PDF)로 내보냅니다.

• execute_figma_code - Figma에서 임의의 JavaScript 코드를 실행합니다(신중하게 사용하세요)

연결 관리

• join_channel - Figma와 통신하기 위해 특정 채널에 가입합니다.

개발

Figma 플러그인 빌드

1. Figma 플러그인 디렉토리로 이동합니다.

   cd src/cursor_mcp_plugin

2. code.js와 ui.html을 편집하세요

모범 사례

Figma MCP로 작업할 때:

1. 명령을 보내기 전에 항상 채널에 가입하세요

2. 먼저 get_document_info 사용하여 문서 개요를 가져옵니다.

3. 수정하기 전에 get_selection 으로 현재 선택을 확인하세요.

4. 필요에 따라 적절한 제작 도구를 사용하세요.

   • 컨테이너용 create_frame

   • 기본 모양을 위한 create_rectangle

   • 텍스트 요소에 대한 create_text

5. get_node_info 사용하여 변경 사항을 확인하세요

6. 일관성을 위해 가능한 경우 구성 요소 인스턴스를 사용하세요.

7. 모든 명령이 예외를 발생시킬 수 있으므로 오류를 적절하게 처리하십시오.

특허

MIT