Figma MCP 서버

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 플러그인 설정

cd figma-plugin
npm install
npm run build

그런 다음 플러그인을 Figma로 가져옵니다.

Figma 열기
플러그인 > 개발 > 매니페스트에서 플러그인 가져오기로 이동하세요.
figma-plugin/manifest.json 파일을 선택하세요

3. 커서 에이전트에 연결

커서에서:

설정 > 에이전트 > MCP 서버로 이동하세요.
URL: http://localhost:3000/api/mcp/schema 로 새 서버를 추가합니다.

자세한 문서

더 자세한 지침은 다음을 참조하세요.

사용 예

모든 것이 설정되면 커서 에이전트를 사용하여 다음과 같은 프롬프트로 디자인을 만들 수 있습니다.

Create a landing page with a header, hero section with heading "Our Product" and subheading "The best solution for your needs", 3 features in the features section, and a footer with contact information.

작동 원리

커서 에이전트는 자연어 프롬프트를 받습니다.
MCP 서버에 구조화된 MCP 요청을 보냅니다.
MCP 서버는 요청을 처리하고 WebSocket을 통해 Figma 플러그인에 지침을 보냅니다.
Figma 플러그인은 Figma에서 디자인 작업을 실행합니다.

특허

MIT

Install Server

HTTP connection URL

security – no known vulnerabilities

license - not found

quality - confirmed to work

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

Figma에서 Cursor Agent를 통한 자연어 프롬프트를 사용하여 AI 기반 디자인 생성을 가능하게 하는 모델 컨텍스트 프로토콜을 구현하는 TypeScript 서버입니다.

Related MCP Servers

Talk to Figma MCP
sonnylazuardi
A
security
A
license
A
quality
An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
Last updated -
19
2,514
3,528
JavaScript
MIT License
Cursor Talk To Figma MCP
toiletmadarchut
A
security
F
license
A
quality
Enables users to control the cursor in Figma through verbal commands using an agentic AI agent, streamlining the design process with a new interaction method.
Last updated -
19
2,514
1
JavaScript
Talk to Figma MCP
yhc984
-
security
F
license
-
quality
Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
Last updated -
TypeScript
Figma MCP Server
1yhy
-
security
A
license
-
quality
A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
Last updated -
124
6
TypeScript
MIT License

View all related MCP servers

Figma MCP Server