Compara los cambios en Dev Mode
Este artículo es aplicable tanto a la anterior IU de Figma como a la nueva. Utiliza el botón en la parte izquierda de la página para seleccionar tu IU actual. Conoce UI3: el rediseño de Figma →
Antes de empezar
Quién puede utilizar esta función
Incluido en una licencia de Design completa en los planes Profesional, Organización y Empresarial.
Cualquier persona con acceso Dev Mode puede usar sus funciones.
Dev Mode permite a los desarrolladores ver cuándo se editó por última vez un marco o componente y comparar 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 función de comparación de cambios, siempre puedes hacer un seguimiento de las actualizaciones más recientes y mantener la precisión del código de producción.
Comparación de cambios
Si un marco o un componente se ha actualizado desde la última vez que lo viste, puedes comparar su historial de versiones. También puedes comparar componentes separados o instancias con modificaciones de diseño con el componente base.
- Selecciona un marco o componente de nivel superior.
¡Consejo! Mantén pulsada la tecla Mayús y haz clic para seleccionar dos componentes en el lienzo y compararlos entre sí.
- En la pestaña «Inspeccionar» de la barra lateral derecha, haz clic en Comparar cambios.
-
A
Historial de versiones
Puedes ver una línea de tiempo del historial del archivo, incluidas las versiones guardadas y guardadas automáticamente. Haz clic en una versión anterior para compararla con la versión actual. El historial de versiones solo se muestra cuando se compara un marco de nivel superior a lo largo del tiempo.
-
B
Ver capas editadas
En Capas, puedes ver cómo han cambiado las capas individuales de un recurso a lo largo del tiempo. Los cambios de capa se etiquetan de una de las maneras siguientes:
- Editada: la capa se editó entre la versión actual y la versión seleccionada
- Añadida: la capa se añadió 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 una vista una junto a la otra o superpuestas.
-
C
Lado a lado
Una vista en paralelo de la versión seleccionada y la versión actual de un recurso. Ajusta la configuración de ampliación del modal usando los botones de ampliar y alejar a la derecha.
-
D
Superposición
Una vista de superposición de la versión actual del marco sobre la versión seleccionada es útil para destacar 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 cambiar su visibilidad. Ajusta la configuración de ampliación del modal usando los botones de ampliar y alejar a la derecha.
-
E
Comparar código
Al seleccionar una capa editada, puedes visualizar el código actualizado entre la versión anterior y la versión actual. Esto es útil para garantizar que tu base de código esté acorde con los diseños más recientes.
Usa el menú desplegable para seleccionar tu idioma preferido para el panel de códigos y haz clic en para seleccionar tu unidad preferida.
Más información sobre el uso de fragmentos de código en Dev Mode →
-
F
Comparar propiedades
Al seleccionar una capa editada, se muestran las propiedades actualizadas, junto con los valores asignados de la versión anterior y la versión actual.
Comparar los cambios en la vista de enfoque
Cuando te centras en un diseño en Dev Mode, puedes aprovechar el historial de versiones en la vista de enfoque para comparar los cambios. Al comparar cambios, la interfaz es la misma que se detalla en Comparar cambios.
Para comparar los cambios en la vista de enfoque:
- Abre un archivo de Figma Design.
- En el lienzo, para el diseño en el que quieras centrarte, haz clic en el indicador de estado de desarrollo y selecciona Mostrar en vista de enfoque.
Si no hay nada seleccionado, la vista de enfoque muestra el historial de versiones en el lado derecho de la vista. - Para la versión que quieres comparar con la más reciente, haz clic en … y selecciona Comparar con la última versión.
- Opcionalmente, para obtener un enlace a la vista de enfoque que puedas compartir con otros, haz clic en Copiar enlace.
Antes de empezar
Quién puede utilizar esta función
Incluido en una licencia de Design completa en los planes Profesional, Organización y Empresarial.
Cualquier persona con acceso Dev Mode puede usar sus funciones.
Dev Mode permite a los desarrolladores ver cuándo se editó por última vez un marco o componente y comparar 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 función de comparación de cambios, siempre puedes hacer un seguimiento de las actualizaciones más recientes y mantener la precisión del código de producción.
Comparación de cambios
Si un marco o un componente se ha actualizado desde la última vez que lo viste, puedes comparar su historial de versiones. También puedes comparar componentes separados o instancias con modificaciones de diseño con el componente base.
- Selecciona un marco o componente de nivel superior.
¡Consejo! Mantén pulsada la tecla Mayús y haz clic para seleccionar dos componentes en el lienzo y compararlos entre sí.
- En la pestaña «Inspeccionar» de la barra lateral derecha, haz clic en Comparar cambios.
-
A
Historial de versiones
Puedes ver una línea de tiempo del historial del archivo, incluidas las versiones guardadas y guardadas automáticamente. Haz clic en una versión anterior para compararla con la versión actual. El historial de versiones solo se muestra cuando se compara un marco de nivel superior a lo largo del tiempo.
-
B
Ver capas editadas
En Capas, puedes ver cómo han cambiado las capas individuales de un recurso a lo largo del tiempo. Los cambios de capa se etiquetan de una de las maneras siguientes:
- Editada: la capa se editó entre la versión actual y la versión seleccionada
- Añadida: la capa se añadió 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 una vista una junto a la otra o superpuestas.
-
C
Lado a lado
Una vista en paralelo de la versión seleccionada y la versión actual de un recurso. Ajusta la configuración de ampliación del modal usando los botones de ampliar y alejar a la derecha.
-
D
Superposición
Una vista de superposición de la versión actual del marco sobre la versión seleccionada es útil para destacar 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 cambiar su visibilidad. Ajusta la configuración de ampliación del modal usando los botones de ampliar y alejar a la derecha.
-
E
Comparar código
Al seleccionar una capa editada, puedes visualizar el código actualizado entre la versión anterior y la versión actual. Esto es útil para garantizar que tu base de código esté acorde con los diseños más recientes.
Usa el menú desplegable para seleccionar tu idioma preferido para el panel de códigos y haz clic en para seleccionar tu unidad preferida.
Más información sobre el uso de fragmentos de código en Dev Mode →
-
F
Comparar propiedades
Al seleccionar una capa editada, se muestran las propiedades actualizadas, junto con los valores asignados de la versión anterior y la versión actual.
Comparar los cambios en la vista de enfoque
Cuando te centras en un diseño en Dev Mode, puedes aprovechar el historial de versiones en la vista de enfoque para comparar los cambios. Al comparar cambios, la interfaz es la misma que se detalla en Comparar cambios.
Para comparar los cambios en la vista de enfoque:
- Abre un archivo de Figma Design.
- En el lienzo, para el diseño en el que quieras centrarte, haz clic en el indicador de estado de desarrollo y selecciona Mostrar en vista de enfoque.
Si no hay nada seleccionado, la vista de enfoque muestra el historial de versiones en el lado derecho de la vista. - Para la versión que quieres comparar con la más reciente, haz clic en … y selecciona Comparar con la última versión.
- Opcionalmente, para obtener un enlace a la vista de enfoque que puedas compartir con otros, haz clic en Copiar enlace.