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 для надежной проверки типов.

Related MCP server: MCP Figma to React Converter

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

1. get_file_content :

   • Извлекает и обрабатывает содержимое файла Figma

   • Преобразует макет, стили и компоненты

   • Возвращает структуру компонента React-ready GXP1

2. 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

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

1. Клонируйте репозиторий:

   git clone https://github.com/yourusername/figma-mcp.git
   cd figma-mcp

2. Установите зависимости:

   npm install

3. Настройте свой токен доступа Figma:

   cp .env.example .env
   # Add your Figma access token to .env

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

1. Создайте файл .cursor/mcp.json в корневом каталоге вашего проекта:

   mkdir -p .cursor
   touch .cursor/mcp.json

2. Для конфигурации сервера на основе 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.

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

1. Ввод : данные файла Figma через официальный API

2. Обработка :

   • Преобразование стиля (цвета, типографика, эффекты)

   • Трансформация макета (абсолютно для Flexbox)

   • Отображение иерархии компонентов

   • Оптимизация активов

3. Выходные данные : готовые к React данные компонента

📝 Лицензия

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

🤝 Вклад

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

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

• Команда Figma API для комплексного API

• Модель контекстного протокола для спецификации MCP

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