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: Gravity Global Figma MCP

시작하기

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

지엑스피1

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

bun setup

Websocket 서버를 시작합니다

bun socket

MCP 서버

bunx cursor-talk-to-figma-mcp

Figma 플러그인 설치

빠른 비디오 튜토리얼

비디오 링크

설계 자동화 예제

대량 텍스트 콘텐츠 교체

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

인스턴스 오버라이드 전파 @dusskapark 의 또 다른 기여: 단일 명령으로 소스 인스턴스에서 여러 대상 인스턴스로 컴포넌트 인스턴스 오버라이드를 전파합니다. 이 기능은 유사한 사용자 지정이 필요한 컴포넌트 인스턴스 작업 시 반복적인 디자인 작업을 크게 줄여줍니다. 데모 영상을 확인해 보세요.

수동 설정 및 설치

MCP 서버: 커서와의 통합

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

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

웹소켓 서버

WebSocket 서버를 시작합니다.

bun socket

Figma 플러그인

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

Windows + WSL 가이드

PowerShell을 통해 bun을 설치하세요

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

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

// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",

웹소켓을 시작합니다

bun socket

용법

WebSocket 서버를 시작합니다
커서에 MCP 서버 설치
Figma를 열고 Cursor MCP 플러그인을 실행하세요.
join_channel 사용하여 채널에 가입하여 플러그인을 WebSocket 서버에 연결합니다.
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 플러그인 빌드

Figma 플러그인 디렉토리로 이동합니다.
```
cd src/cursor_mcp_plugin
```
code.js와 ui.html을 편집하세요

모범 사례

Figma MCP로 작업할 때:

명령을 보내기 전에 항상 채널에 가입하세요
먼저 get_document_info 사용하여 문서 개요를 가져옵니다.
수정하기 전에 get_selection 으로 현재 선택을 확인하세요.
필요에 따라 적절한 제작 도구를 사용하세요.
- 컨테이너용 create_frame
- 기본 모양을 위한 create_rectangle
- 텍스트 요소에 대한 create_text
get_node_info 사용하여 변경 사항을 확인하세요
일관성을 위해 가능한 경우 구성 요소 인스턴스를 사용하세요.
모든 명령이 예외를 발생시킬 수 있으므로 오류를 적절하게 처리하십시오.
대형 디자인의 경우:
- scan_text_nodes 에서 청킹 매개변수를 사용하세요
- WebSocket 업데이트를 통해 진행 상황 모니터링
- 적절한 오류 처리를 구현하세요
텍스트 작업의 경우:
- 가능하면 일괄 작업을 사용하세요
- 구조적 관계를 고려하세요
- 대상 내보내기로 변경 사항 확인
레거시 주석을 변환하려면 다음을 수행하세요.

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

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

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

특허

MIT

Talk to Figma MCP