Colaboración con desarrollo: Dev Mode de Figma

¿Qué es DevMode en Figma?

DevMode es una innovadora herramienta desarrollada por Figma para facilitar la colaboración entre los equipos de diseño y desarrollo. Esta modalidad de trabajo permite a los desarrolladores entender y aplicar rápidamente las especificaciones generadas en diseño, mostrando eficientes flujos de trabajo y reduciendo discrepancias en la implementación del código.

¿Cómo activar DevMode y su interfaz?

Para activar el modo DevMode en Figma, se debe utilizar un toggle en la parte superior de la interfaz. Una vez activado, verás elementos resaltados en verde, indicando que estás en DevMode. Es importante recordar no compartir enlaces en este modo si no vas a trabajar con perfiles de diseño o desarrollo, ya que abrirá directamente en DevMode.

La interfaz de DevMode se distingue por integrar el panel de inspección anterior, ahora con nuevas funcionalidades:

• Inspección de elementos: Posibilita visualizar variables y componentes directamente en código, permitiendo a los desarrolladores copiar CSS y otros lenguajes.
• Control de versiones: Permite ver los cambios en los elementos y componentes, lo que facilita identificar modificaciones desde el diseño hasta el desarrollo.
• Plugins: Ahora, los desarrolladores pueden integrar plugins y herramientas externas directamente, facilitando su incorporación en los proyectos de diseño.

¿Cómo facilita el control de versiones el DevMode?

A través del control de versiones, DevMode permite realizar comparaciones visuales directas de componentes antes y después de cambios. Para los desarrolladores, es una herramienta esencial para identificar y entender cambios sutiles y adaptar su trabajo de manera acorde:

• Visualización en pantalla dividida: Muestra tanto el estado anterior como el actual de un componente.
• Modo capa de cebolla: Ofrece una superposición de cambios para cambios más transparentes.

Esta funcionalidad es crucial al realizar cambios menores como ajustes de texto o alineamientos, ya que garantiza que el desarrollo evoluciona a la par con el diseño previsto.

¿Cómo se integran plugins y herramientas en DevMode?

Figma ha mejorado la capacidad de los desarrolladores para utilizar plugins dentro del DevMode, permitiendo una personalización sin precedentes:

• Acceso directo a plugins de la comunidad: Sin necesidad de perfiles en la comunidad de Figma, los desarrolladores pueden explorar y emplear diversas herramientas.
• Integración de herramientas favoritas: Figma permite enlaces directos a herramientas de desarrollo esenciales como GitHub, Storybook y Anima.

Con estas integraciones, los desarrolladores experimentan una transición fluida y cómoda entre códigos y diseños, optimizando el flujo de trabajo y la productividad.

¿Qué opciones de exportación brinda el DevMode?

El DevMode introduce opciones avanzadas para exportar y compartir activos de diseño:

• Exportar iconos y SVGs: Directamente desde Figma, se pueden copiar iconos en formato SVG o exportar en formatos populares como PNG.
• Visualización de colores y variables: Ayuda a mantener consistencia y claridad en diseños mediante la inspección de códigos y variables definidas.
• Medidas y tipo de texto: Ofrece una inspección detallada de medidas y tipos textuales, similar al anterior panel de inspección.

Estas funcionalidades son claves para asegurar que los materiales de diseño se transfieran correctamente al código, minimizando errores y retrabajos.

¿Cómo marcar diseños como listos para desarrollo?

Figma introduce en DevMode dos métodos para marcar los diseños como "listos para el desarrollo":

1. Botón en la barra lateral izquierda dentro de DevMode: Aplica la marca directamente a un componente específico.
2. Sección fuera de DevMode: Permite agrupar múltiples elementos, colocando un ícono que señala su preparación para la implementación.

Al facilitar la identificación de elementos listos para el desarrollo, esta funcionalidad mejora significativamente la comunicación entre equipos de diseño y desarrollo, acelerando el proceso de implementación.

Invitamos a los equipos de diseño y desarrollo a explorar y adoptar DevMode para optimizar sus proyectos y mantener la eficiencia y precisión a lo largo de todo el proceso.