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 서버

시작하기

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

지엑스피1

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

3. Websocket 서버를 시작합니다

4. MCP 서버

5. Figma 플러그인 설치

빠른 비디오 튜토리얼

설계 자동화 예제

대량 텍스트 콘텐츠 교체

대량 텍스트 바꾸기 기능을 제공해 주신 @dusskapark 님께 감사드립니다. 데모 영상은 여기 있습니다.

수동 설정 및 설치

MCP 서버: 커서와의 통합

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

웹소켓 서버

WebSocket 서버를 시작합니다.

Figma 플러그인

1. Figma에서 플러그인 > 개발 > 새 플러그인으로 이동합니다.
2. "기존 플러그인 연결"을 선택하세요
3. src/cursor_mcp_plugin/manifest.json 파일을 선택하세요
4. 이제 Figma 개발 플러그인에서 플러그인을 사용할 수 있습니다.

Windows + WSL 가이드

1. PowerShell을 통해 bun을 설치하세요

2. src/socket.ts 에서 호스트 이름 0.0.0.0 의 주석 처리를 제거합니다.

3. 웹소켓을 시작합니다

용법

1. WebSocket 서버를 시작합니다
2. 커서에 MCP 서버 설치
3. Figma를 열고 Cursor MCP 플러그인을 실행하세요.
4. join_channel 사용하여 채널에 가입하여 플러그인을 WebSocket 서버에 연결합니다.
5. MCP 도구를 사용하여 Figma와 통신하려면 커서를 사용하세요.

MCP 도구

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

문서 및 선택

• get_document_info - 현재 Figma 문서에 대한 정보를 가져옵니다.
• get_selection - 현재 선택 항목에 대한 정보를 가져옵니다.
• read_my_design - 매개변수 없이 현재 선택 항목에 대한 자세한 노드 정보를 가져옵니다.
• get_node_info - 특정 노드에 대한 자세한 정보를 가져옵니다.
• get_nodes_info - 노드 ID 배열을 제공하여 여러 노드에 대한 자세한 정보를 가져옵니다.

주석

• get_annotations - 현재 문서 또는 특정 노드의 모든 주석을 가져옵니다.
• set_annotation - 마크다운 지원을 통해 주석을 생성하거나 업데이트합니다.
• set_multiple_annotations - 여러 주석을 효율적으로 일괄 생성/업데이트
• scan_nodes_by_types - 특정 유형의 노드를 검색합니다(주석 대상을 찾는 데 유용함)

요소 만들기

• create_rectangle - 위치, 크기 및 선택적 이름을 사용하여 새 사각형을 만듭니다.
• create_frame - 위치, 크기 및 선택적 이름을 사용하여 새 프레임을 만듭니다.
• create_text - 사용자 정의 가능한 글꼴 속성을 사용하여 새 텍스트 노드를 만듭니다.

텍스트 콘텐츠 수정

• scan_text_nodes - 대규모 디자인을 위한 지능형 청킹으로 텍스트 노드 스캔
• set_text_content - 단일 텍스트 노드의 텍스트 내용을 설정합니다.
• set_multiple_text_contents - 여러 텍스트 노드를 효율적으로 일괄 업데이트합니다.

스타일링

• set_fill_color - 노드의 채우기 색상 설정(RGBA)
• set_stroke_color - 노드의 선 색상과 두께를 설정합니다.
• set_corner_radius - 코너별 제어 옵션을 사용하여 노드의 코너 반경을 설정합니다.

레이아웃 및 구성

• move_node - 노드를 새 위치로 이동합니다.
• resize_node - 새로운 차원으로 노드 크기 조정
• delete_node - 노드 삭제
• delete_multiple_nodes - 여러 노드를 한 번에 효율적으로 삭제
• clone_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. 모든 명령이 예외를 발생시킬 수 있으므로 오류를 적절하게 처리하십시오.
8. 대형 디자인의 경우:
   • scan_text_nodes 에서 청킹 매개변수를 사용하세요
   • WebSocket 업데이트를 통해 진행 상황 모니터링
   • 적절한 오류 처리를 구현하세요
9. 텍스트 작업의 경우:
   • 가능하면 일괄 작업을 사용하세요
   • 구조적 관계를 고려하세요
   • 대상 내보내기로 변경 사항 확인
10. 레거시 주석을 변환하려면 다음을 수행하세요.

• 번호가 매겨진 마커와 설명을 식별하기 위해 텍스트 노드를 스캔합니다.
• scan_nodes_by_types 사용하여 주석이 참조하는 UI 요소를 찾습니다.
• 경로, 이름 또는 근접성을 사용하여 마커를 대상 요소와 일치시킵니다.
• get_annotations 사용하여 주석을 적절하게 분류합니다.
• set_multiple_annotations 사용하여 일괄적으로 네이티브 주석을 생성합니다.
• 모든 주석이 대상에 제대로 연결되었는지 확인하세요.
• 성공적인 변환 후 레거시 주석 노드 삭제

특허

MIT