Dev Mode permite a los desarrolladores ver cuándo se editó por última vez un marco o componente y cotejar los cambios realizados en diferentes puntos de su historial de versiones. Dado que el traspaso entre el diseño y el desarrollo puede ser iterativo, poder comparar los cambios y el historial de versiones aporta claridad al proceso. Con la comparación de cambios, siempre puedes realizar un seguimiento de las últimas actualizaciones y mantener el código de producción preciso.

Comparación de cambios

Si un marco o componente se ha actualizado desde la última vez que lo viste, puedes cotejar su historial de versiones. También puedes comparar componentes separados o instancias con anulación de diseño con el componente base. 

1. Selecciona un marco o componente de nivel superior.

   Consejo: Mantén presionado Shift y haz clic para seleccionar dos componentes en el lienzo y compararlos entre sí.

2. En la pestaña Inspect (Inspeccionar) de la barra lateral derecha,haz clic en Compare changes (Comparar cambios).

• A

  Historial de versiones

  Accede a una línea de tiempo del historial del archivo, incluidas las versiones almacenadas y guardadas automáticamente. Haz clic en una versión anterior para compararla con la actual. El historial de versiones solo se muestra cuando se compara un marco de nivel superior a lo largo del tiempo.

• B

  Ver las capas editadas

  En Capas, puedes ver cómo han cambiado las capas individuales de un activo con el tiempo. Los cambios en las capas se etiquetan de la siguiente manera:

  • Editada: La capa se editó entre la versión actual y la seleccionada.
  • Agregada: La capa se agregó entre la versión actual y la seleccionada.
  • Eliminada: La capa se eliminó entre la versión actual y la seleccionada.

  Al hacer clic en una capa de la lista, se amplía la capa seleccionada en la vista en paralelo o superpuesta.

• C

  Lado a lado

  Una vista en paralelo de la versión seleccionada y la versión actual de un activo. Ajusta la configuración de zoom del modal con los botones de acercar y alejar a la derecha.

• D

  Superposición

  Una vista superpuesta de la versión actual del marco sobre la versión seleccionada es útil para resaltar las ediciones más pequeñas. Usa el control deslizante de la derecha para ajustar la transparencia del marco actual o haz clic en para alternar su visibilidad. Ajusta la configuración de zoom del modal con los botones de acercar y alejar a la derecha.

• E

  Comparar el código

  Al seleccionar una capa editada, puedes ver el código actualizado entre la versión anterior y la actual. Esto es útil para asegurar que tu base de código esté alineada con los diseños más recientes.

  Selecciona tu idioma preferido para el panel de códigos en el menú desplegable y haz clic en para seleccionar tu unidad preferida.

  Obtén más información sobre el uso de fragmentos de código en Dev Mode →

• F

  Comparar las propiedades

  Al seleccionar una capa editada, se muestran las propiedades actualizadas, junto con los valores asignados de la versión anterior y la actual.

Comparar los cambios en la vista enfocada

Cuando te centras en un diseño en Dev Mode, puedes aprovechar el historial de versiones en la vista enfocada para comparar los cambios. Al comparar los cambios, la interfaz es la misma que se detalla en Comparar los cambios.

Para comparar los cambios en la vista enfocada:

1. Abre un archivo de Figma Design.
2. En el lienzo, para el diseño en el que deseas enfocarte, haz clic en el indicador de estado de desarrollo y selecciona Mostrar en vista enfocada.
   Si bien no se selecciona nada, la vista enfocada muestra el historial de versiones en el lado derecho de la vista.
3. En la versión que deseas comparar con la más reciente, haz clic en … y selecciona Compare to latest version (Comparar con la última versión).
   
4. Opcionalmente, para obtener un vínculo a la vista enfocada que puedes compartir con otros, haz clic en Copiar enlace.

Más información sobre la vista enfocada →