Qué es el Dev Mode de Figma

Antes de nada, empecemos por las presentaciones, en este caso del Figma Dev Mode.

El Modo Desarrollador (Dev Mode) de Figma es una funcionalidad diseñada para mejorar la colaboración entre diseñadores y desarrolladores, facilitando el proceso de convertir diseños en código de manera más eficiente y precisa.

Proporciona a los desarrolladores una vista más detallada y técnica de los archivos de diseño, permitiéndoles acceder a información concreta como especificaciones de diseño, medidas, propiedades de los elementos, colores, fuentes, y más, directamente desde la interfaz de Figma.

Propósito y evolución del Modo Dev

En cuanto al propósito del modo Dev, podemos decir que este modo está pensado para agilizar el proceso de desarrollo y diseño.

Es más, esta herramienta es una parte clave de la estrategia de Figma para mejorar la colaboración entre diseñadores y desarrolladores, acelerar los procesos de entrega y personalizar los flujos de trabajo de diseño y desarrollo.

Respecto a su evolución, desde que se lanzó su versión beta gratuita el pasado junio de 2023, se han implementado más de 200 nuevas funcionalidades y correcciones, todo ello en respuesta a las sugerencias de nuestros usuarios.

El 31 de enero se terminó la beta gratuita y para acceder a la herramienta se requiere una suscripción de pago.

Los precios van desde los $25 hasta los $35. Todo depende del plan que elijas.

Si estás pensando en usarlo, fórmate primero con nuestro Curso de Figma.

Importancia en la actualidad

El Modo Desarrollador (Dev Mode) de Figma es importante por varias razones clave que impactan directamente en la eficiencia y eficacia de los equipos de diseño y desarrollo:

• Mejora la colaboración entre diseñadores y desarrolladores. Al proporcionar una vista detallada y técnica de los diseños, el Dev Mode facilita una mejor comunicación y comprensión entre diseñadores y desarrolladores. Esto ayuda a asegurar que las implementaciones finales sean fieles a los diseños originales, minimizando las iteraciones y malentendidos.
• Acelera el proceso de desarrollo. Con herramientas que permiten la visualización de especificaciones de diseño, la generación de código y la integración de anotaciones, los desarrolladores pueden trabajar más rápidamente y con mayor precisión, reduciendo el tiempo necesario para convertir los diseños en proyectos funcionales.
• Permite la personalización y automatización de flujos de trabajo. La capacidad de utilizar plugins para Figma y personalizar el entorno según las necesidades específicas del equipo permite a los usuarios optimizar sus procesos, integrar mejor sus sistemas de diseño y desarrollo y automatizar tareas repetitivas.
• Integración con herramientas externas. Como veremos más adelante, al facilitar la integración con otras herramientas como VS Code y Jira, el Dev Mode se convierte en una parte más cohesiva del ecosistema de desarrollo, permitiendo a los equipos mantener sus flujos de trabajo dentro de las herramientas que ya utilizan.

Nuevas funcionalidades en el Modo Dev

Relacionado con el apartado anterior, en los siguientes párrafos mencionaremos una a una las nuevas funcionalidades del Figma Dev Mode.

Todas aportan grandes beneficios a los profesionales involucrados en este tipo de proyectos.

Anotaciones

La preparación de archivos para su entrega es casi un arte.

Actualmente, los diseñadores anotan manualmente las medidas y detalles, organizando meticulosamente sus diseños para proporcionar a los desarrolladores todo el contexto necesario para ejecutar el proyecto con seguridad.

Para hacer este proceso más eficiente, se ha incorporado la funcionalidad de anotaciones en el Modo Desarrollador.

Mediante el uso de anotaciones, los diseñadores pueden compartir información adicional, especificaciones y dimensiones directamente vinculadas a los diseños, permitiendo a los desarrolladores acceder a estas notas de manera sencilla mientras trabajan.

De este modo se garantiza que no se omitan detalles cruciales durante el proceso de entrega.

Comparación y contexto

Además de las anotaciones, se ha mejorado la funcionalidad de comparación de cambios para poder identificar diferencias tanto de forma visual como a nivel de código.

Buscando optimizar la entrega de proyectos, también se han integrado diversas herramientas que los equipos utilizan habitualmente en sus procesos únicos.

Por ejemplo, gracias a la aplicación de Figma para Jira, ahora es posible integrar el contexto de los diseños directamente en los issues de Jira y recibir notificaciones cada vez que haya modificaciones en los diseños

Así, el equipo siempre estará al tanto de las últimas actualizaciones.

FUENTE: https://www.figma.com/blog/dev-mode-ga/

Plugins para Figma

El código y las necesidades de cada organización son únicos.

Por ejemplo, mientras algunas empresas se apoyan intensivamente en la generación automática de código, otros equipos pueden preferir trabajar con frameworks específicos como Tailwind o Bootstrap

O incluso seguir un sistema de diseño que incluya componentes con su código predefinido.

Para cubrir estas variadas y específicas demandas, han puesto a nuestra disposición una amplia gama de plugins de generación de código, permitiéndonos crear código ajustado a nuestras preferencias, ya sea HTML, React o Tailwind, entre otros.

FUENTE: https://www.figma.com/blog/dev-mode-ga/

Extensión de Figma para VS Code

La transición constante entre diferentes herramientas puede entorpecer el ritmo de trabajo de los equipos y generar contratiempos.

