cursor-talk-to-figma-mcp
https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp
본 프로젝트는 커서 AI와 Figma를 통합하여 커서가 Figma 디자인을 읽고 프로그래밍 방식으로 수정할 수 있도록 하는 모델 컨텍스트 프로토콜(MCP) 통합을 구현합니다.
src/talk_to_figma_mcp/ - Figma 통합을 위한 TypeScript MCP 서버
src/cursor_mcp_plugin/ - 커서와 통신하기 위한 Figma 플러그인
src/socket.ts - MCP 서버와 Figma 플러그인 간 통신을 중재하는 WebSocket 서버
1. Bun 설치 (아직 설치하지 않은 경우):
curl -fsSL https://bun.sh/install | bash
2. 설정 실행:
이 명령어는 필요한 의존성을 설치하고 커서의 활성 프로젝트에 MCP를 설치합니다.
bun setup
3. WebSocket 서버 시작:
bun socket
4. MCP 서버 실행:
bunx cursor-talk-to-figma-mcp
5. Figma 플러그인 설치:
Plugins > Development > New Plugin으로 이동합니다.src/cursor_mcp_plugin/manifest.json 파일을 선택합니다.@dusskapark님께서 기여해주신 대량 텍스트 교체 기능 데모 영상은 여기에서 확인할 수 있습니다. (영상 링크)
커서의 MCP 설정 파일 (~/.cursor/mcp.json)에 다음 서버 설정을 추가합니다.
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": ["cursor-talk-to-figma-mcp@latest"]
}
}
}
다음 명령어를 실행하여 WebSocket 서버를 시작합니다.
bun socket
위의 "Figma 플러그인 설치" 섹션의 단계를 따릅니다.
1. PowerShell을 통해 Bun 설치:
powershell -c "irm bun.sh/install.ps1|iex"
2. src/socket.ts 파일에서 hostname: "0.0.0.0", 주석 해제:
// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",
3. WebSocket 서버 시작:
bun socket
bun socket).Plugins > Development에서 찾을 수 있습니다).join_channel 명령어를 사용하여 플러그인을 WebSocket 서버에 연결합니다.MCP 서버는 Figma와 상호 작용하기 위한 다양한 도구를 제공합니다.
get_document_info: 현재 Figma 문서에 대한 정보를 가져옵니다.get_selection: 현재 선택된 노드에 대한 정보를 가져옵니다.read_my_design: 파라미터 없이 현재 선택된 노드에 대한 상세 정보를 가져옵니다.get_node_info: 특정 노드 ID를 기반으로 상세 정보를 가져옵니다.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 플러그인 디렉토리로 이동합니다.
cd src/cursor_mcp_plugin
code.js 및 ui.html 파일을 편집합니다.
Figma MCP로 작업할 때 다음 사항을 고려하세요.
join_channel).get_document_info를 사용하여 문서 개요를 확인하세요.get_selection으로 현재 선택 항목을 확인하세요.create_frame은 컨테이너용, create_rectangle은 기본 도형용, create_text는 텍스트 요소용).get_node_info를 사용하여 변경 사항을 확인하세요.대규모 디자인의 경우:
scan_text_nodes에서 청킹 파라미터를 사용하세요.텍스트 작업의 경우:
레거시 주석 변환의 경우:
scan_nodes_by_types를 사용하여 주석이 참조하는 UI 요소를 찾으세요.get_annotations를 사용하여 주석을 적절하게 분류하세요.set_multiple_annotations를 사용하여 기본 주석을 일괄적으로 생성하세요.MIT
#Figma #Cursor #디자인자동화 #MCP #AI
꿈꿔왔던 디자인 자동화가 현실로 다가왔습니다! 커서 AI와 Figma가 모델 컨텍스트 프로토콜(MCP)을 통해 긴밀하게 통합되어, 이제 커서가 Figma 디자인을 지능적으로 이해하고 프로그래밍 방식으로 제어할 수 있게 되었습니다. 이 놀라운 프로젝트를 통해 디자이너와 개발자는 더욱 효율적인 협업 워크플로우를 구축하고, 반복적인 작업을 자동화하여 창의적인 작업에 더 집중할 수 있습니다.
더 이상 디자인 변경 사항을 수동으로 코딩에 반영하거나, 개발자가 디자인 스펙을 해석하는 데 어려움을 겪을 필요가 없습니다. 커서 AI와 Figma MCP 통합은 다음과 같은 혁신적인 가능성을 제시합니다.
이 강력한 통합 기능을 경험하기 위한 시작 방법은 매우 간단합니다. 위에 제시된 단계별 가이드를 따라 Bun을 설치하고, WebSocket 서버와 MCP 서버를 실행하고, Figma 플러그인을 설치하기만 하면 됩니다.
특히, 윈도우 환경에서 WSL을 사용하시는 분들을 위한 별도의 설치 가이드도 제공되니 걱정 없이 시작하실 수 있습니다.
커서 AI와 Figma MCP 통합은 다양한 작업을 수행할 수 있는 강력한 도구들을 제공합니다.
커서 AI와 Figma MCP 통합은 단순한 기능 확장을 넘어, 디자이너와 개발자가 더욱 긴밀하게 협력하고 창의적인 작업에 집중할 수 있는 새로운 가능성을 열어줍니다. 반복적인 디자인 작업을 자동화하고, 디자인-코드 간의 불일치를 줄임으로써 생산성을 극대화하고 혁신적인 사용자 경험을 구축하는 데 기여할 것입니다.
지금 바로 이 놀라운 프로젝트를 경험하고, 디자인 자동화의 새로운 시대를 열어보세요!
댓글목록
등록된 댓글이 없습니다.