-
security-
license-
qualityConverts 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 -
19
5
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
Сделано с ❤️ пользователем [Ваше имя]
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
- -security-license-qualityExtracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
- -security-license-qualityConverts 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 -52MIT License
- -security-license-qualityEnables bidirectional synchronization between IDEs and Figma for Design System management, allowing developers to generate React components and synchronize design tokens, icons, and components across platforms.Last updated -