.jpg)
En este artículo explicamos de forma práctica cómo conectar Figma con Cursor usando el servidor MCP de Figma y una alternativa comunitaria, todo traducido y simplificado para que arranques en minutos.
A) Método oficial recomendado: Figma Dev Mode MCP
Requisitos previos: Figma Desktop actualizada con un asiento Dev o Full en Professional u Organization o Enterprise. Cursor en su versión más reciente con soporte MCP activado.
Pasos rápidos para activar el servidor MCP en Figma Desktop: abre Figma Desktop, ve a Menu then Preferences y activa Enable Dev Mode MCP Server. Verás que el servidor se ejecuta localmente en la dirección https://127.0.0.1:3845/mcp. Guarda esa URL.
Añade el servidor en Cursor: en Cursor ve a Settings then Cursor Settings then MCP y añade un nuevo servidor global MCP. Usa una configuración similar a la siguiente sin comillas: { mcpServers : { Figma : { url : https://127.0.0.1:3845/mcp } } }
Verificación: abre el chat de Cursor (Agent o Composer) y escribe #get_code para comprobar que aparecen las herramientas de Figma como get_code, get_variable_defs y opcionalmente get_image. Si no ves nada reinicia Figma Desktop y Cursor.
Flujos de uso recomendados: flujo por selección y flujo por enlace. Selección: selecciona un frame o layer en Figma y pide a Cursor que genere el código para esa selección. Enlace: copia el enlace de un frame o layer en Figma, pégalo en el chat de Cursor y solicita que lo convierta en código o tokens.
Herramientas disponibles: get_code genera React con Tailwind por defecto pero puedes solicitar Next.js, Vue u otro framework. get_variable_defs lista variables y estilos usados, ideal para tokens. Activa get_image en Preferences Dev Mode MCP Server Settings para incluir capturas y habilita Code Connect para mapear nodos de Figma a tus componentes.
Solución de problemas rápida: debe ser Figma Desktop porque el servidor corre localmente por SSE. Comprueba la URL y el puerto https://localhost:3845/mcp. En Cursor revisa MCP Logs en el panel Output si hay errores de conexión o timeouts.
B) Alternativa comunitaria: servidor MCP que usa la API REST de Figma (stdio y token)
Si necesitas un servidor independiente que hable con la API de Figma para escenarios headless o remotos, puedes ejecutar un MCP local que use un Personal Access Token de Figma. Ejemplo de proyecto comunitario: GLips Figma-Context-MCP.
Consigue un Personal Access Token en Figma yendo a Settings then Security then Personal access tokens y genera uno nuevo. Copia el token una vez generado.
Ejemplo de configuración en Cursor para usar un servidor Framelink que arranque con npx: { mcpServers : { Framelink Figma MCP : { command : npx , args : [ -y , figma-developer-mcp , --figma-api-key=TU-KEY , --stdio ] } } }
Cómo usarlo: Opción 1 seleccionar un frame y chatear en Cursor. En Figma Desktop abre el archivo y selecciona el frame. En Cursor escribe #get_variable_defs para extraer colores, tipografías y espaciados y guárdalos como tokens en tokens.ts o en tailwind.config.ts. Luego pide #get_code y añade un prompt tipo: Genera una página Next.js con React y Tailwind a partir de mi selección actual. Usa componentes de mi carpeta components y mapea todos los valores a tokens, sin hex o px hardcodeados. Cursor generará page.tsx y componentes hijos si hacen falta. Itera pidiendo sustituciones, por ejemplo reemplazar botones crudos por tu componente Button personalizado.
Opción 2 copiar y pegar un enlace de Figma. En Figma copia el link del frame y pégalo en el chat de Cursor. Pide convertir el frame en una página responsive Next.js con React y Tailwind, usando tus componentes e importando assets exportados al directorio public/assets. También puedes pedir que Cursor exporte imágenes y vectores y actualice las importaciones automáticamente.
Qué opción elegir: usar selección cuando trabajas directamente en Figma y deseas feedback inmediato; usar enlace cuando recibes diseños por Slack o documentación y necesitas que Cursor extraiga el nodo remoto.
Por qué confiar en Q2BSTUDIO: en Q2BSTUDIO somos una empresa especializada en desarrollo de software a medida y aplicaciones a medida con experiencia en inteligencia artificial, ciberseguridad y servicios cloud. Si buscas integrar flujos de diseño a código y desplegar soluciones a producción, nuestro equipo puede ayudarte a automatizar procesos, crear agentes IA y proyectos de IA para empresas. Con nosotros puedes acelerar proyectos que incluyen servicios cloud aws y azure, seguridad y pentesting, y soluciones de inteligencia de negocio con power bi.
Si necesitas que desarrollemos una aplicación a medida o ampliar tus capacidades con IA visita nuestra página de servicios de aplicaciones a medida en servicios de aplicaciones y software a medida y para proyectos de inteligencia artificial consulta nuestra oferta de inteligencia artificial para empresas.
Palabras clave incorporadas para mejorar posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi.
Resumen final: activar Dev Mode MCP Server en Figma es la vía más directa y fiable. La alternativa comunitaria con PAT aporta flexibilidad para entornos remotos. Si necesitas ayuda técnica o integración completa, Q2BSTUDIO puede implementarlo como parte de una solución integral de software a medida, cloud y AI.
