El Dev Mode de Figma es un espacio de trabajo pensado para perfiles de desarrollo que necesitan traducir diseños a código sin fricciones. Si trabajas en handoff entre diseño y front, aquí entiendes qué cambia en la interfaz, qué puedes inspeccionar y cómo marcar pantallas listas para implementar.

Cómo activo el Dev Mode en Figma y qué cambia en la interfaz

Activar el modo es directo: en la parte superior de la interfaz encuentras un toggle que enciende el espacio de desarrollo [01:02]. Al activarlo, verás aparecer elementos en color verde que te indican que estás dentro del entorno de desarrollo.

Antes existían tres pestañas en la sidebar derecha: diseño, prototipado e inspect. Ahora todo el panel de inspección se unificó dentro del Dev Mode, así que recuperas lo que ya tenías y sumas funcionalidades nuevas [00:32].

¿Qué es Dev Mode en Figma? Es un espacio de trabajo dedicado a desarrolladores donde pueden inspeccionar componentes, copiar código, comparar versiones y exportar assets sin salir de Figma.

Cuidado al compartir el archivo desde Dev Mode

Si le das al botón share estando dentro del modo, Figma te avisa que el archivo se abrirá automáticamente en Dev Mode para quien reciba el link [01:25]. Importante: si vas a compartir con un perfil que no es de diseño ni de desarrollo, sal del modo antes de copiar la URL.

Cómo inspecciono componentes y copio código desde Dev Mode

La funcionalidad central es la inspección. Puedes seleccionar un componente y ver directamente las variables que lo componen traducidas a código [02:05]. Desde ahí, el perfil de desarrollo copia ese fragmento en CSS u otros lenguajes.

Esto resuelve un problema clásico del handoff: las nomenclaturas. Si en diseño usas un token llamado space-md, en desarrollo se llamará igual, así que cuando alguien pida cambiar el valor de ese token, la actualización es directa y desaparecen las incoherencias de píxeles entre Figma y el producto final.

Cómo veo los cambios entre versiones de un componente

Cuando modificas un componente, por ejemplo añadiendo grosor al borde de un botón, Dev Mode muestra el control de versiones con dos vistas:

• Pantalla partida: a la izquierda el componente anterior, a la derecha el actual.
• Capa de cebolla: un elemento superpuesto sobre el otro con transparencia ajustable.

Esto es útil cuando los cambios son sutiles, como un ajuste de texto o de alineamiento, donde detectarlos a ojo sería complicado [03:18].

Qué plugins, integraciones y exportaciones puedo usar en Dev Mode

Una de las novedades más fuertes es que los desarrolladores ya pueden usar plugins dentro de Figma, algo que antes estaba limitado [03:55]. Tienen acceso a toda la community sin necesidad de tener un perfil propio para hacer browse.

Además, puedes linkear herramientas favoritas del flujo de desarrollo desde la esquina superior derecha:

• GitHub.
• Storybook.
• Jira.

Así, el equipo trabaja dentro de Figma conectado al resto del stack que ya usa día a día.

¿Cómo exporto un icono desde Dev Mode? Selecciona el icono en Inspect y elige entre copiar el código SVG inline, o exportar en SVG, PNG u otro formato. También puedes ver colores, variables y medidas tal como se hacía en el antiguo panel de inspección [04:45].

Cómo marco un diseño como Ready for Development

Marcar pantallas listas para implementar evita que desarrollo trabaje sobre diseños que aún se están moviendo. Tienes dos formas de hacerlo:

1. Desde dentro del Dev Mode: usa el botón disponible en la sidebar izquierda y se aplica al componente seleccionado.
2. Fuera del Dev Mode: crea una section que agrupe varios elementos o una interfaz completa, y dentro de esa section aparece el icono para marcarla como Ready for Development [05:35].

Cuando el perfil de desarrollo entre al modo, verá un icono en la página indicando qué elementos ya están aprobados para pasar a código. Con estas piezas, el handoff entre diseño y desarrollo se vuelve más fluido y la implementación corre más rápido.

¿Ya probaste Dev Mode con tu equipo? Cuéntame en los comentarios qué integración te resultó más útil.