Skip to content

Lutimi/claude2figma

BranchesTags

Repository files navigation

cursor2figma 🎨

Tu bridge oficial entre Cursor/Claude y Figma

Fork de figma-console-mcp con mejoras específicas para flujos de trabajo AI-asistido.

¿Qué es cursor2figma?

cursor2figma es un servidor MCP (Model Context Protocol) que conecta Cursor IDE con Figma Desktop, permitiendo:

  • 🎯 Importación HTML → Figma (único en el mercado)
  • 🎨 Gestión completa de design systems (tokens, componentes, estilos)
  • 📸 Screenshots y debugging visual
  • 📝 FigJam, Slides, y herramientas de colaboración
  • ⚡ 94+ herramientas disponibles

Arquitectura

┌─────────────────┐     WebSocket      ┌─────────────────┐
│   Cursor IDE    │ ◄─────────────────► │  Figma Desktop  │
│  (Claude AI)    │    (Port 9223+)    │ (Desktop Bridge)│
└────────┬────────┘                    └─────────────────┘
         │
         ▼ MCP Protocol
┌─────────────────┐
│  cursor2figma   │
│   (este repo)   │
│                 │
│ • HTML Import   │
│ • Variables     │
│ • Componentes   │
│ • Screenshots   │
└─────────────────┘

Estructura del Proyecto

claude2figma/
├── cursor2figma/              # 🎯 Servidor MCP principal
│   ├── src/
│   │   ├── core/
│   │   │   ├── html-import/   # ⭐ Nuestra contribución
│   │   │   │   ├── html-to-figma.ts
│   │   │   │   └── index.ts
│   │   │   └── ...            # 94+ herramientas de southleft
│   ├── figma-desktop-bridge/  # Plugin Figma
│   └── dist/                  # Build output
│
├── deprecated/                # 🗄️ Código histórico
│   └── cursor2figma-old/      # Versión CDP anterior
│
├── .cursor/
│   ├── mcp.json               # Config MCP
│   └── rules/
│       └── figma-connection.mdc
│
├── landing.html               # 🎨 Ejemplo para importar
└── README.md                  # Esta documentación

Quick Start

1. Configurar Figma Access Token

  1. Ve a Figma Settings → Personal Access Tokens
  2. Crea un token con scopes:
    • ✅ File content (Read)
    • ✅ Variables (Read)
    • ✅ Comments (Read and write)
  3. Copia el token (figd_...)
  4. Edita %USERPROFILE%\.cursor\mcp.json:
{
  "mcpServers": {
    "cursor2figma": {
      "command": "node",
      "args": ["C:\\Users\\misat\\Desktop\\claude2figma\\cursor2figma\\dist\\local.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_TU_TOKEN_AQUI",
        "ENABLE_MCP_APPS": "true",
        "FIGMA_WS_PORT": "9223"
      }
    }
  }
}

2. Instalar Desktop Bridge Plugin

  1. Abre Figma Desktop
  2. Plugins → Development → Import plugin from manifest...
  3. Selecciona: %USERPROFILE%\.figma-console-mcp\plugin\manifest.json
  4. El plugin se abre automáticamente — déjalo abierto

3. Build e Instalar

cd C:\Users\misat\Desktop\claude2figma\cursor2figma
npm install
npm run build:local

4. Reiniciar Cursor

  1. Cierra Cursor completamente
  2. Vuelve a abrirlo
  3. Espera 5-10 segundos a que el MCP se cargue

5. Verificar Conexión

En el chat de Cursor, escribe:

Check Figma status

Debe responder:

{
  "connected": true,
  "transport": "websocket",
  "fileName": "Tu Archivo Figma"
}

Uso

Importar HTML a Figma

// Desde HTML inline
figma_import_html({
  html: "<!DOCTYPE html><html>...</html>",
  name: "Mi Landing",
  width: 1440
})

// O desde URL
figma_import_html({
  url: "http://localhost:8778/landing.html",
  name: "Izipay Landing",
  width: 1440
})

Otras Herramientas Principales

Herramienta Descripción
figma_get_variables Extraer design tokens
figma_batch_create_variables Crear 100+ tokens en batch
figma_get_component Metadata de componentes
figma_instantiate_component Crear instancias
figma_execute Ejecutar JavaScript arbitrario
figma_capture_screenshot Capturar screenshots
figjam_create_sticky Crear sticky notes
figma_list_slides Gestionar slides

Nuestra Contribución: HTML Import

Hemos desarrollado una funcionalidad única que no existe en ningún otro MCP de Figma:

Archivos:

  • cursor2figma/src/core/html-import/html-to-figma.ts — Lógica de extracción
  • cursor2figma/src/core/html-import/index.ts — Registro MCP

Características:

  • Renderizado con Playwright (headless Chromium)
  • Extracción de estilos computados (CSS aplicado)
  • Soporte para: gradientes, sombras, pseudo-elementos, textos, imágenes
  • Posicionamiento absoluto para fidelidad pixel-perfect

Solución de Problemas

"MCP server does not exist"

  1. Verifica que el build existe: cursor2figma/dist/local.js
  2. Reinicia Cursor
  3. Espera 10 segundos después de reiniciar

"WebSocket not available"

  1. Abre Figma Desktop
  2. Activa el plugin Desktop Bridge
  3. Verifica que no haya múltiples instancias del MCP corriendo

Múltiples instancias (problema anterior)

Si ves puertos 9223-9228 todos ocupados, mata los procesos:

Get-Process -Name "node" | Where-Object { $_.CommandLine -like "*cursor2figma*" } | Stop-Process

Diferencias con figma-console-mcp oficial

Aspecto cursor2figma figma-console-mcp
HTML Import ✅ Incluido ❌ No disponible
Nombre cursor2figma figma-console-mcp
Mantenimiento Nosotros + upstream southleft
Objetivo Cursor + Figma General

Roadmap

  • Mejorar soporte para fuentes web en HTML Import
  • Añadir importación de componentes React → Figma
  • Integrar con Code Connect
  • Visual regression testing

Licencia

Recursos

About

Workspace claude2figma: cursor2figma MCP server (HTML->Figma), skills, proyectos y herramientas Cursor/Claude

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages