Vista de enfoque en Dev Mode

Cuando utilices la vista Listo para el Desarrollo en el Dev Mode para explorar secciones, marcos y componentes listos para el desarrollo, a menudo querrás inspeccionar diseños específicos más de cerca. Para obtener detalles de los diseños que están listos para el desarrollo, utiliza la vista de enfoque de Dev Mode. En esta vista, podrás ver lo siguiente:

• Todas las mismas herramientas que normalmente tienes disponibles en la barra de herramientas del Dev Mode.
• Las mismas pestañas Inspect y Pluginsa las que tienes acceso en la experiencia completa del Dev Mode.
• Un historial de versiones con descripciones específicas del diseño que estás viendo que puedes utilizar para comparar diferentes versiones y ver los cambios a lo largo del tiempo.
• Una forma sencilla de ampliar y explorar las capas de un diseño determinado listo para su desarrollo.
• La posibilidad de marcar el trabajo como completo para un diseño específico.

Para acceder a la vista de enfoque:

1. Abre un archivo de Figma Design.

2. Haz clic en Listo para el Desarrollo en la barra lateral izquierda.

   Se abre la vista Listo para el Desarrollo, en la que se muestra una lista de todos los diseños marcados con un estado de desarrollo.

3. Haz clic en el diseño en el que deseas enfocarte.

Alternativamente

1. Abre un archivo de Figma Design.

2. En el lienzo, para el diseño en el cual deseas enfocarte, haz clic en el estado de desarrollo y selecciona Show in focus view.

   

3. Opcionalmente, haz clic en Copy link to focus view para obtener un enlace del diseño en el que te estás enfocando, el cual puedes compartir con otros.

Se abre la vista de enfoque, en la que se muestra lo siguiente:

• El diseño que querías inspeccionar aparece en el centro de la vista de enfoque. Puedes utilizar las herramientas del Dev Mode para medir, anotar y comentar el diseño.
• Las pestañas Inspect y Plugins, donde puedes hacer cosas como generar códigos, ver las propiedades del diseño, exportar o descargar varios y ejecutar plugins para el Dev Mode.
• El botón Mark as completed, que se utiliza para confirmar que el trabajo de desarrollo para el diseño está hecho.

Navega

En la vista de enfoque, Figma ofrece varias formas de navegar a otras áreas del Dev Mode.

Para ir a la vista Listo para el Desarrollo, en la esquina superior izquierda de la vista de enfoque, haz clic en Ready for dev.

Para ver el diseño en el contexto del lienzo, en la esquina superior derecha de la vista de enfoque, haz clic en y, a continuación, selecciona Show on page.

Para volver a la zona de la interfaz de Figma que estabas utilizando antes de entrar en la vista de enfoque, en la esquina superior derecha de la vista de enfoque, haz clic en . Si entraste en la vista de enfoque desde el lienzo, volverás a la posición en la que estabas en el lienzo. Si entraste desde la vista Listo para el Desarrollo o utilizando un enlace, volverás a la vista Listo para el Desarrollo.

Explorar capas

La vista de enfoque proporciona una forma sencilla de explorar las capas individuales de un diseño determinado. El panel de capas de la vista de enfoque aparece cuando seleccionas una o más partes del diseño.

Paneles Inspect y Plugins

Los paneles Inspect y Plugins son los mismos que los del Dev Mode normal, pero limitados al diseño que estás viendo. Para aprender a utilizar los paneles, consulta Guía del Dev Mode →.

Historial de versiones

Al igual que el historial de versiones disponible para los archivos, la vista de enfoque incluye un historial de versiones anotado que realiza un seguimiento de las iteraciones de trabajo en el diseño.

Normalmente, el historial de versiones de todo el archivo muestra todas las versiones de un archivo, pero a menudo puede haber mucha actividad y lo que más te interesa es lo que ha cambiado en un marco o sección específicos que estás revisando e implementando. El historial de versiones en la vista de enfoque te muestra las versiones y funciona igual que el historial de todo el archivo, pero se limita solo a las versiones que afectan al diseño específico que tienes abierto en la vista de enfoque.

A medida que los diseñadores y desarrolladores iteran sobre un diseño, actualizan el estado y añaden notas para describir los cambios. Cada vez que se actualiza el estado, se añade una entrada en el historial de versiones. También puedes comparar distintas versiones para identificar los cambios entre cada iteración.

Puedes inspeccionar versiones anteriores, copiar un enlace a esa versión concreta o compararla con la última versión que se encuentra actualmente en tu archivo. Más información sobre la comparación en Dev Mode →.

Marcar como completado

Para mostrar que el trabajo de desarrollo de un diseño está terminado, utiliza el botón Mark as completed en la parte superior de la vista de enfoque.

Cuando un diseño se marca como completo, se añade una nueva entrada al historial de versiones, y el diseño permanece disponible en la vista Listo para el Desarrollo para iteraciones posteriores.