Cómo usar el panel de inspección de Figma

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

¡Vamos a diseñar una aplicación de agenda en Figma! Al hacer esto, trabajaremos con el panel Inspect de Figma, explicando cómo exportar un diseño de Figma a código, cómo inspeccionar un sistema de diseño de Figma y cómo utilizar Figma para inspeccionar cualquier elemento de un diseño.

Lo que aprenderás en este tutorial

Cómo inspeccionar marcos en Figma
Cómo inspeccionar Auto Layouts en Figma
Cómo inspeccionar componentes en Figma
Cómo pasar del diseño al código en Figma

Para más inspiración sobre cómo ajustar o mejorar tu sistema de diseño final de Figma, en Envato Elements podrás encontrar muchos recursos. ¡Elements cuenta con miles de kits de UI y UX, compatibles con tus herramientas de diseño favoritas (incluyendo Figma), por una cuota mínima de suscripción!

1. Cómo usar el panel de inspección de Figma

Paso 1

El panel Inspect (Inspeccionar) se puede abrir desde la barra lateral derecha con un simple clic en la pestaña de la parte superior.

Con este panel podrás inspeccionar fácilmente las propiedades de cualquier elemento de tu diseño.

El panel Inspect también lo pueden utilizar los colaboradores con los que compartas un archivo.

Al permitirles el acceso al panel Inspect, los colaboradores pueden ver (can view) o pueden editar (can edit) un archivo.

Usaremos el diseño de una aplicación de agenda para que veas cómo puedes inspeccionar fácilmente diferentes elementos de un diseño.

Al no tener nada seleccionado, el panel Inspect te proporciona información sobre el color de fondo, los estilos guardados o cualquier otro elemento de tu sistema de diseño.

¿Figma genera código? Sí, Figma genera código, por lo que es muy fácil pasar de tu diseño a la codificación. En los siguentes pasos te enseñaré cómo puedes hacer esto y cuáles son tus opciones.

2. Cómo usar Figma para inspeccionar marcos

Haz clic en el nombre de un marco para inspeccionarlo. En el panel Inspect, tendrás acceso a:

El nombre del marco
El tamaño y la posición del marco.
El color del marco. En este caso, puedes ver el nombre del estilo del color que se utiliza y el código del color. Utilizando el menú desplegable puedes cambiar el modo de color a: HEX, CSS, HSL o HSB.
La sección Code del panel Inspect te muestra cómo replicar en código cualquier elemento seleccionado, haciendo que sea mucho más fácil pasar de tu diseño a la codificación.

Usando el menú desplegable, podrás elegir entre los formatos CSS, iOS (Swift) y Android (XML) y con esos íconos podrás cambiar entre la vista Code y la vista Table. Ten presente que en Figma no se puede exportar a HTML.

3. Cómo usar Figma para inspeccionar texto

Al tener el contenedor de texto seleccionado, el panel Inspect te dará acceso a:

El tamaño del contenedor de texto
La configuración del margen superior e izquierdo
El modo de opacidad y de fusión
La configuración de cambio de tamaño
El texto dentro del contenedor
La configuración de texto. Cuando seleccionas un contenedor de texto con múltiples ajustes de texto, el panel Inspect muestra todos los estilos por separado
El color del texto
El código que necesitas para replicar el diseño de Figma

Además de estos atributos, dependiendo del tipo de texto que se seleccione, también podrás inspeccionar: la configuración de los trazos y la configuración de los efectos.

4. Cómo usar Figma para inspeccionar formas, grupos y Auto Layouts

Al tener seleccionado este rectángulo azul redondeado, el panel de Inspect te brindará acceso a lo siguiente:

Gracias a ese pequeño ícono, podrás saber que se trata de un Auto Layout y que el nombre que se le ha asignado dentro del panel Layers es, Frame 9
El tamaño del marco del auto layout
La distancia al borde superior e izquierdo de la mesa de trabajo
El radio de las esquinas, el relleno y los ajustes del espaciado
El color de relleno utilizado para el auto layout
Los ajustes del efecto Drop Shadow (Sombra paralela) que se hayan aplicado
El código que necesitas para replicar este diseño

5. Cómo usar Figma para inspeccionar componentes

Al tener este componente seleccionado, el panel Inspect te dará acceso a lo siguiente:

Gracias a ese pequeño ícono, podrás saber que se trata de la instancia de un componente, no el componente principal, y que el nombre asignado dentro del panel Layers es Schedule Status
La descripción del componente
La variante activa del componente.
El tamaño y la posición del componente.
El código que necesitas para replicar el componente

También puedes inspeccionar los objetos que conforman un componente. Al hacer doble clic en este componente e inspeccionar la marca de verificación, puedo tener acceso a:

El nombre que se le ha asignado en el panel Layers
El nombre del componente principal. Haz clic en el ícono de la diana para regresar a la configuración del componente.
El tamaño y los valores de los márgenes superior e izquierdo
Los ajustes del trazo
El código que necesitas para replicar este círculo.

6. Cómo usar Figma para inspeccionar las animaciones

Además de las especificaciones del diseño, el panel Inspect también te muestra los valores para las animaciones del prototipo.

Al tener seleccionado este ícono de notificaciones, en la sección Animation del panel Inspect, obtendrás información acerca de:

On Click (Al hacer clic): el activador de la animación
Navigate to (Navegar a): la acción del prototipo y el destino vinculado
Animate (Animar): el tipo de animación
Curve (Curva): el tipo de animación de ease
Duration (Duración): la duración de la animación

7. Cómo copiar las propiedades desde el panel de inspección

Al pasar el cursor sobre la mayoría de los ajustes del panel Inspect, verás un botón azul que dice Copy (Copiar). Al hacer clic en este botón copiarás los valores de esa sección. Luego podrás pegar los valores copiados en cualquier lugar que los necesites.

¡Felicitaciones! ¡Has terminado!

Espero que hayas disfrutado de este tutorial y que puedas aplicar estas técnicas en tus futuros proyectos. No dudes en compartir tu resultado final en la sección de comentarios.

Puedes ajustar el diseño final y hacerlo tuyo. En Envato Elements podrás encontrar excelentes fuentes de inspiración, con interesantes soluciones para mejorar tu diseño.

Tutoriales de Figma en Tuts+

En Tuts+ tenemos muchos tutoriales, de nivel principiante a intermedio, ¡échales un vistazo!