Figma MCP(모델 컨텍스트 프로토콜)
모델 컨텍스트 프로토콜을 사용하여 커서 에이전트를 통해 Figma 디자인을 만들고 수정하기 위한 완벽한 솔루션입니다.
블로그: https://xflux.us/2025/04/06/ai-powered-design-automation-building-a-figma-mcp-with-cursor/ 
개요
이 프로젝트는 Figma에서 Cursor Agent를 통해 자연어 프롬프트를 사용하여 AI 기반 디자인을 제작할 수 있도록 지원합니다. 이 프로젝트는 두 가지 주요 구성 요소로 구성됩니다.
MCP 서버 : 모델 컨텍스트 프로토콜을 구현하고 WebSockets를 통해 Figma 플러그인과 통신하는 Bun + TypeScript 서버입니다.
Figma 플러그인 : Figma에서 실행되고 MCP 서버의 지침에 따라 디자인 작업을 실행하는 플러그인입니다.
이 통합을 통해 자연어를 사용하여 다음을 수행할 수 있습니다.
기본적인 디자인 요소(도형, 텍스트 등)를 만듭니다.
여러 섹션으로 구성된 완전한 페이지 레이아웃 디자인
기존 디자인 수정
Related MCP server: Figma MCP Server
저장소 구조
figma-mcp-server/ : MCP 서버 구현
figma-plugin/ : 디자인 작업을 실행하기 위한 Figma 플러그인
빠른 시작
1. MCP 서버 설정
지엑스피1
2. Figma 플러그인 설정
그런 다음 플러그인을 Figma로 가져옵니다.
Figma 열기
플러그인 > 개발 > 매니페스트에서 플러그인 가져오기로 이동하세요.
figma-plugin/manifest.json파일을 선택하세요
3. 커서 에이전트에 연결
커서에서:
설정 > 에이전트 > MCP 서버로 이동하세요.
URL:
http://localhost:3000/api/mcp/schema로 새 서버를 추가합니다.
자세한 문서
더 자세한 지침은 다음을 참조하세요.
사용 예
모든 것이 설정되면 커서 에이전트를 사용하여 다음과 같은 프롬프트로 디자인을 만들 수 있습니다.
작동 원리
커서 에이전트는 자연어 프롬프트를 받습니다.
MCP 서버에 구조화된 MCP 요청을 보냅니다.
MCP 서버는 요청을 처리하고 WebSocket을 통해 Figma 플러그인에 지침을 보냅니다.
Figma 플러그인은 Figma에서 디자인 작업을 실행합니다.
특허
MIT