Figma Dev Mode: el handoff dentro de Figma

Dev Mode es el espacio de Figma para inspeccionar diseños, medidas y código sin salir del archivo. Qué planes y asientos lo incluyen y qué ofrece al handoff.

info Definición Rápida

Dev Mode es el espacio de Figma pensado para el equipo de desarrollo. Permite inspeccionar diseños, ver código, descargar recursos, comparar cambios y gestionar el handoff dentro del mismo archivo, sin pedir capturas ni exportaciones sueltas. Se activa con el interruptor de Dev Mode o con Shift+D.

¿Qué ofrece?

Según la ayuda oficial de Figma, Dev Mode funciona en cualquier archivo de Figma Design. Estas son las funciones que más cambian el trabajo entre diseño y desarrollo:

Ready for dev. El diseñador marca frames, componentes, instancias o secciones como listos para desarrollo. Esos elementos aparecen bajo “Ready for development” en el panel de capas de Dev Mode. Así el equipo sabe qué se puede implementar y qué sigue en revisión.
Compare changes. El panel de inspección enlaza al historial del frame para comparar el diseño actual con versiones anteriores. En instancias de componentes ofrece además “Compare with main component”. Sirve para ver qué cambió respecto a versiones anteriores.
Anotaciones y medidas. El diseñador agrega medidas, especificaciones y notas de texto directamente sobre el diseño.
Código y plugins. La pestaña de plugins sugiere integraciones de la comunidad, como Jira, Storybook y GitHub, y salidas de código personalizables, por ejemplo Tailwind o React.
Code Connect. Asocia componentes del diseño con código real de tu sistema, de modo que el equipo ve ese código y no fragmentos autogenerados. Más detalle en Code Connect.
Extensión de Figma para VS Code. Permite inspeccionar diseños, ver comentarios y vincular archivos de código con componentes desde el editor.

La función más útil para el diseñador es que las anotaciones se mantienen al día. Según la documentación de Figma, todas las anotaciones de un archivo de diseño son visibles en Dev Mode por defecto, y los desarrolladores las ven actualizarse en tiempo real, lo que reduce las especificaciones desactualizadas.

¿Quién tiene acceso y en qué planes?

Dev Mode está disponible en los planes Professional, Education, Organization, Government y Enterprise, y no en Starter. Dentro de un plan de pago, depende del tipo de asiento: según la ayuda oficial, cualquier persona con un asiento Full o Dev puede acceder. Los asientos Collab y View no tienen acceso y solo cuentan con “inspección básica”. Quien no tenga acceso puede solicitarlo y el administrador gestiona esas solicitudes desde la configuración de aprobación de asientos.

Algunos matices que salen de la documentación oficial:

Para agregar anotaciones y medidas hace falta un asiento Full con acceso de edición al archivo. Para verlas basta un asiento Full o Dev y acceso de lectura.
Code Connect está disponible en los planes Professional, Organization y Enterprise.
Ready for dev está incluido en todos los planes con Dev Mode. El estado “Completed” requiere Organization o Enterprise.
El servidor MCP de Figma de escritorio requiere un asiento Dev o Full en un plan de pago. Para qué sirve, mira de Figma a código con MCP.

Los precios por asiento cambian y dependen de si se paga mensual o anual, así que consulta la página oficial de precios de Figma antes de decidir cuántos asientos comprar. Una regla útil: pide asiento Dev para quien solo implementa y no edita diseños, y reserva los Full para quien diseña.

¿Cómo se relaciona con el redline?

Dev Mode no sustituye al redline. Muestra las anotaciones que el diseñador escribió dentro de Figma, y se actualizan cuando el diseño cambia, pero no puede explicar la intención de un espaciado ni anticipar un estado que nadie dibujó. Esa parte sigue siendo documentación del diseñador.

La regla práctica: las medidas y los valores viven en Dev Mode; la intención, los estados y el comportamiento viven en la anotación y en la documentación del componente. Si un desarrollador tiene que adivinar lo segundo, el handoff está incompleto aunque Dev Mode funcione bien.

