-
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
Servidor MCP de Figma
Un servidor de Protocolo de Contexto de Modelo (MCP) que conecta los diseños de Figma con las implementaciones de React. Este servidor permite la conversión con precisión de píxeles de diseños de Figma en aplicaciones de React procesando los datos de los archivos de Figma y proporcionándolos en un formato compatible con React.
🚀 Características
Integración de la API de Figma : conexión directa a la API de Figma para acceder a los archivos de diseño
Salida lista para React : procesa datos de Figma en un formato compatible con React
Procesamiento de estilos : convierte los estilos de Figma en CSS/componentes con estilo
Gestión de activos : gestiona activos de imagen y componentes SVG
Procesamiento de diseño : convierte el diseño automático de Figma a Flexbox
Seguridad de tipos : creado con TypeScript para una verificación de tipos confiable
🛠️ Herramientas proporcionadas
get_file_content:Obtiene y procesa el contenido del archivo Figma
Convierte diseño, estilos y componentes.
Devuelve la estructura del componente preparada para React GXP1
get_node_images:Recupera recursos de imagen de Figma
Admite múltiples formatos (PNG, JPG, SVG)
Opciones de escalado configurables GXP2
📦 Instalación
Clonar el repositorio:
git clone https://github.com/yourusername/figma-mcp.git cd figma-mcpInstalar dependencias:
npm installConfigura tu token de acceso de Figma:
cp .env.example .env # Add your Figma access token to .env
Configuración del IDE del cursor
Crea el archivo
.cursor/mcp.jsonen la raíz de tu proyecto:mkdir -p .cursor touch .cursor/mcp.jsonPara la configuración del servidor basada en 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"
});
🧩 Proyecto de ejemplo
Consulta el directorio raccoon-game para ver un ejemplo completo del uso de este servidor MCP para crear una implementación React con píxeles perfectos de un diseño de Figma.
🔄 Tubería de procesamiento
Entrada : datos del archivo Figma a través de la API oficial
Procesando :
Conversión de estilo (colores, tipografía, efectos)
Transformación de diseño (absoluta a Flexbox)
Mapeo de jerarquía de componentes
Optimización de activos
Salida : Datos del componente listo para React
📝 Licencia
Licencia MIT
🤝 Contribuyendo
¡Se agradecen las contribuciones! Por favor, lea nuestras normas de contribución.
🙏 Agradecimientos
Equipo de API de Figma para la API integral
Protocolo de contexto de modelo para la especificación MCP
Hecho con ❤️ por [Tu nombre]
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.
Un puente entre los diseños de Figma y las implementaciones de React que permite la conversión con precisión de píxeles de los diseños de Figma en aplicaciones React mediante el procesamiento de los datos de archivos de Figma en un formato compatible con 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 -