Talk to Figma MCP

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 님께 감사드립니다. 데모 영상은 여기 있습니다.

인스턴스 오버라이드 전파 @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 - 특정 유형의 노드를 검색합니다(주석 대상을 찾는 데 유용함)

프로토타이핑 및 연결

• get_reactions - 시각적 하이라이트 애니메이션을 사용하여 노드에서 모든 프로토타입 반응을 가져옵니다.
• set_default_connector - 복사된 FigJam 커넥터를 연결을 생성하기 위한 기본 커넥터 스타일로 설정합니다(연결을 생성하기 전에 설정해야 함)
• create_connections - 프로토타입 흐름이나 사용자 정의 매핑을 기반으로 노드 간 FigJam 커넥터 라인을 생성합니다.

요소 만들기

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

텍스트 콘텐츠 수정

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

자동 레이아웃 및 간격

• set_layout_mode - 프레임의 레이아웃 모드와 래핑 동작을 설정합니다(없음, 수평, 수직)
• set_padding - 자동 레이아웃 프레임의 패딩 값 설정(위, 오른쪽, 아래, 왼쪽)
• set_axis_align - 자동 레이아웃 프레임에 대한 기본 및 상대 축 정렬을 설정합니다.
• set_layout_sizing - 자동 레이아웃 프레임에 대한 수평 및 수직 크기 조정 모드(FIXED, HUG, FILL)를 설정합니다.
• set_item_spacing - 자동 레이아웃 프레임에서 자식 간의 거리 설정

스타일링

• 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 - 로컬 구성 요소에 대한 정보 가져오기
• create_component_instance - 구성 요소의 인스턴스를 생성합니다.
• get_instance_overrides - 선택한 구성 요소 인스턴스에서 재정의 속성 추출
• set_instance_overrides - 추출된 재정의를 대상 인스턴스에 적용합니다.

수출 및 고급

• export_node_as_image - 노드를 이미지(PNG, JPG, SVG 또는 PDF)로 내보내기 - 현재 텍스트로 base64를 반환하는 이미지에 대한 지원이 제한됨

연결 관리

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

MCP 프롬프트

MCP 서버에는 복잡한 설계 작업을 안내하는 여러 가지 도우미 프롬프트가 포함되어 있습니다.

• design_strategy - Figma 디자인 작업을 위한 모범 사례
• read_design_strategy - Figma 디자인 읽기 모범 사례
• text_replacement_strategy - Figma 디자인에서 텍스트를 대체하기 위한 체계적인 접근 방식
• annotation_conversion_strategy - 수동 주석을 Figma 기본 주석으로 변환하기 위한 전략
• swap_overrides_instances - Figma에서 구성 요소 인스턴스 간 오버라이드를 전송하기 위한 전략
• reaction_to_connector_strategy - 'get_reactions'의 출력을 사용하여 Figma 프로토타입 반응을 커넥터 라인으로 변환하고, 'create_connections'를 순서대로 사용하도록 안내하는 전략

개발

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 사용하여 일괄적으로 네이티브 주석을 생성합니다.
• 모든 주석이 대상에 제대로 연결되었는지 확인하세요.
• 성공적인 변환 후 레거시 주석 노드 삭제

11. FigJam 커넥터로 프로토타입 국수를 시각화해 보세요.

• get_reactions 사용하여 프로토타입 흐름을 추출합니다.
• set_default_connector 로 기본 커넥터를 설정합니다.
• create_connections 로 커넥터 라인을 생성하여 명확한 시각적 흐름 매핑을 구현합니다.

특허

MIT