Dev Mode
Creado para desarrolladores, Dev Mode te permite inspeccionar diseños y convertirlos en código fácilmente, sin modificar el archivo de diseño. Dev Mode se incluye en los puestos Full y Dev en todos los planes de pago.
Con la confianza de los equipos de
Genera un código mejor con el uso del contexto de Figma
Convierte los diseños de Figma en código preciso con el servidor MCP de Figma. Este lleva el contexto de Figma directamente a herramientas de codificación agénticas, como VS Code, Cursor, Windsurf y Claude, para un flujo de trabajo más eficiente.
Ten siempre a mano la información que necesitas para empezar a crear
Tu flujo de trabajo ahora es más eficiente que nunca gracias a las características diseñadas para simplificar la inspección de código y destacar lo que está ready for dev.
Compara los cambios en los diseños
Ve cuándo se editó un marco o componente por última vez o abre el historial de versiones para comparar los cambios en los diseños en paralelo.
Explora las especificaciones de diseño
Inspecciona las propiedades de los componentes, como los códigos de color y los valores de los tokens; verifica el espaciado y copia y pega código para agilizar tu proceso de desarrollo.
Cambia de vista para obtener mayor claridad
Haz clic en la vista Ready for Dev (Listo para desarrollo) para ver los diseños marcados como listos para desarrollo. También puedes hacer clic en componentes específicos para aislarlos en la vista Focus (Enfoque).
Crea con la extensión de VS Code
Trabaja en un entorno que ya conoces y adoras con la extensión de VS Code; menos cambios de pantalla y más codificación.
Dev Mode de Figma facilita una colaboración optimizada entre desarrolladores y diseñadores, lo que reduce la fricción entre los dos equipos — algo que nos encanta.
Sandra Schaus
Experta principal de UX, Servicios de Desarrollo Empresarial, Volkswagen Group Services
Conecta tu sistema de diseño y base de código para crear con consistencia
Dev Mode te permite crear diseños consistentes y reutilizables, y vincularlos sin problemas con tu base de código mediante Code Connect.
Vincula tu base de código con Code Connect
Code Connect te permite generar fragmentos listos para usar en un instante vinculando tu base de código con tu sistema de diseño existente en Figma.
Ve todas las opciones de componentes
El área de pruebas de componentes te permite ver todas las variaciones posibles de los componentes, observar sus comportamientos e, incluso, te proporciona el código para implementarlos. Solo elige la opción más adecuada.
Accede a las variables de diseño de todo el sistema
Mantén la coherencia de la marca y ahorra tiempo utilizando variables existentes o valores de tokens con las sintaxis de código correspondientes en Figma. Esto facilita mantener la consistencia en todas tus aplicaciones.
Lo que nos encanta de Code Connect es que ha reducido mucho los cambios de contexto que los desarrolladores tenían que hacer.
Gilson Hoffmeister
Estratega de Sistemas de Diseño, HP
Optimiza la comunicación con los socios de diseño
Las características como actualizaciones de estado, comentarios y anotaciones te mantienen en sintonía con los diseñadores durante todo tu proyecto.
Reduce el trabajo repetitivo con una mejor comunicación
Recibe notificaciones sobre los cambios de diseño en tiempo real para evitar trabajar con información desactualizada. La vista Ready for Dev (Listo para desarrollo) proporciona un resumen claro de lo que está listo para desarrollar, 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 claramente lo que debes desarrollar.
Verifica tus medidas
Los diseñadores pueden agregar medidas para ayudarte a visualizar el espaciado y el tamaño rápidamente, lo que asegura que nada se pierda en el camino 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
Desarrollamos Dev Mode para hacer más eficiente el desarrollo de productos, desde la idea hasta el código. Descubre nuestra filosofía de producto y lo que está por venir.
Cinco cosas que los diseñadores deben saber para realizar una entrega sin problemas
La entrega no es un momento, es un proceso. Entonces, ¿cómo agilizas el proceso de entrega cuando se trata de un flujo constante de diseños en proceso, comunicación y colaboración? La impulsora de diseño, Lauren Andres, comparte sus consejos.
Explora los plugins de la comunidad para desarrolladores
Explora miles de plugins creados por la comunidad de Figma que pueden ampliar tu forma de trabajar en la plataforma.