Figma MCP와 대화하기

이 프로젝트는 AI 에이전트(Cursor, Claude Code)와 Figma 간의 모델 컨텍스트 프로토콜(MCP) 통합을 구현하여, AI 에이전트가 Figma와 소통하며 디자인을 읽고 프로그램적으로 수정할 수 있도록 합니다.

프로젝트 구조

• src/talk_to_figma_mcp/ - Figma 통합을 위한 TypeScript MCP 서버
• src/cursor_mcp_plugin/ - Cursor와 통신하는 Figma 플러그인
• src/socket.ts - MCP 서버와 Figma 플러그인 간의 통신을 돕는 WebSocket 서버

사용 방법

1. Bun이 설치되어 있지 않다면 설치합니다:

2. 설정을 실행합니다. 이 과정에서 Cursor의 활성 프로젝트에 MCP도 설치됩니다.

3. WebSocket 서버를 시작합니다.

4. 새로운 기능 Figma 커뮤니티 페이지에서 플러그인을 설치하거나 로컬로 설치합니다.

빠른 비디오 튜토리얼

비디오 링크

디자인 자동화 예제

대량 텍스트 콘텐츠 교체

대량 텍스트 교체 기능에 기여해주신 @dusskapark 님께 감사드립니다. 데모 비디오는 다음과 같습니다.

인스턴스 오버라이드 전파 또 다른 @dusskapark 님의 기여 단일 명령으로 소스 인스턴스에서 다수의 대상 인스턴스로 컴포넌트 인스턴스 오버라이드를 전파합니다. 이 기능은 유사한 커스터마이징이 필요한 컴포넌트 인스턴스로 작업할 때 반복적인 디자인 작업을 크게 줄여줍니다. 데모 영상을 확인해보세요.

수동 설정 및 설치

MCP 서버: Cursor와 통합

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

WebSocket 서버

WebSocket 서버를 시작합니다:

---

🌐 본 텍스트는 빠른 이해를 돕기 위한 요약 번역본입니다. 정확한 기술 정보 및 전체 코드는 GitHub 원문에서 확인하실 수 있습니다.