Imagina que cada vez que un desarrollador necesita un color, un ícono o una medida, puede obtenerlo directamente del archivo de diseño sin escribirte un solo mensaje. Eso es exactamente lo que permite DevMode en Figma: transformar el handoff de un proceso lleno de capturas de pantalla y preguntas repetitivas en una experiencia fluida y autónoma para el equipo de desarrollo.
¿Cómo preparar un archivo de diseño para desarrollo?
Antes de activar DevMode, es fundamental organizar el archivo. Lo ideal es crear una versión del flujo dedicada exclusivamente al desarrollo [0:43], donde se incluyan todas las vistas necesarias: la pantalla principal, los bottom sheets y las vistas de detalle.
En la parte superior se presenta el happy path, es decir, el camino ideal del usuario: la lista de transacciones, la acción para crear una nueva y el detalle resultante [1:03]. Debajo de cada pantalla se colocan las variantes, como un bottom sheet para ingresos frente a uno para gastos, o estados vacíos cuando no hay transacciones registradas [1:30].
Una vez que todo está en orden, se marca la sección como ready for dev con un solo clic en el ícono correspondiente [2:02]. Esto le indica a cualquier desarrollador que visite el archivo que esa página ya puede implementarse.
¿Qué cambia al activar DevMode?
Para entrar se presiona Shift + T o se cambia desde el selector inferior de Figma Design a DevMode [2:23]. La interfaz se transforma: el panel izquierdo muestra thumbnails de los frames y oculta automáticamente las páginas que no están marcadas como listas [2:38], eliminando ruido visual.
Desde la configuración superior se puede elegir el lenguaje de desarrollo —CSS para web o SwiftUI para iOS, por ejemplo— y la unidad de medida, ya sea píxeles o rems [3:07]. Al seleccionar cualquier elemento, las propiedades se adaptan al lenguaje elegido. Si se trabaja con SwiftUI, el fondo de una pantalla no muestra un código hexadecimal, sino la variable de diseño como surface primary [3:52].
¿Cómo se exportan assets desde DevMode?
Los íconos se pueden descargar directamente sin necesidad de seleccionar capa por capa [4:22]. Se configura el formato —SVG, PNG en 2X o 3X— y con un clic se genera la descarga completa. También es posible exportar imágenes individuales, como un placeholder de perfil [4:44].
Al seleccionar un componente como el transaction row, DevMode muestra un preview con toda su estructura: comportamiento, variantes, etiquetas y propiedades como el amount o el ícono [5:00]. Con la opción Explore component behavior [5:17] se puede probar cómo luce en modo gasto o ingreso, e incluso alternar entre dark mode y light mode [5:47].
¿Por qué son importantes las anotaciones para el desarrollador?
Hay decisiones de diseño que no son evidentes a simple vista [5:58]. Un botón flotante que debe mantenerse fijo en la esquina inferior derecha necesita una anotación explícita. Con la tecla Y se agrega una nota directamente sobre el elemento [6:19], asignando categoría —en este caso, para el desarrollador— y describiendo el comportamiento esperado junto con propiedades relevantes como padding, corner radius o alignment [6:35].
Lo mismo aplica para barras de navegación o elementos con sombras sutiles que podrían pasarse por alto. Al marcar la nota como development, el desarrollador la encuentra inmediatamente al inspeccionar esa capa [7:13].
¿Cómo funciona la colaboración dentro de DevMode?
DevMode también habilita un ambiente de colaboración directa [7:25]. Si un desarrollador encuentra una capa mal nombrada o un frame difícil de exportar, puede dejar un comentario etiquetando al diseñador responsable [7:58]. La conversación ocurre dentro del propio archivo hasta que el problema se resuelve y se marca como completado [8:28].
Antes de entregar, conviene revisar esta lista de verificación [8:43]:
- Las capas están nombradas con claridad.
- Las variables están vinculadas, sin hexadecimales sueltos.
- Los componentes clave tienen anotaciones visibles.
- Las secciones están marcadas como ready for dev.
- Los assets son fáciles de exportar.
Cuando todo cuadra, el desarrollador abre DevMode, selecciona cualquier capa y construye exactamente lo que se diseñó. Cero mensajes preguntando colores, cero confusiones con variables [9:04]. El siguiente paso natural es preguntarse si ese diseño podría convertirse directamente en algo funcional, y eso es precisamente lo que se aborda con Figma Make.