Con la finalidad de atender esta problemática, la extensión de Figma para VS Code facilita a los desarrolladores el acceso y la inspección de los diseños sin salir de VS Code.

La estructura de los archivos de Figma, que permite múltiples páginas y un lienzo infinito para cada una, si bien es ideal para los diseñadores, puede representar un obstáculo para los desarrolladores al buscar elementos específicos.

Por ello, se ha reconfigurado la experiencia de uso de Figma en VS Code, optimizando tanto la navegación como la localización de archivos de diseño.

Ahora, en vez de navegar extensamente por el lienzo, es posible seleccionar de manera sencilla entre una organización de marcos en forma de rejilla y visualizar cada marco de manera individualizada.

Integración con herramientas externas

El Modo Desarrollador o Figma Modo Dev se puede integrar con varias herramientas externas para mejorar la colaboración entre diseñadores y desarrolladores, optimizar flujos de trabajo y facilitar la implementación de diseños.

Algunas de las integraciones más relevantes son:

• Visual Studio Code (VS Code). La extensión de Figma para VS Code permite a los desarrolladores acceder e inspeccionar diseños directamente desde su entorno de desarrollo integrado, lo que facilita la transición entre el diseño y el código.
• Jira. Con la aplicación Figma para Jira, los equipos pueden integrar el contexto de diseño en los issues de Jira, permitiendo una mejor gestión de proyectos y seguimiento de tareas relacionadas con el diseño. Además, esta integración permite recibir notificaciones en Jira cuando los diseños se actualizan.

Variables y flexibilidad en diseño

Las variables en el diseño y desarrollo tienen un impacto significativo en la eficiencia, flexibilidad y adaptabilidad de los proyectos.

Estas variables pueden referirse a elementos de diseño como colores, tipografías, espaciados, así como a aspectos de desarrollo como entornos, configuraciones, y datos dinámicos.

La adaptación a diferentes contextos, como dispositivos, plataformas, y preferencias de usuarios, es crucial para el éxito de un proyecto.

Prototipado avanzado con Dev Mode

El prototipado avanzado en Figma se refiere al conjunto de herramientas y funcionalidades que permiten a los diseñadores crear interacciones complejas, animaciones, y transiciones entre diferentes estados de la interfaz de usuario.

Es decir, sirve para simular la experiencia del usuario final de una manera muy cercana a la aplicación o sitio web real.

Estas funcionalidades incluyen triggers de interacción como clics, hovers, y scrolls; animaciones con Smart Animate; overlays para simular menús y modales; y el posicionamiento fijo de elementos.

Aunque el Modo Desarrollador no se centra directamente en el prototipado, los diseñadores pueden utilizar las especificaciones detalladas y las herramientas de generación de código del Modo Desarrollador para asegurarse de que los prototipos avanzados creados en Figma se traduzcan eficientemente en código por parte de los desarrolladores.

Esto incluye el uso de variables de diseño, componentes reutilizables, y sistemas de diseño que pueden ser consistentemente aplicados tanto en el prototipado como en el desarrollo.

Si quieres profundizar en este tema, fórmate con nuestra Carrera de prototipado de webs y apps con Figma.

Optimización del diseño automático

Con las nuevas capacidades de Figma, el diseño automático se ha visto mejorado en varios aspectos.

Así, por ejemplo, Figma ha optimizado la creación de diseños responsivos.

Esta herramienta utiliza restricciones en los elementos de diseño para mantener su posicionamiento y tamaño relativo, facilitando la creación de diseños responsivos que se adaptan automáticamente a diferentes tamaños de pantalla.

Impacto de las nuevas mejoras

En general, las mejoras en Figma ayudarán a los equipos de diseño y desarrollo a trabajar de manera más fluida, colaborativa y eficiente.

Al reducir la fricción en los flujos de trabajo y proporcionar herramientas más poderosas para la comunicación y la personalización, es probable que veamos una mejora significativa en la creatividad y la productividad de los equipos.

Aun así y de manera más precisa, podemos añadir que:

• Aumentará la eficiencia y reducirá la necesidad de comunicación constante entre diseñadores y desarrolladores.
• Se simplificará la colaboración y permitirá a los equipos mantenerse al tanto de los cambios en tiempo real.
• Aumentará la flexibilidad y la capacidad de personalización de los flujos de trabajo, lo que a su vez puede conducir a un aumento en la creatividad.
• Se favorecerá la concentración en el trabajo y se evitarán interrupciones innecesarias.

Conclusiones

En resumen, las mejoras anunciadas para el Modo Desarrollador de Figma o Figma Modo Dev prometen revolucionar la forma en que los equipos de diseño y desarrollo colaboran en la creación de aplicaciones y sitios web.

La introducción de anotaciones, la capacidad de comparar cambios visualmente y en código, la flexibilidad para crear plugins personalizados y la extensión de Figma para VS Code son avances que prometen impulsar la eficiencia y la creatividad en los flujos de trabajo de diseño y desarrollo.

Estas mejoras no solo agilizarán los procesos y reducirán la necesidad de comunicación constante, sino que también permitirán a los equipos personalizar sus flujos de trabajo para adaptarse a sus necesidades específicas.

En definitiva, esto conducirá a una mayor productividad y una colaboración más estrecha entre diseñadores y desarrolladores, lo que, a su vez, se traducirá en la creación de productos digitales más innovadores y exitosos.