문제

공식 Figma MCP 서버는 읽기 전용 도구만 제공합니다. 공식 Figma MCP 서버를 사용해서는 Figma 문서의 어떤 것도 변경할 수 없습니다. Figma Make에서 AI 에이전트를 사용할 수 있습니다. 하지만 Figma Make에서 채팅을 한 후 결과를 Figma로 옮겨 계속 진행하는 것은 편리하지 않습니다.

목표는 AI 에이전트가 귀하의 Figma 문서와 함께 작업할 수 있도록 하는 것입니다.

이 MCP 서버에서 원하는 디자인을 구현해 달라고 AI 에이전트에게 요청할 수 있습니다!

사용

전제 조건

1. Node.js가 없다면 설치하세요
2. 이 저장소를 복제합니다

피그마 플러그인 시작

1. 플러그인 디렉터리로 전환: cd plugin
2. 의존성 설치: npm i
3. Figma 플러그인 npm run build 빌드
4. 작업하고 싶은 문서를 열어 Figma를 엽니다
5. Development > Figma 플러그인 플러그인 추가, Imprort 플러그인 매니페스트에서 *>, /plugin/manifest.json를 선택하세요.
6. Figma MCP 서버 플러그인 시작
7. 예상 결과: 메시지 MCP 서버에 연결되지 않음 표시되어야 합니다
8. 플러그인 창을 닫지 마세요. 시작되면 MCP 서버에 연결됨 메시지가 표시됩니다.

다음에는 플러그인 > 개발 > Figma MCP 서버에서 플러그인을 시작할 수 있습니다.

Figma Model Context protocol server

Problem

The official Figma MCP server has only read-only tools. You can not change anything in the Figma document using the official Figma MCP server. You can use AI Agent in Figma Make. But, it is not convenient to chat in Figma Make and then move result to Figma to continue.

The goal is to enable AI Agents to work with your Figma documents.

You are able to ask you AI agent to implement the design in Figma that you want with this MCP server!

Usage

Prerequisites

1. Install Node.js if you don’t have it
2. Clone this repository

Start Figma Plugin

1. Switch to plugin directory: cd plugin
2. Install dependencies: npm i
3. Build Figma Plugin npm run build
4. Open Figma, open document you want to work with
5. Add Figma Plugin Plugins > Development > Imprort Plugin from manifest, select /plugin/manifest.json
6. Start the Figma MCP Server plugin
7. Expected result: Message Not connected to MCP server should be shown
8. Do not close Plugin window. It will show message Connected to MCP server when it is started.

Next time you can start plugin from: Plugins > Development > Figma MCP Server. And do 1-3 steps only when you want to get latest changes.

Start MCP server

1. Switch to MCP directory: cd mcp
2. Install dependencies: npm i
3. Start the server: npm run start
4. Expected result: Messages Server listening on http://localhost:38450 and a user connected: ............. in the console

Configure MCP server in your client

1. Use Streaming HTTP transport and http://localhost:38450/mcp URL
2. Turn off tools that you don’t need

Now you should be able to ask your AI Agent to do something in Figma. For example:

We are working on publishing it as Figma plugin. Figma reviewers haven’t accepted it so far. Once Figma accept it as plugin, the configuration and start will be simplified a lot!

Tools

TBD

Development

Contributions to the project are welcome!

MCP server

1. cd mcp
2. npm i
3. npm run dev

Plugin

1. cd plugin
2. npm i
3. npm run dev
4. Open Figma
5. Plugins > Development > Import plugin from manifest …
6. Select manifest.json from plugin\manifest.json
7. Start plugin
8. You should see Connected to MCP server message

Add Plugin to Figma

1. Open Figma
2. Add Figma Plugin Plugins > Development > Imprort Plugin from manifest, select /plugin/manifest.json

Inspector

1. cd mcp
2. npm run inspector