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: FigmaMind MCP Server

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

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 :

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

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" } }

}

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

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

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

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

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

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

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

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

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

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

📝 Лицензия

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

🤝 Вклад

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

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

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

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

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