Guía de inspección
Si usas UI3, el nuevo diseño de Figma, es posible que algunas partes de este artículo no coincidan con lo que ves en el producto en estos momentos. Gracias por tener paciencia mientras llevamos a cabo las actualizaciones. Más información sobre la nueva versión de Figma →
Inspeccionar diseños ayuda a los desarrolladores u otros stakeholders a entender la estructura y las propiedades de un diseño para que puedan traducirlo más fácilmente a código.
La forma en que inspeccionas un archivo de diseño depende de tu tipo de plan, tu tipo de puesto y tus permisos de archivo. Utiliza la herramienta a continuación para ver cómo realizar tareas comunes de inspección: exportar, medir, generar código, ver anotaciones y usar plugins para el desarrollo, en función de tu acceso personal al archivo que deseas inspeccionar.
Sea cual sea tu acceso a archivos, hay una experiencia de inspección disponible para ti.
Primero, verifica si tienes acceso al Dev Mode en el archivo que estás inspeccionando cambiando al Dev Mode en la parte superior del archivo o utilizando el atajo de teclado Shift D. Si no tienes acceso al Dev Mode, estarás inspeccionando en el Modo de diseño. Puedes seleccionar si tienes acceso de edición o visualización para ver cómo inspeccionar.
No tengo Dev Mode y solo tengo acceso de visualización
¿Necesitas acceso al Dev Mode? Si tienes el plan Starter, necesitarás actualizar a un plan de pago o mover tu archivo a un equipo de pago. Si tienes un plan de pago, necesitarás un puesto completo o un puesto Dev.
Medir distancias
Puedes medir las distancias entre objetos, incluso si están anidados dentro de marcos, grupos o componentes.
- Selecciona el primer objeto en el lienzo.
- Mantén presionada la tecla modificadora:
- Mac: ⌥ Opción
- Windows: Alt
- Coloca el cursor sobre el segundo objeto.
Figma mostrará una línea roja entre los dos objetos, así como medidas horizontales y verticales.
Consejo: ¿tienes problemas para medir? Consulta la guía para medir la distancia entre objetos.
Generar código
Puedes copiar fragmentos de código generados automáticamente para CSS, iOS o Android.
- Selecciona un objeto en el lienzo.
- Haz clic con el botón derecho en el objeto y selecciona Copiar/Pegar como > Copiar como código.
- Selecciona la opción de código que mejor se adapte a tus necesidades.
Ver propiedades
La pestaña Propiedades proporciona una lista de propiedades para los objetos en el lienzo. Esto incluye propiedades como: disposición, color, tipografía, cadenas de texto, propiedades del componente, estilos y variables. Para ver las propiedades de un objeto:
- Selecciona un objeto en el lienzo.
- Haz clic en la pestaña Propiedades en la barra lateral derecha.
Exportar
- Selecciona las capas que deseas exportar. Si quieres exportar todo el lienzo de la página actual, deselecciona todo lo del lienzo.
- En la pestaña Exportar, haz clic en el icono + para añadir una configuración de exportación. Puedes añadir tantas configuraciones de exportación a una selección como sea necesario.
- Configura los ajustes de exportación. Obtén más información sobre los formatos y ajustes de exportación de Figma →
- Si es necesario, haz clic en Vista previa para previsualizar tus recursos. Si tienes varios objetos seleccionados, el ajuste Vista previa no se mostrará.
- Haz clic en Exportar.
Consejo: ¿quieres saber más sobre la exportación? Consulta la guía completa de exportaciones en Figma.
Ver o agregar comentarios
Los comentarios facilitan la colaboración entre diseñadores y desarrolladores al destacar partes específicas del diseño. Puedes dejar comentarios para compartir más contexto sobre cómo deben funcionar las partes del diseño.
- Haz clic en la barra de herramientas o pulsa C para entrar en el modo de comentarios. El cursor se convertirá en un .
- Selecciona una ubicación en la que comentar:
- Haz clic en la ubicación del lienzo en la que quieres que se fije el comentario.
- O bien haz clic y arrastra el cursor para seleccionar una región en la que comentar.
- Escribe tu mensaje en el campo. Escribe @ para mencionar a un colega o colaborador.
- Haz clic en para enviar tu mensaje.
Usar plugins
Necesitarás acceso de edición para utilizar plugins en un archivo.
No tengo el Dev Mode y tengo acceso de edición
¿Necesitas acceso al Dev Mode? Si tienes el plan Starter, necesitarás actualizar a un plan de pago o mover tu archivo a un equipo de pago. Si tienes un plan de pago, necesitarás un puesto completo o un puesto Dev.
acceso de edición a un diseño, puedes utilizar las herramientas de inspección directamente en el Modo de diseño:
Medir distancias
Puedes medir las distancias entre objetos, incluso si están anidados dentro de marcos, grupos o componentes.
- Selecciona el primer objeto en el lienzo.
- Mantén presionada la tecla modificadora:
- Mac: ⌥ Opción
- Windows: Alt
- Coloca el cursor sobre el segundo objeto.
Figma mostrará una línea roja entre los dos objetos, así como medidas horizontales y verticales.
Consejo: ¿tienes problemas para medir? Consulta la guía para medir la distancia entre objetos.
Generar código
Puedes copiar fragmentos de código generados automáticamente para CSS, iOS o Android.
- Selecciona un objeto en el lienzo.
- Haz clic con el botón derecho en el objeto y selecciona Copiar/Pegar como > Copiar como código.
- Selecciona la opción de código que mejor se adapte a tus necesidades.
Ver propiedades
La pestaña Diseño te ofrece una lista de propiedades para los objetos en el lienzo. Incluye propiedades como: disposición, color, tipografía, cadenas de texto, propiedades del componente, estilos y variables. Para ver las propiedades de un objeto:
- Selecciona un objeto en el lienzo.
- En la pestaña Diseño en la barra lateral derecha, desplázate hasta la sección con las propiedades que quieres inspeccionar.
Exportar
- Selecciona las capas que deseas exportar. Si quieres exportar todo el lienzo de la página actual, deselecciona todo lo del lienzo.
- En la pestaña Diseño, haz clic en el icono + 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.
- Configura los ajustes de exportación. Obtén más información sobre los formatos y ajustes de exportación de Figma →
- Si es necesario, haz clic en Vista previa para previsualizar tus recursos. Si tienes varios objetos seleccionados, el ajuste Vista previa no se mostrará.
- Haz clic en Exportar.
Consejo: ¿quieres saber más sobre la exportación? Consulta la guía completa de exportaciones en Figma.
Ver o agregar comentarios
Los comentarios facilitan la colaboración entre diseñadores y desarrolladores al destacar partes específicas del diseño. Puedes dejar comentarios para compartir más contexto sobre cómo deben funcionar las partes del diseño.
- Haz clic en la barra de herramientas o pulsa C para entrar en el modo de comentarios. El cursor se convertirá en un .
- Selecciona una ubicación en la que comentar:
- Haz clic en la ubicación del lienzo en la que quieres que se fije el comentario.
- O bien haz clic y arrastra el cursor para seleccionar una región en la que comentar.
- Escribe tu mensaje en el campo. Escribe @ para mencionar a un colega o colaborador.
- Haz clic en para enviar tu mensaje.
Usar plugins
Puedes ejecutar un plugin desde la Comunidad o directamente desde un archivo en Figma o FigJam.
- Haz clic en Recursos en la barra de herramientas.
- Desde la pestaña Plugins, selecciona entre tus plugins usados o guardados recientemente o busca un plugin en la Comunidad.
- Haz clic en un plugin para ver sus detalles.
- Haz clic en Ejecutar para ejecutar el plugin en el archivo actual.
Tengo el Dev Mode
Para inspeccionar los diseños, entra en el Dev Mode haciendo clic en el interruptor del Dev Mode usando la combinación de teclas Mayús D. Desde allí, puedes usar 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 el Dev Mode, selecciona cualquier capa principal o secundaria en el lienzo. Cuando pasas el cursor sobre las capas circundantes, Figma muestra los valores de espaciado o las distancias entre los dos objetos. También puedes medir la distancia entre objetos específicos:
- Selecciona el primer objeto en el lienzo.
- Mantén presionada la tecla modificadora:
- Mac: ⌥ Opción
- Windows: Alt
- 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 en el Dev Mode para rellenar la sección Código del panel de inspección. Dependiendo de lo que se seleccione, se muestra una vista previa tipográfica o un modelo de caja, seguido de fragmentos de código generados automáticamente para el objeto.
Para cambiar tu idioma y selección de unidades, o utilizar un plugin de generación de código:
- En la esquina superior derecha de la sección Código, selecciona un idioma o plugin del menú desplegable.
- Si es necesario, haz clic en Configuración de inspección y selecciona una unidad del menú desplegable.
Aprende a utilizar los fragmentos de código en Dev Mode→
Nota: algunas funciones del Dev Mode, como la sección Código, no aparecerán en el panel de inspección si la copia y el uso compartido están deshabilitados en el archivo.
Ver propiedades
En el 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 del componente, estilos y variables. Para ver las propiedades de un objeto:
- En el Dev Mode, selecciona un objeto en el lienzo.
- En la pestaña Inspeccionar de la barra lateral derecha, desplázate hasta la sección con las propiedades que quieres inspeccionar.
Consejo: al inspeccionar un componente o una instancia, verás una vista previa del componente, un enlace al componente principal y otros enlaces a la documentación y recursos de desarrollo pertinentes. El área de pruebas para componentes aparece en el panel Inspeccionar al seleccionar una instancia de componente. Aprovecha el área de pruebas para experimentar con las diferentes propiedades de los componentes sin necesidad de cambiar el diseño.
Explora variables
El Dev Mode incluye varias formas de trabajar con variables al inspeccionar un diseño:
- Ver detalles sobre una variable, incluidos el valor y el modo. Puedes cambiar de modo y, si el valor utiliza algún alias, toda la cadena de alias hasta llegar al valor original de la variable.
- Obtén variables sugeridas para valores brutos en un diseño si los valores coinciden con una o más de tus variables existentes.
- Accede a las colecciones de variables creadas en el archivo actual y visualiza todas las variables y modos en una tabla.
Para obtener más información, consulta Variables en Dev Mode.
Exportar o descargar recursos
El Dev Mode puede detectar automáticamente los iconos y presentarlos como recursos descargables para los desarrolladores. Verás estos recursos en la pestaña Inspeccionar sobre la configuración de exportación. Coloca el cursor sobre cualquier elemento, selecciona un tipo de archivo y haz clic en el icono de descarga.
Para configurar una exportación personalizada:
- En el Dev Mode, selecciona las capas que quieres exportar.
- En la pestaña Inspeccionar, haz clic en el icono + en la sección Exportación para añadir una configuración de exportación. Puedes añadir tantas configuraciones de exportación a una selección como sea necesario.
- Configura los ajustes de exportación. Obtén más información sobre los formatos y ajustes de exportación de Figma →
- Si es necesario, haz clic en Vista previa para previsualizar tus recursos. Si tienes varios objetos seleccionados, la configuración de Vista previa no se muestra.
- Haz 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, lo que incluye destacar propiedades importantes, visualizar el espaciado y el tamaño con medidas o compartir el contexto con notas de texto.
En el Dev Mode, las anotaciones aparecen en el lienzo como un punto verde. Haz clic en una anotación para revelar su contenido.
Nota: necesitas un puesto Full y acceso de edición para añadir anotaciones a un archivo.
Para añadir anotaciones a un diseño:
- Haz clic en el interruptor del Dev Mode en la parte superior derecha de la barra de herramientas o utiliza el atajo de teclado Shift D.
- Haz clic en Anotar en la barra de herramientas o utiliza el atajo de teclado Shift T.
- Selecciona la capa en la que quieres anotar.
- 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 añadir una medida a un diseño:
- Haz clic en Medir en la barra de herramientas o utiliza el atajo de teclado Shift M.
- Sitúa el cursor sobre una capa para ver opciones sobre dónde empezar la medición.
- Haz clic y arrastra desde el punto de inicio hasta la capa en la que quieres que termine la medición.
- Haz clic y arrastra la medición para que no cubra el diseño.
Usar plugins
La pestaña Plugins del Dev Mode muestra los plugins que has usado recientemente, así como los plugins recomendados de la Comunidad Figma.
Aprende a utilizar los complementos en los archivos →
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. Esto te ayuda a seguir las últimas actualizaciones y a mantener la precisión del código de producción.
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.
- En la pestaña Inspeccionar de la barra lateral derecha, haz clic en Comparar cambios.
¡Consejo! Mantén pulsada la tecla Mayús y haz clic para seleccionar dos componentes en el lienzo y compararlos entre sí.
Más información sobre cómo comparar los cambios en el Dev Mode →