MCP-сервер Figma

Сервер Model Context Protocol (MCP), который обеспечивает мост между проектами Figma и реализациями React. Этот сервер обеспечивает пиксельную конвертацию проектов Figma в приложения React, обрабатывая данные файлов Figma и предоставляя их в формате, удобном для React.

🚀 Особенности

Интеграция с API Figma : прямое подключение к API Figma для доступа к файлам дизайна.
React-Ready Output : преобразует данные Figma в формат, совместимый с React.
Обработка стилей : преобразует стили Figma в CSS/styled-components.
Управление активами : управляет активами изображений и компонентами SVG.
Обработка макета : преобразует автоматический макет Figma в Flexbox
Безопасность типов : создано с помощью TypeScript для надежной проверки типов.

🛠️ Предоставляемые инструменты

get_file_content :
- Извлекает и обрабатывает содержимое файла Figma
- Преобразует макет, стили и компоненты
- Возвращает структуру компонента React-ready GXP1
get_node_images :
- Извлекает графические ресурсы из Figma
- Поддерживает множество форматов (PNG, JPG, SVG)
- Настраиваемые параметры масштабирования GXP2

📦 Установка

Установка через Smithery

Чтобы автоматически установить Figma Design to React Converter для Claude Desktop через Smithery :

npx -y @smithery/cli install @sanjeev23oct/figma-mcp --client claude

Ручная установка

Клонируйте репозиторий:
git clone https://github.com/yourusername/figma-mcp.git cd figma-mcp
Установите зависимости:
npm install
Настройте свой токен доступа Figma:
cp .env.example .env # Add your Figma access token to .env

🎯 Настройка курсора IDE

Создайте файл .cursor/mcp.json в корневом каталоге вашего проекта:
mkdir -p .cursor touch .cursor/mcp.json
Для конфигурации сервера на основе Stdio:
{ "mcpServers": { "figma": { "command": "node", "args": ["d:/<folder>>/figma-mcp/build/index.js"], "env": { "FIGMA_ACCESS_TOKEN": "your figma token" }, "disabled": false, "alwaysAllow": [], "protocol": "stdio" } }

}

## 💻 Usage

1. Build the server:
 ```bash
 npm run build
 ```

2. Configure MCP settings based on your IDE:

- For VS Code (global settings):
  ```json
  // In settings.json
  {
    "mcpServers": {
      "figma": {
        "command": "node",
        "args": ["path/to/figma-mcp/build/index.js"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "your-token-here"
        }
      }
    }
  }
  ```

- For Cursor IDE:
  Use the `.cursor/mcp.json` configuration as described in the "Cursor IDE Setup" section above.
  This configuration will take precedence over VS Code settings when using Cursor IDE.

3. Use the MCP tools in your application:
```typescript
// Example: Fetch processed Figma content
const result = await useMcpTool("figma", "get_file_content", {
  fileKey: "your-figma-file-key"
});

🧩 Пример проекта

Ознакомьтесь с каталогом raccoon-game чтобы ознакомиться с полным примером использования этого сервера MCP для создания точной до пикселя реализации React дизайна Figma.

🔄 Процессинговый конвейер

Ввод : данные файла Figma через официальный API
Обработка :
- Преобразование стиля (цвета, типографика, эффекты)
- Трансформация макета (абсолютно для Flexbox)
- Отображение иерархии компонентов
- Оптимизация активов
Выходные данные : готовые к React данные компонента

📝 Лицензия

Лицензия Массачусетского технологического института

🤝 Вклад

Вклады приветствуются! Пожалуйста, ознакомьтесь с нашими правилами по внесению вкладов.

🙏 Благодарности

Команда Figma API для комплексного API
Модель контекстного протокола для спецификации MCP

Сделано с ❤️ пользователем [Ваше имя]

This server cannot be installed

security - not tested

license - not found

quality - not tested

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Связующее звено между проектами Figma и реализациями React, обеспечивающее точную конвертацию проектов Figma в приложения React путем обработки данных файлов Figma в удобный для React формат.

Related MCP Servers

mcp-figma
thirdstrandstudio
-
security
A
license
-
quality
Figma MCP with full API functionality
Last updated -
54
16
TypeScript
MIT License
Figma to React Native MCP
kailashAppDev
-
security
F
license
-
quality
Converts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
Last updated -
111
1
TypeScript
FigmaMind MCP Server
joao-loker
-
security
F
license
-
quality
Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
Last updated -
TypeScript
MCP Figma to React Converter
StudentOfJS
-
security
A
license
-
quality
Converts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.
Last updated -
14
TypeScript
MIT License

View all related MCP servers

Figma MCP Server