Dev Mode
Dev Mode es una herramienta creada para desarrolladores que te permite inspeccionar fácilmente los diseños y traducirlos a código, sin cambiar el archivo de diseño. Dev Mode está incluido en los puestos Full y Dev en todos los planes de pago.
Con la confianza de los equipos de
Genera un mejor código utilizando el contexto de Figma
Convierte diseños de Figma en código preciso con el servidor Figma MCP. Trae el contexto de Figma directamente a herramientas de codificación agentic, como VS Code, Cursor, Windsurf y Claude, para un flujo de trabajo más eficiente.
Encuentra la información que necesitas para empezar a crear rápidamente
Con funcionalidades diseñadas para simplificar la inspección de código y destacar lo que está ready for dev, tu flujo de trabajo será más fluido que nunca.
Compara cambios en los diseños
Consulta cuándo se editó por última vez un marco o un componente, o abre el historial de versiones para comparar los cambios de diseño en paralelo.
Explora a fondo las especificaciones de diseño
Inspecciona las propiedades de los componentes, como los códigos de color y los valores de token, verifica el espaciado y copia y pega el código para acelerar tu proceso de desarrollo.
Cambia el tipo de visualización para mayor claridad
Haz clic en la vista Ready for Dev para ver los diseños marcados como listos para la fase de desarrollo. También puedes hacer clic en componentes específicos para verlos de forma aislada en la vista de enfoque.
Crea con la extensión de VS Code
Trabaja en un entorno que ya conoces y que te encanta con la extensión de VS Code: menos cambios de pantalla y más tiempo para programar.
La comunicación y colaboración entre desarrolladores es mucho más fluida gracias a Dev Mode Figma, reduciendo los típicos piques entre ellos - y nos encanta :)
Sandra Schaus
Experta principal de UX de Servicios de Desarrollo Empresarial de Volkswagen Group Services
Conecta tu sistema de diseño y tu base de código para que tus creaciones sean más coherentes
El Dev Mode te otorga la capacidad de crear diseños coherentes y reutilizables, así como de vincularlos de forma fluida a tu base de código mediante Code Connect.
Vincula tu base de código con Code Connect
Code Connect te permite generar instantáneamente fragmentos listos para usar al vincular tu base de código con tu sistema de diseño existente en Figma.
Ver todas las opciones de componentes
El área de pruebas de componentes te permite ver todas las posibles variaciones de los componentes, observar su comportamiento, e incluso te proporciona el código para implementarlos. Lo único que tienes que hacer es seleccionar la opción más adecuada.
Accede a las variables de diseño al nivel del sistema
Mantén la coherencia de la marca y ahorra tiempo utilizando variables existentes o valores de token con las sintaxis de código correspondientes en Figma. Esto facilita mantener la coherencia en todas tus aplicaciones.
Lo que nos encanta de Code Connect es que reduce en gran medida la alternacia entre contexto que tenían que llevar a cabo antes los desarrolladores.
Gilson Hoffmeister
Estratega de sistemas de diseño, HP
Agiliza la comunicación bidireccional con los socios de diseño
Funciones como las actualizaciones de estado, los comentarios y las anotaciones hacen que estéis al tanto de todo lo que hacen los diseñadores durante todo el proceso.
Reduce el trabajo repetitivo con una comunicación mejor.
Recibe notificaciones de los cambios en el diseño en tiempo real para que nunca trabajes con información desactualizada. La vista Ready for Dev proporciona un resumen claro de lo que está listo para desarrollarse, lo que ha cambiado y lo que se ha completado.
Código con contexto
Revisa las anotaciones y los comentarios de los diseñadores para entender perfectamente qué es lo que se necesita desarrollar.
Verifica las medidas
Los diseñadores pueden añadir medidas para facilitar una visualización rápida del espaciado y el tamaño, asegurándose que no se pierda nada al pasar del diseño al código.
Explora más recursos de diseño y desarrollo
Todo lo que necesitas saber sobre Dev Mode
Hemos creado Dev Mode para hacer el desarrollo de productos más eficiente, desde la idea hasta el código. Descubre nuestra filosofía de producto y las próximas novedades.
5 cosas que los diseñadores deben saber para una entrega eficiente
Una entrega es un proceso, no un acontecimiento puntual. Así pues, ¿cómo se pueden agilizar las entregas cuando hay un flujo constante de diseños, comunicación y colaboración de WIP? Nuestra Impulsora de Diseño, Lauren Andres, comparte sus consejos.
Explora los plugins de la comunidad para desarrolladores
Explora miles de complementos desarrollados por la comunidad de Figma que pueden enriquecer tu manera de trabajar en Figma.