Servidor MCP de Figma
Da a los agentes de IA acceso al contexto de diseño estructurado para generar código preciso e informado por el diseño.
Dev Mode
Desarrollo y diseño conectados en cada paso
El servidor MCP de Figma extrae los componentes del sistema de diseño directamente a tu base de código.
Pasa del lienzo al código y del código al lienzo.
Alterna fluidamente entre las diferentes partes del proceso de producción para cerrar la brecha entre la intención del diseño y el código.
Escribe en el lienzo
Crea diseños funcionales de Figma directamente desde tu agente de IA. Son editables, así que tu equipo puede ajustarlos en el lienzo.
Conecta código y diseño
Mapea los componentes de diseño a componentes de producción reales. De esa manera, el código nuevo usa tu sistema real.
Sintaxis del código en variables
Representa variables en el código para facilitar la implementación. El fragmento de código de la variable aparecerá al inspeccionar.
Los productos que amas se diseñan en Figma
Con Dev Mode, también tuvimos un gran cambio de mentalidad. Ayuda a diseñadores y desarrolladores a hablar el mismo idioma y nos permite repensar el proceso de creación de productos.
Andrei Garcia
Director de Sistemas de Diseño, HP
- 90 %
El 90 % de los desarrolladores vio mejoras en la calidad del trabajo
- 1,5 h
1,5 horas de trabajo ahorradas por semana
Mantente sincronizado sin tener que reunirte.
Convierte código en visuales revisables, rastrea cuándo los diseños están ready for dev y ve todas las actualizaciones en un feed hecho para desarrolladores.
Estados y notificaciones de Dev Mode
Rastrea cuándo los diseños están ready for dev. Recibe notificaciones cuando cambien los estados o se actualicen los diseños.
Compara cambios
Ve exactamente lo que cambió a lo largo del tiempo comparando una versión al lado de la otra.
Código a lienzo
Convierte la UI en vivo en un archivo editable de Figma para que los diseñadores puedan revisarla en contexto.
Recursos de Dev
Enlaza archivos de GitHub, tickets de Jira e historias de Storybook directamente a capas.
Encuentra rápidamente los detalles que necesitas para crear.
Comprende la estructura detrás de cada diseño. Experimenta, prueba y escribe código sin afectar el archivo de diseño.
Vista Focus
Obtén una vista aislada de los marcos que estás creando y filtra el resto del lienzo.
Inspección avanzada
Accede a fragmentos de código, propiedades del componente y datos de capa estructurados directamente desde el lienzo.
Área de pruebas de componentes
Explora de forma interactiva las propiedades y variantes de los componentes. Conoce qué componente usar y cómo usarlo.
Anotaciones
Los desarrolladores pueden obtener información sobre variables, propiedades y medidas para capas específicas.
