cursor-talk-to-figma-mcp: AI 에이전트가 프로그래밍 방식으로 Figma 디자인을 읽고 수정할 수 있게 해주는 MCP 통합

cursor-talk-to-figma-mcp: AI 에이전트가 프로그래밍 방식으로 Figma 디자인을 읽고 수정할 수 있게 해주는 MCP 통합

해결하는 문제

이 프로젝트는 AI 에이전트(예: Cursor 또는 Claude Code)와 Figma 사이에 다리를 놓아, 이러한 에이전트가 프로그래밍 방식으로 디자인 파일을 읽고, 수정하고, 자동화할 수 있게 합니다. 디자인 요구사항을 Figma 변경으로 수동 변환하는 작업을 없애고, AI가 디자인 캔버스와 직접 상호작용하도록 합니다.

작동 방식

시스템은 Model Context Protocol (MCP)을 사용해 AI 에이전트를 Figma 플러그인에 연결합니다. 통신은 MCP 서버(에이전트가 사용)와 디자인 툴 내부에 존재하는 Figma 플러그인 사이를 중계하는 WebSocket 서버를 통해 이루어집니다.

대상 사용자

Cursor와 같은 AI 기반 IDE를 사용하고 반복적인 디자인 작업을 자동화하거나, 대량 콘텐츠 업데이트를 관리하거나, 프로토타입 흐름을 시각적 다이어그램으로 변환하고 싶은 디자이너와 개발자.

주요 특징

  • 포괄적인 디자인 툴셋: 문서 정보 읽기, 선택 관리, 프레임·사각형·텍스트 생성, Auto Layout 및 간격과 같은 레이아웃 속성 수정 도구 제공.
  • 디자인 자동화: 대량 텍스트 교체와 여러 대상에 걸친 컴포넌트 인스턴스 오버라이드 전파 지원.
  • 프로토타이핑 시각화: Figma 프로토타입 리액션을 FigJam 연결선으로 변환해 시각적 흐름 매핑을 개선.
  • 주석 관리: 노드를 스캔하고 마크다운을 지원하는 네이티브 Figma 주석을 생성·업데이트하는 도구 포함.
  • 내보내기 기능: 노드를 이미지(PNG, JPG, SVG, PDF)로 내보내기 가능.

Sources