¿Cómo preparar un archivo para Dev Mode?

Nombra los componentes y capas con claridad. Lo que ve el desarrollador es lo que tú nombraste.
Usa variables y tokens en lugar de valores sueltos, para que el código refleje el sistema.
Dibuja o anota los estados que importan: foco, error, vacío, cargando y deshabilitado.
Marca como Ready for dev solo lo que está terminado. Si algo cambia después, Compare changes muestra la diferencia.
Abre el archivo en Dev Mode como lo haría un desarrollador y revisa qué ve.

Ejemplo

Ejemplo ilustrativo: un equipo de una tienda en línea tenía el hábito de enviar capturas del diseño a desarrollo cada vez que había un cambio. Las capturas quedaban viejas en dos días. Con Dev Mode, el equipo de desarrollo abre el mismo archivo y ve las medidas, los estados del botón y el código del componente conectado con Code Connect. El diseñador marca el flujo de pago como Ready for dev y deja una anotación en el estado de error, que es el único que no se veía en el prototipo. Cuando cambia el diseño, el equipo usa Compare changes para ver qué se modificó. Las capturas dejan de circular.

Para tu próximo handoff: abre Dev Mode, elige un componente y confirma que las medidas, los estados y los nombres de los tokens son los que quieres que se implementen.

¿Cuándo NO conviene?

Cuando el equipo de desarrollo no trabaja con Figma y prefiere otra herramienta de handoff. Dev Mode solo rinde si quienes implementan lo usan.
Cuando los archivos están desordenados. Un archivo sin componentes ni nombres consistentes hace que Dev Mode muestre ruido.
Cuando se usa para reemplazar la conversación. Ver el diseño no reemplaza hablar con quien lo implementa.
Cuando el presupuesto no alcanza para los asientos necesarios. En ese caso, conviene un documento de especificación bien hecho.

Errores comunes

Dejar componentes sin nombre claro, lo que confunde a quien inspecciona.
Enviar capturas en lugar de dar acceso al archivo vivo.
Asumir que un asiento View basta para quien implementa componentes: solo tiene inspección básica.
Marcar Ready for dev antes de tiempo y cambiar el diseño sin avisar.
Usar valores fijos en lugar de tokens, que se ven en el archivo pero rompen el sistema.
No revisar los estados que aparecen en Dev Mode.

Relacionado en la wiki

Para la lógica completa del traspaso, revisa el proceso de design handoff. La revisión posterior, cuando lo construido se compara con el diseño, está en design QA. Y para conectar los nombres de los componentes con el código, el Storybook es el lugar natural donde el sistema vive en la implementación.

Fuentes

Preguntas frecuentes

¿Qué es Dev Mode en Figma?

Es un espacio de trabajo de Figma pensado para el equipo de desarrollo. Permite inspeccionar diseños, ver código, descargar recursos, comparar cambios y gestionar el handoff dentro del mismo archivo. Se activa con el interruptor de Dev Mode o con Shift+D.

¿Quién puede usar Dev Mode?

Según la ayuda oficial de Figma, cualquier persona con un asiento Full o Dev. Los asientos Collab y View solo tienen inspección básica. Quien no tiene acceso puede solicitarlo y el administrador gestiona la solicitud.

¿Dev Mode está disponible en el plan gratuito?

No. La ayuda oficial indica que Dev Mode no está disponible en el plan Starter. Sí está en los planes Professional, Education, Organization, Government y Enterprise.

¿Qué es Ready for dev?

Es un estado que el diseñador asigna a frames, componentes, instancias o secciones para avisar que están listos para implementarse. Esos elementos aparecen bajo Ready for development en el panel de capas de Dev Mode.

¿Dev Mode reemplaza las anotaciones de redline?

Las complementa. Las anotaciones de Figma son visibles en Dev Mode y se actualizan en tiempo real, pero la intención y los estados que nadie dibujó siguen necesitando documentación.