問題

公式Figma MCPサーバーには読み取り専用ツールのみがあります。公式Figma MCPサーバーではFigmaドキュメント内の内容を変更することはできません。 Figma MakeでAIエージェントを使うことができます。しかし、Figma Makeでチャットしてから結果をFigmaに移して続行するのは不便です。

目標はAIエージェントがあなたのFigma文書を操作できるようにすることです。

このMCPサーバーで、AIエージェントにFigmaであなたのデザインを実装してもらうことができます!

使用法

前提条件

1. Node.jsがない場合はインストールしてください
2. このリポジトリをクローンする

フィグマプラグインを起動

1. プラグインディレクトリに切り替える: cd plugin
2. 依存関係のインストール:npm i
3. Figmaプラグイン[[T3]をビルドする
4. Figmaを開き、作業したいドキュメントを開きます
5. Figmaプラグインプラグイン >Development > Imprort Plugin from manifestを追加し、/plugin/manifest.jsonを選択します。
6. Figma MCP Serverプラグインを起動します
7. 期待結果:メッセージMCPサーバーに接続されていませんが表示される
8. プラグインウィンドウを閉じないでください。起動すると「MCPサーバーに接続済み」というメッセージが表示されます。

次回はプラグイン > 開発 > Figma MCP Serverからプラグインを始められます。

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