El "Dev Mode" (Modo de Desarrollo) en Figma es una característica diseñada para

ayudar a los desarrolladores a comprender mejor y extraer información útil de los

diseños creados en Figma, lo que facilita la traducción de esos diseños en código de
programación. Funciona permitiendo a los desarrolladores seleccionar elementos
en un diseño y obtener detalles técnicos sobre esos elementos.

Utiliza el modo de desarrollo para:

● Ver y copiar propiedades, valores y código de componentes de diseño.

● Ver qué ha cambiado desde la última vez que vio un archivo mediante la
comparación de versiones de fotogramas
● Inspeccionar y navegar por los archivos de diseño con interacciones sencillas
que muestran información importante sobre las capas.
● Encuentre rápidamente diseños listos para el desarrollo con los estados de las
secciones
● Agilice su flujo de trabajo con integraciones orientadas al desarrollador, como
Jira, Storybook y GitHub.
● Añada enlaces relevantes y recursos para desarrolladores a los componentes

Cómo funciona el "Dev Mode" en Figma:

Activar el Dev Mode

● Para activar el "Dev Mode," selecciona el elemento que has elegido y ve a la

barra lateral derecha.
● Busca la opción "Dev Mode" o "Modo de Desarrollo" y actívala.
Acceder a la Información Técnica

● Una vez que hayas activado el "Dev Mode," podrás acceder a información
técnica sobre el elemento seleccionado.
● Esto puede incluir detalles como coordenadas XY, dimensiones, valores de
relleno, colores, tipografía y otros atributos que son relevantes para los
desarrolladores.

Copiar CSS

● Una de las características más útiles del "Dev Mode" es la capacidad de

copiar el código CSS relacionado con el elemento seleccionado.

Esto permite a los desarrolladores tomar directamente el código CSS

generado por Figma y utilizarlo en sus proyectos de desarrollo web.

Facilita la Comunicación

● El "Dev Mode" también puede ayudar a los diseñadores y desarrolladores a

comunicarse de manera más efectiva sobre detalles técnicos específicos
dentro del diseño.
● Los desarrolladores pueden compartir directamente información sobre
elementos seleccionados con los diseñadores, lo que facilita la colaboración.

📢 Actualmente en fase beta abierta y es gratuito para todo el mundo hasta

finales de 2023. A partir de 2024, el acceso al modo Dev será pago.

La posibilidad de copiar valores, generar código y exportar activos seguirá siendo

gratuita y accesible desde el modo de diseño como espectador.
El acceso a las líneas rojas y la medición de distancias entre objetos también
seguirán siendo gratuitos y accesibles desde el Modo de desarrollo o como
espectador en el Modo de diseño.

Estas características podrían cambiar durante el periodo beta. Es posible que

experimente errores o problemas de rendimiento durante este tiempo.

Navegar por los diseños

En el modo de desarrollo, la barra lateral izquierda permite desplazarse fácilmente
entre los diseños marcados como listos para el desarrollo.

A.Ver qué activos están listos para el desarrollo.

El icono de modo de desarrollo indica qué páginas contienen frame, componentes,
instancias y secciones marcados como listos para el desarrollo. Los objetos del
lienzo marcados como listos aparecen bajo Listo para desarrollo en el panel de
capas del Modo de desarrollo.

Para marcar un activo como listo para dev:

1. En el modo de desarrollo, seleccione un marco, componente, instancia o

sección.
2. Haga clic en Marcar como listo para desarrollo en la barra de herramientas.

B. Saber cuándo se editó un fotograma por última vez

Puede ver cuándo se editó por última vez un marco bajo el nombre del marco en el
panel de navegación.

C. Navegar por frames y capas

En el modo Diseño, cualquiera puede agrupar contenidos relacionados en secciones

y marcar secciones como listas para el desarrollo. El modo de desarrollo dará
prioridad al contenido de una sección. Cualquier contenido fuera de una sección
sigue siendo visible en la barra lateral izquierda, pero está contraído por defecto.

Haga clic en un marco de la barra lateral izquierda para centrar en el lienzo.

Seleccione el marco en el lienzo para ver las capas anidadas en su interior. Al
seleccionar un marco, el panel de navegación cambia a un panel de capas y sólo
muestra las capas del marco de nivel superior seleccionado en ese momento.

Inspeccionar diseños
El panel de inspección muestra las especificaciones del diseño y la información
relevante de los componentes necesaria para comprender un diseño y
transformarlo en código.
 1

1
Fuente: https://help.figma.com/hc/en-us
A.Comparar cambios en el diseño

