El mes pasado se llevó a cabo la «Config 2023» (el mega evento donde Figma anuncia las próximas actualizaciones), y como el CEO lo confeso, el 30% de los usuarios de Figma son desarrolladores, así que esta vez decidieron lanzar funcionalidades valiosas para desarrolladores, las cuales podemos utilizar dentro del nuevo Dev Mode (modo desarrollo), que consigues activando el switch en la parte superior derecha.

En este post, te voy a enseñar 6 funcionalidades que puedes usar en Dev Mode.

1. Listo para desarrollo

Como desarrollador seguramente te ha pasado que entras a Figma y ves una cantidad inmensa de frames que no sabes cuál es la pantalla o el flujo que está listo para ser desarrollado. Así que, ahora el diseñador puede agregar la etiqueta «Listo para desarrollo» a secciones completas y tú podrás ver esa etiqueta y filtrar las secciones que la tienen asignada. 🤓

2. Control de cambios

Con el control de cambios podrás ver de forma gráfica cuáles han sido los cambios aplicados en cada pantalla, quién los ha realizado y cuando, además podrás comparar las diferentes versiones, es decir, ya tendrás prueba de que los estilos nestaban allí o de que faltan elementos, porque ahora todo queda registrado. ⚠️

3. Visualización de componentes y estados

Ahora desde el DevMode podrás visualizar los estilos de componentes y sus diferentes estados o variantes de forma directa, sin tener que buscar en qué pantalla se usan.

4. Personalización de estilos

Si bien antes podías elegir la unidad de medida de los estilos (rem, px, etc.), ahora puedes ser más específico no solo estableciendo una unidad de medida, sino que puedes definir los estilos en función de la plataforma en la que estés trabajando, por ahora puedes elegir entre CSS, SwiftUI, UIKit, Compose y XML.

5. Documentación

En esta nueva versión puedes agregar un link relacionado con un componente específico o a una pantalla completa, por ejemplo el link a la documentación en GitHub o Storybook, o el link a la tarea de Jira o cualquier link relacionado.

6. Plug-ins

Y por último, ¡los plug-ins! Puedes encontrar una mayor variedad de plug-ins, algunos que generan el código de los componentes de Figma para ReactJs o VueJs o Angular y otros más que pueden mostrar los estilos formateados para Boostrap o TailwindCSS por ejemplo. Lo cual, definitivamente puede hacerte la vida más fácil. Aunque 👀 personalmente, los que he probado han sido demasiado lentos, el procesamiento para la generación del código toma demasiado tiempo y en ocasiones crashea completamente Figma. Si encuentras alguno más optimizado, compártemelo. 😬

¡El Dev Mode está disponible en el plan gratuito!

Y aunque hay rumores de que al finalizar el Beta algunas funcionalidades solo estarán disponibles en los planes de pago, es un buen momento para probarlas, ¿A ti, qué tan útil te parece el nuevo DevMode? No dudes en comentármelo.