theinnovatorsFigma 디자인에서 실제 코드로 퍼블리싱 하는 과정이 MCP를 통해 자동화됩니다. Cursor Talk to Figma MCP 프로젝트는 Cursor AI와 Figma를 통합하여 디자인을 프로그래밍적으로 읽고 수정할 수 있는 기능을 제공합니다. 이를 통해 디자인과 코드 간의 전환을 더욱 효율적으로 수행할 수 있습니다.
MCP란 무엇인가?
- MCP(Model Context Protocol)는 AI 시스템이 외부 데이터 소스와 상호작용할 수 있도록 하는 프로토콜입니다. 이를 통해 AI는 파일 시스템, 데이터베이스, 웹 API 등 다양한 데이터 소스와 직접 통신하여 필요한 정보를 얻거나 명령을 실행할 수 있습니다. 특히, MCP는 양방향 데이터 흐름을 지원하여 AI가 데이터를 읽고 수정하는 것을 가능하게 합니다.
Cursor Talk to Figma MCP 소개
이 프로젝트는 Cursor AI와 Figma 간의 MCP 통합을 구현하여, Cursor가 Figma 디자인을 읽고 프로그래밍적으로 수정할 수 있도록 합니다. 이를 통해 개발자는 디자인 데이터를 코드로 변환하거나, 코드를 디자인으로 변환하는 작업을 자동화할 수 있습니다.
프로젝트 구조
src/talk_to_figma_mcp/: Figma 통합을 위한 TypeScript MCP 서버src/cursor_mcp_plugin/: Cursor와 통신하기 위한 Figma 플러그인src/socket.ts: MCP 서버와 Figma 플러그인 간의 통신을 중계하는 WebSocket 서버
사용법
1. MCP 서버 설정 및 실행
- Bun 설치: Bun은 JavaScript 런타임으로, 설치하지 않았다면 다음 명령어를 실행합니다.
curl -fsSL <https://bun.sh/install> | bash - MCP 서버 설정: Cursor의 MCP 설정 파일(
~/.cursor/mcp.json)에 다음과 같이 서버를 추가합니다.{ "mcpServers": { "TalkToFigma": { "command": "bun", "args": [ "/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts" ] } } } - WebSocket 서버 실행: 프로젝트 디렉토리에서 다음 명령어를 실행하여 WebSocket 서버를 시작합니다.
bun run src/socket.ts
2. Figma 플러그인 설치
- Figma에서
Plugins > Development > New Plugin으로 이동합니다. Link existing plugin을 선택합니다.src/cursor_mcp_plugin/manifest.json파일을 선택하여 플러그인을 등록합니다.- 이제 Figma의 개발자 플러그인 목록에서 해당 플러그인을 사용할 수 있습니다.
3. 사용 절차
- WebSocket 서버 시작: 앞서 실행한 WebSocket 서버가 실행 중이어야 합니다.
- Cursor에서 MCP 서버 설치: Cursor의 설정에서 MCP 서버를 추가합니다.
- Figma에서 플러그인 실행: Figma에서 설치한 Cursor MCP 플러그인을 실행합니다.
- 채널 연결: 플러그인에서
join_channel명령어를 사용하여 WebSocket 서버에 채널을 연결합니다. - Cursor와의 통신: 이제 Cursor를 통해 Figma와 상호작용하며 디자인을 읽거나 수정할 수 있습니다.
MCP 도구들
MCP 서버는 Figma와의 상호작용을 위한 다양한 도구를 제공합니다.
문서 및 선택
get_document_info: 현재 Figma 문서의 정보를 가져옵니다.get_selection: 현재 선택된 요소의 정보를 가져옵니다.get_node_info: 특정 노드의 상세 정보를 가져옵니다.
요소 생성
create_rectangle: 위치, 크기, 이름을 지정하여 새로운 사각형을 생성합니다.create_frame: 위치, 크기, 이름을 지정하여 새로운 프레임을 생성합니다.create_text: 글꼴 속성을 지정하여 새로운 텍스트 노드를 생성합니다.
스타일링
set_fill_color: 노드의 채우기 색상을 설정합니다.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 플러그인의 code.js와 ui.html 파일을 수정하여 사용자 인터페이스와 기능을 커스터마이즈할 수 있습니다.
최적의 활용을 위한 팁
- 명령어를 보내기 전에 항상 채널에 연결되어 있는지 확인하세요.
get_document_info를 사용하여 문서의 전반적인 구조를 파악한 후 작업을 시작하는 것이 좋습니다.- 수정 전에
get_selection을 통해 현재 선택된 요소를 확인하세요. - 프레임, 사각형, 텍스트 등 적절한 요소 생성 도구를 사용하여 디자인 요소를 추가하세요.
- 변경 사항을 적용한 후
get_node_info를 통해 결과를 검증하세요. - 가능한 경우 컴포넌트 인스턴스를 사용하여 일관성을 유지하세요.
- 모든 명령어는 예외를 발생시킬 수 있으므로 오류 처리를 적절히 수행하세요.
결론
Cursor Talk to Figma MCP 프로젝트는 디자인과 개발의 경계를 허물어, 보다 효율적이고 통합된 워크플로우를 제공합니다. 이를 통해 개발자는 디자인을 코드로, 코드를 디자인으로 변환하는 작업을 자동화하여 생산성을 향상시킬 수 있습니다.
TI Tech Lab 이유진 연구원
Source
- https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp
- https://www.figma.com/community/plugin/1485687494525374295/cursor-talk-to-figma-mcp-plugin
Add comment