Si se han realizado cambios desde la última vez que visualizó un archivo, aparecerá
Comparar cambios junto a la información de la capa en el panel de inspección.
Haga clic en el enlace para abrir el modal del historial de marcos, donde podrá
comparar la versión actual con versiones anteriores del diseño.

También puede comparar un componente desvinculado con versiones anteriores y

con el componente principal al que estaba vinculado. Puede borrar su historial de
desvinculación para evitar ver información sobre su componente principal original.

B. Añadir enlaces externos y recursos para desarrolladores

Tanto los diseñadores como los desarrolladores pueden añadir enlaces a recursos
externos que pueden ayudar con la implementación de un componente. Esto puede
incluir enlaces a GitHub, Jira y Storybook, así como enlaces a VS Code que pueden
utilizarse con la extensión Figma para VS Code. Los recursos de desarrollo añadidos
a los componentes se propagan a todas las instancias de ese componente.

C. Construya más rápido con fragmentos de código personalizables

Haga clic en cualquier objeto del lienzo mientras está en modo Dev para rellenar la
sección Código en el panel de inspección. Dependiendo de lo que esté
seleccionado, se muestra una vista previa tipográfica o un modelo de caja, seguido
de fragmentos de código autogenerados para el objeto.

Puede seleccionar el idioma y las unidades que desea ver en el lienzo y en el código
generado, así como ampliar la funcionalidad de los fragmentos de código. Para
cambiar la selección de idioma y unidades

1. En la parte superior derecha de la sección Código, seleccione un idioma en el

desplegable.
2. Haga clic en Inspeccionar configuración y seleccione una unidad en el menú
desplegable.
D.Ver nombres y tipos de capas

El nombre de la capa seleccionada se muestra en la parte superior del panel de

inspección, junto con su tipo de capa (componente, instancia, frame, texto, etc.).
También puede ver cuándo se actualizó la capa por última vez.

E.Probar variaciones de componentes en el área de juego de componentes

Al seleccionar un componente o una instancia, verá una vista previa del

componente, un enlace al componente principal y enlaces a la documentación y los
recursos de desarrollo pertinentes.

La zona de juegos de componentes aparece en el panel de inspección cuando se

selecciona una instancia de componente. Utilice la zona de juegos para
experimentar con las distintas propiedades del componente sin cambiar el diseño
real.

F.Ver estilos aplicados

Visualice los estilos y variables aplicados a la capa seleccionada.

G.Descargar activos

El modo de desarrollo puede detectar automáticamente los iconos y presentarlos

como activos descargables para los desarrolladores. Si desea inspeccionar una
capa vectorial individual contenida en un icono, puede desactivar la detección
automática de iconos:

1. Haga clic en el menú principal de la barra de herramientas

2. Pase el ratón sobre Ver en el menú desplegable
3. Anule la selección de Detectar iconos automáticamente

Assets también le permitirá descargar nodos de imagen GIF y vídeo MP4.

E.Exportar

Puede aplicar ajustes de exportación a las capas para definir el formato y cualquier
otro ajuste de exportación. Figma admite los siguientes formatos de exportación:
PNG, JPG, SVG y PDF.

Utilizar extensiones del modo Dev

Los plugins de Dev Mode mejoran el flujo de trabajo de desarrollo automatizando
tareas, añadiendo nuevas funcionalidades e integrando herramientas utilizadas
para la documentación y la comunicación.

1. Manténgase al día con las tareas de desarrollo mediante la sincronización

con Jira a través de Figma, FigJam y Dev Mode
2. Conecte su sistema de diseño Figma y el sistema de diseño en código con
Storybook
3. Vincula los diseños al código para que siempre estén sincronizados, llevando
Github a Figma.

La pestaña Plugins en el Modo Dev muestra tus plugins usados recientemente, así
como los plugins recomendados por la Comunidad Figma.

Figma para VS Code

Figma para VS Code le permite navegar e inspeccionar archivos de diseño,

colaborar con diseñadores, realizar un seguimiento de los cambios de diseño y
acelerar la implementación del diseño, todo ello sin salir de su editor de texto. Mejora
la productividad de los desarrolladores eliminando el cambio de contexto y el
ajetreo necesarios para convertir los diseños en código.

1. Vea y responda a los comentarios y a la actividad en tiempo real.

2. Obtenga sugerencias de código basadas en los diseños
3. Vincule archivos de código a componentes de diseño

Puedes ver más sobre Dev Mode en este video 👉 Figma tutorial: Intro to Dev Mode