Проблема

Официальный сервер Figma MCP имеет только инструменты только для чтения. Вы не можете ничего изменить в документе Figma с помощью официального сервера Figma MCP. Вы можете использовать AI Agent в Figma Make. Но неудобно общаться в Figma Make, а затем переносить результат в Figma для продолжения.

Цель — позволить агентам искусственного интеллекта работать с вашими документами Figma.

Вы можете попросить своего AI-агента реализовать нужный дизайн в Figma с этим MCP-сервером!

Использование

Требования

1. Установите Node.js, если у вас его нет
2. Клонировать это хранилище

Запустить плагин Figma

1. Переключиться в каталог плагинов: cd plugin
2. Установка зависимости: npm i
3. Build Plugin Figma npm run build
4. Откройте Figma — открытый документ, с которым хотите работать.
5. Добавить плагин Figma Плагины > Разработка > Imprort Plugin из манифеста, выберите /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