local-only server
The server can only run on the client’s local machine because it depends on local resources.
Integrations
The MCP server is built with Bun, providing the runtime environment for the server implementation.
Provides tools for creating and modifying Figma designs through natural language prompts, including capabilities to create basic design elements, design complete page layouts, and modify existing designs.
The server is implemented in TypeScript, providing type safety and modern language features for the implementation.
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 서버의 지침에 따라 디자인 작업을 실행하는 플러그인입니다.
이 통합을 통해 자연어를 사용하여 다음을 수행할 수 있습니다.
- 기본적인 디자인 요소(도형, 텍스트 등)를 만듭니다.
- 여러 섹션으로 구성된 완전한 페이지 레이아웃 디자인
- 기존 디자인 수정
저장소 구조
- 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
You must be authenticated.
Figma에서 Cursor Agent를 통한 자연어 프롬프트를 사용하여 AI 기반 디자인 생성을 가능하게 하는 모델 컨텍스트 프로토콜을 구현하는 TypeScript 서버입니다.