local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

Allows Cursor AI to communicate with Figma for reading designs and modifying them programmatically, including creating elements (rectangles, frames, text), styling (colors, strokes, corner radius), manipulating layout, working with components, and exporting nodes as images.

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

시작하기

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

지엑스피1

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

bun setup

Websocket 서버를 시작합니다

bun start

Figma 플러그인 설치

수동 설정 및 설치

MCP 서버: 커서와의 통합

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

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": [
        "/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
      ]
    }
  }
}

웹소켓 서버

WebSocket 서버를 시작합니다.

bun run src/socket.ts

Figma 플러그인

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

용법

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

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 사용하여 변경 사항을 확인하세요
일관성을 위해 가능한 경우 구성 요소 인스턴스를 사용하세요.
모든 명령이 예외를 발생시킬 수 있으므로 오류를 적절하게 처리하십시오.

특허

MIT

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

Cursor AI가 Figma 디자인과 상호 작용할 수 있도록 하여 사용자가 디자인 정보를 읽고 자연어 명령을 통해 요소를 프로그래밍 방식으로 수정할 수 있도록 합니다.

Talk to Figma MCP