프로젝트 소개
TalkToFigma는 AI 에이전트(Cursor, Claude Code, Codex)와 Figma 사이에 Model Context Protocol(MCP) 브리지를 구현합니다. WebSocket 서버와 동반 Figma 플러그인을 통해 에이전트는 문서와 선택 항목을 검사하고, 노드를 생성·편집하며, 텍스트, 오토 레이아웃, 스타일, 컴포넌트, 주석을 관리하고, 노드를 이미지로 내보낼 수 있습니다.
아키텍처
- src/talk_to_figma_mcp: Figma 작업을 도구로 노출하는 TypeScript MCP 서버.
- src/cursor_mcp_plugin: 에이전트 측과 통신하는 Figma 플러그인.
- src/socket.ts: MCP 서버와 플러그인 간 메시지를 중계하는 WebSocket 서버.
설정
Bun을 설치하고 `bun setup`을 실행한 다음(활성 Cursor 프로젝트에 MCP 서버도 등록됨), `bun socket`으로 소켓을 시작하고, 커뮤니티 페이지에서 Figma 플러그인을 설치하거나 manifest.json을 통해 로컬로 연결합니다. 수동 MCP 구성은 ~/.cursor/mcp.json에서 `bunx cursor-talk-to-figma-mcp@latest`를 사용합니다. Windows + WSL 가이드에서는 socket.ts에서 호스트 이름 0.0.0.0의 주석을 해제하도록 안내합니다.
사용 흐름
WebSocket 서버를 시작하고, MCP 서버를 설치하고, Figma를 열어 플러그인을 실행한 다음, `join_channel`로 채널에 참여하고 에이전트에서 명령을 내립니다. 모범 사례로는 먼저 채널에 참여하고, 편집 전에 문서 정보와 선택 항목을 읽고, get_node_info로 확인하고, 대규모 디자인에는 배치 작업을 사용하는 것이 포함됩니다.
도구 범위
- 문서 및 선택: get_document_info, get_selection, read_my_design, get_node_info, get_nodes_info, set_focus, set_selections.
- 주석: get_annotations, set_annotation, set_multiple_annotations, scan_nodes_by_types.
- 프로토타이핑: get_reactions, set_default_connector, FigJam 커넥터 라인용 create_connections.
- 생성: create_rectangle, create_frame, create_section, create_text.
- 텍스트: scan_text_nodes, set_text_content, set_multiple_text_contents.
- 오토 레이아웃: set_layout_mode, set_padding, set_axis_align, set_layout_sizing, set_item_spacing.
- 스타일링: set_fill_color, set_stroke_color, set_corner_radius, set_image_fill.
- 구성: move_node, resize_node, delete_node, delete_multiple_nodes, clone_node, rename_node, set_parent.
- 컴포넌트 및 스타일: 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.
프롬프트
복잡한 작업을 안내하는 도우미 프롬프트: design_strategy, read_design_strategy, text_replacement_strategy, annotation_conversion_strategy, swap_overrides_instances, reaction_to_connector_strategy.
주목할 만한 기여 기능으로는 대량 텍스트 교체와 인스턴스 오버라이드 전파가 있습니다. MIT 라이선스로 제공됩니다.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.