Servidor MCP de Figma
Concede a los agentes de IA acceso a un contexto de diseño estructurado para generar código preciso y basado en el diseño.
Dev Mode
Desarrollo y diseño, conectados en cada paso
El servidor MCP de Figma integra los componentes del sistema de diseño directamente en tu base de código.
Pasa del lienzo al código... y viceversa.
Muévete con fluidez entre las distintas fases 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 en Figma directamente desde tu agente de IA. Son editables, así que tu equipo puede retocarlos en el lienzo.
Conecta el código y el diseño
Asigna los componentes del diseño a los componentes reales de producción. Así, el código nuevo utilizará tu sistema real.
Sintaxis de código en variables
Representa variables en el código para una implementación más fácil. El fragmento de código de la variable aparecerá durante la inspección.
Los productos que amas se diseñan en Figma
Con Dev Mode, también hemos dado un gran giro en nuestra forma de pensar. Está ayudando a que los diseñadores y los desarrolladores hablen el mismo lenguaje, y nos ayuda a replantearnos el proceso de cómo crean los productos.
Andrei Garcia
Director, sistemas de diseño, HP
- 90 %
El 90 % de los desarrolladores notó mejoras en la calidad del trabajo
- 1,5 h
1,5 horas de trabajo ahorradas por semana
Mantente al día sin tener que reunirte con nadie.
Convierte el código en elementos visuales que se puedan revisar, controla cuándo los diseños están listos para el desarrollo y consulta todas las actualizaciones en un feed pensado para desarrolladores.
Estados y notificaciones de Dev
Controla cuando los diseños están “ready for dev”. Recibe notificaciones cuando los estados cambian o los diseños se actualizan.
Compara los cambios
Comprueba exactamente qué ha cambiado con el tiempo comparando las imágenes una al lado de la otra.
Del código al lienzo
Convierte la IU en vivo en un archivo editable de Figma para que los diseñadores puedan revisarla en su contexto.
Recursos de Dev
Vincula archivos de GitHub, tickets de Jira e historias de Storybook directamente a las capas.
Encuentra la información que necesitas para crear, rápidamente.
Comprende la estructura que hay detrás de cada diseño. Experimenta, prueba y programa sin afectar al archivo de diseño.
Vista de enfoque
Obtén una vista aislada de los marcos que estás creando, filtrando 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 para componentes
Explora las propiedades del componente y variantes de manera interactiva. Descubre qué componente usar y cómo hacerlo.
Anotaciones
Los desarrolladores pueden obtener información sobre variables, propiedades y medidas de capas concretas.
