Guía sobre 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 actualmente. Agradecemos tu paciencia mientras realizamos actualizaciones. Obtén más información sobre el nuevo diseño de Figma →
Inspeccionar diseños ayuda a los desarrolladores o a otros stakeholders a entender la estructura y las propiedades de un diseño para que puedan traducirlo en código de forma más simple.
La forma de inspeccionar un archivo de diseño depende del tipo de plan, el tipo de puesto y los permisos de archivo. Usa la herramienta a continuación para ver cómo llevar a cabo 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.
Independientemente del acceso que tengas a los archivos, hay una experiencia de inspección disponible para ti.
Primero, verifica si tienes acceso a Dev Mode en el archivo que estás inspeccionando. Para ellos, activa Dev Mode en la parte superior del archivo o usa el shortcut de teclado Shift D. Si no tienes acceso a Dev Mode, realizarás la inspección en el modo de diseño. Puedes seleccionar si tienes acceso de puede editar
o puede ver
para ver cómo inspeccionar.
No tengo Dev Mode y tengo acceso de solo visualización
¿Necesitas acceso a Dev Mode? Si estás en el plan Inicial, necesitarás actualizar a un plan de pago o mover tu archivo a un equipo de pago. Si estás en un plan de pago, necesitarás un puesto Full o 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: ⌥ Option
- 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 derecho en el objeto y selecciona Copiar/Pegar como > Copiar como código.
- Selecciona la opción de código que se ajuste a tus necesidades.
Ver propiedades
La pestaña Propiedades 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:
- Selecciona un objeto en el lienzo.
- Haz clic en la pestaña Propiedades en la barra lateral derecha.
Exportar
- Seleccione las capas que desea exportar. Si desea exportar todo el cuadro de la página actual, anule la selección de todos los elementos del cuadro.
- En la pestaña Exportar, haz clic en el ícono de signo más para agregar 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 de exportación y la configuración de Figma →
- Si es necesario, haz clic en Vista previa para ver cómo se verá tu recurso. Si tienes varios objetos seleccionados, la opción Vista previa no se visualizará.
- Haga clic en Exportar.
Consejo: ¿Quieres aprender más sobre la exportación? Consulta la guía completa de exportaciones en Figma.
Ver o añadir 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 deberían funcionar las partes del diseño.
- Haz clic en en la barra de herramientas o presiona C para ingresar al modo de comentario. El cursor se convertirá en un .
- Selecciona una ubicación para comentar:
- Haz clic en la ubicación del lienzo en la que quieras 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 puede editar
para usar plugins en un archivo.
No tengo Dev Mode y tengo acceso de puede editar
¿Necesitas acceso a Dev Mode? Si estás en el plan Inicial, necesitarás actualizar a un plan de pago o mover tu archivo a un equipo de pago. Si estás en un plan de pago, necesitarás un puesto Full o Dev.
puede editar
a un diseño, puedes usar 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: ⌥ Option
- 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 derecho en el objeto y selecciona Copiar/Pegar como > Copiar como código.
- Selecciona la opción de código que se ajuste a tus necesidades.
Ver propiedades
La pestaña Diseño 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:
- 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 deseas inspeccionar.
Exportar
- Seleccione las capas que desea exportar. Si desea exportar todo el cuadro de la página actual, anule la selección de todos los elementos del cuadro.
- En la pestaña Diseño, 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.
- Configura los ajustes de exportación. Obtén más información sobre los formatos de exportación y la configuración de Figma →
- Si es necesario, haz clic en Vista previa para ver cómo se verá tu recurso. Si tienes varios objetos seleccionados, la opción Vista previa no se visualizará.
- Haga clic en Exportar.
Consejo: ¿Quieres aprender más sobre la exportación? Consulta la guía completa de exportaciones en Figma.
Ver o añadir 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 deberían funcionar las partes del diseño.
- Haz clic en en la barra de herramientas o presiona C para ingresar al modo de comentario. El cursor se convertirá en un .
- Selecciona una ubicación para comentar:
- Haz clic en la ubicación del lienzo en la que quieras 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 de la comunidad.
- Haz clic en un plugin para ver sus detalles.
- Haz clic en Ejecutar para ejecutar el plugin en el archivo actual.
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:
- Selecciona el primer objeto en el lienzo.
- Mantén presionada la tecla modificadora:
- Mac: ⌥ Option
- 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 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:
- 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 Inspeccionar configuración y selecciona una unidad en la lista desplegable.
Aprende a utilizar fragmentos de código en Dev Mode→
Nota: Algunas funciones de Dev Mode, como la sección Código, no aparecerán en el panel de inspección si las funciones de copia y uso compartido no están habilitadas en el archivo.
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:
- En 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 deseas inspeccionar.
Consejo: Al inspeccionar un componente o instancia, verás una vista previa del componente, un enlace al componente principal, así como enlaces a documentación relevante y recursos de desarrollo. El área de pruebas de componentes aparece en el panel Inspeccionar cuando se selecciona una instancia de componente. Usa el área de pruebas para experimentar con las diferentes propiedades de los componentes sin cambiar el diseño real.
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:
- En Dev Mode, selecciona las capas que deseas exportar.
- 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.
- Configura los ajustes de exportación. Obtén más información sobre los formatos de exportación y la configuración de Figma →
- 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á.
- 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.
Nota: Necesitas un puesto Full y acceso de puede editar
para agregar anotaciones a un archivo.
Para agregar anotaciones a un diseño:
- 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.
- Haz clic en Anotar en la barra de herramientas o usa el atajo de teclado Shift T.
- Selecciona la capa que deseas 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 agregar una medición a un diseño:
- Haz clic en Medir en la barra de herramientas o usa el atajo de teclado Shift M.
- Pasa el cursor sobre una capa para ver las opciones de dónde comenzar la medición.
- Haz clic y arrastra desde tu punto de inicio hasta la capa en que deseas 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 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.
- 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 presionado Shift y haz clic para seleccionar dos componentes en el lienzo y compararlos entre sí.
Obtén más información sobre cómo comparar cambios en Dev Mode →