Guía sobre inspección

Tengo Dev Mode

Para inspeccionar diseños, ingresa a Dev Mode al seleccionar el botón de Dev Mode mediante el shortcut Shift D. A partir de ahí, puedes utilizar las siguientes herramientas de inspección:

Medir distancias

Puedes medir las distancias entre objetos, incluso si están anidados dentro de marcos, grupos o componentes. En Dev Mode, selecciona cualquier capa padre o hijo en el lienzo. Cuando pasas el cursor sobre las capas circundantes, Figma muestra valores de margen interior o distancias entre los dos objetos. También puedes medir la distancia entre objetos específicos:

1. Selecciona el primer objeto en el lienzo.
2. Mantén presionada la tecla modificadora:
   • Mac: ⌥ Option
   • Windows: Alt
3. Coloca el cursor sobre el segundo objeto.

Figma mostrará una línea roja entre los dos objetos, así como medidas horizontales y verticales.

Generar código

Haz clic en cualquier objeto del lienzo mientras estés en Dev Mode para completar la sección Código en el panel de inspección. En función de lo que se haya seleccionado, se mostrará una vista previa tipográfica o un modelo de caja, seguido de fragmentos de código autogenerados para el objeto.

Para cambiar tu idioma y selección de unidades, o usar un plugin de generación de código:

1. En la esquina superior derecha de la sección Código, selecciona un idioma o plugin del menú desplegable.
2. Si es necesario, haz clic en Inspeccionar configuración y selecciona una unidad en la lista desplegable.

Aprende a utilizar fragmentos de código en el Modo de Desarrollo→

Ver propiedades

En Dev Mode, la pestaña Inspeccionar te ofrece una lista de propiedades para los objetos en el lienzo. Esto incluye propiedades como disposición, color, tipografía, cadenas de texto, propiedades de componentes, estilos y variables. Para ver las propiedades de un objeto:

1. En Dev Mode, selecciona un objeto en el lienzo.
2. En la pestaña Inspeccionar de la barra lateral derecha, desplázate hasta la sección con las propiedades que deseas inspeccionar.

Explorar variables

Dev Mode incluye algunas formas de trabajar con variables cuando inspeccionas un diseño:

• Ver detalles sobre una variable, lo que incluye el valor y el modo. Puedes cambiar modos y, si el valor utiliza algún alias, toda la cadena de alias hasta llegar al valor sin procesar de la variable.
• Obtener variables sugeridas para valores sin procesar en un diseño, si los valores coinciden con una o más de tus variables existentes.
• Acceder a las colecciones de variables creadas en el archivo actual y visualizar todas las variables y modos en una tabla.

Para más detalles, consulta Variables en Dev Mode.

Exportar o descargar recursos

Dev Mode puede detectar automáticamente los íconos y presentarlos como recursos que se pueden descargar para los desarrolladores. Verás estos recursos en la pestaña Inspeccionar que se encuentra por encima de los ajustes de exportación. Desplaza el cursor sobre cualquier elemento, selecciona un tipo de archivo y haz clic en el ícono de descarga.

Para configurar una exportación personalizada:

1. En Dev Mode, selecciona las capas que deseas exportar.
2. En la pestaña Inspeccionar, haz clic en el ícono de signo más en la sección Exportar para añadir una configuración de exportación. Puedes añadir tantas configuraciones de exportación a una selección como sea necesario.
3. Configura los ajustes de exportación. Obtén más información sobre los formatos de exportación y la configuración de Figma →
4. Si es necesario, haz clic en Vista previa para ver cómo se verá tu recurso. Si tienes varios objetos seleccionados, la configuración de Vista previa no se visualizará.
5. Haga clic en Exportar.

Ver o añadir anotaciones

Con las anotaciones, los diseñadores pueden comunicar detalles clave de un diseño directamente a los desarrolladores. Esto incluye resaltar propiedades importantes, visualizar el espaciado y las dimensiones con medidas, o compartir el contexto con notas de texto.

En Dev Mode, las anotaciones aparecen en el lienzo como un punto verde. Haz clic en una anotación para mostrar su contenido.

Para agregar anotaciones a un diseño:

1. Haz clic en el botón Dev Mode en la parte superior derecha de la barra de herramientas o usa el atajo de teclado Shift D.
2. Haz clic en Anotar en la barra de herramientas o usa el atajo de teclado Shift T.
3. Selecciona la capa que deseas anotar.
4. Escribe una nota en el campo de texto o haz clic en + Propiedad para seleccionar una propiedad de la lista. Puedes incluir texto sin formato y propiedades en una anotación.

Para agregar una medición a un diseño:

1. Haz clic en Medir en la barra de herramientas o usa el atajo de teclado Shift M.
2. Pasa el cursor sobre una capa para ver las opciones de dónde comenzar la medición.
3. Haz clic y arrastra desde tu punto de inicio hasta la capa en que deseas que termine la medición.
4. Haz clic y arrastra la medición para que no cubra el diseño.

Usar plugins

La pestaña Plugins en Dev Mode muestra los plugins utilizados recientemente, así como los plugins recomendados por la comunidad de Figma.

Aprende a utilizar plugins en archivos →

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. Esto te ayuda a seguir las últimas actualizaciones y a mantener el código de producción exacto.

También puedes comparar componentes separados (o instancias con anulaciones de diseño) con el componente base.

1. Selecciona un marco o componente de nivel superior.
2. En la pestaña Inspeccionar de la barra lateral derecha, haz clic en Comparar cambios.

Obtén más información sobre cómo comparar cambios en Dev Mode →