7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Figma

Cómo usar el panel de inspección de Figma

Scroll to top
Read Time: 6 mins

Spanish (Español) translation by Carlos (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

¡Vamos a diseñar una aplicación de agenda en Figma! Al hacer esto, trabajaremos con el panel Inspect de Figma, explicando cómo exportar un diseño de Figma a código, cómo inspeccionar un sistema de diseño de Figma y cómo utilizar Figma para inspeccionar cualquier elemento de un diseño.

Lo que aprenderás en este tutorial

  • Cómo inspeccionar marcos en Figma
  • Cómo inspeccionar Auto Layouts en Figma
  • Cómo inspeccionar componentes en Figma
  • Cómo pasar del diseño al código en Figma

Para más inspiración sobre cómo ajustar o mejorar tu sistema de diseño final de Figma, en Envato Elements podrás encontrar muchos recursos. ¡Elements cuenta con miles de kits de UI y UX, compatibles con tus herramientas de diseño favoritas (incluyendo Figma), por una cuota mínima de suscripción!

1. Cómo usar el panel de inspección de Figma

Paso 1

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

Con este panel podrás inspeccionar fácilmente las propiedades de cualquier elemento de tu diseño.

figma inspect panelfigma inspect panelfigma inspect panel

El panel Inspect tambié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.

figma sharefigma sharefigma share

Usaremos el diseño de una aplicación de agenda para que veas cómo puedes inspeccionar fácilmente diferentes elementos de un diseño.

figma schedule appfigma schedule appfigma schedule app

Al no tener nada seleccionado, el panel Inspect te proporciona información sobre el color de fondo, los estilos guardados o cualquier otro elemento de tu sistema de diseño.

¿Figma genera código? Sí, Figma genera código, por lo que es muy fácil pasar de tu diseño a la codificación. En los siguentes pasos te enseñaré cómo puedes hacer esto y cuáles son tus opciones.

inspect figma design systeminspect figma design systeminspect figma design system

2. Cómo usar Figma para inspeccionar marcos

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

  1. El nombre del marco
  2. El tamaño y la posición del marco.
  3. El color del marco. En este caso, puedes ver el nombre del estilo del color que se utiliza y el código del color. Utilizando el menú desplegable puedes cambiar el modo de color a: HEX, CSS, HSL o HSB.
  4. La sección Code del panel Inspect te muestra cómo replicar en código cualquier elemento seleccionado, haciendo que sea mucho más fácil pasar de tu diseño a la codificación.
figma inspect framesfigma inspect framesfigma inspect frames

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

does figma generate codedoes figma generate codedoes figma generate code

3. Cómo usar Figma para inspeccionar texto

Al tener el contenedor de texto seleccionado, el panel Inspect te dará acceso a:

  1. El tamaño del contenedor de texto
  2. La configuración del margen superior e izquierdo
  3. El modo de opacidad y de fusión
  4. La configuración de cambio de tamaño
  5. El texto dentro del contenedor
  6. La configuración de texto. Cuando seleccionas un contenedor de texto con múltiples ajustes de texto, el panel Inspect muestra todos los estilos por separado
  7. El color del texto
  8. El código que necesitas para replicar el diseño de Figma

Además de estos atributos, dependiendo del tipo de texto que se seleccione, también podrás inspeccionar: la configuración de los trazos y la configuración de los efectos.

figma inspect textfigma inspect textfigma inspect text

4. Cómo usar Figma para inspeccionar formas, grupos y Auto Layouts

Al tener seleccionado este rectángulo azul redondeado, el panel de Inspect te brindará acceso a lo siguiente:

  1. Gracias a ese pequeño ícono, podrá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
  2. El tamaño del marco del auto layout
  3. La distancia al borde superior e izquierdo de la mesa de trabajo
  4. El radio de las esquinas, el relleno y los ajustes del espaciado
  5. El color de relleno utilizado para el auto layout
  6. Los ajustes del efecto Drop Shadow (Sombra paralela) que se hayan aplicado
  7. El código que necesitas para replicar este diseño
figma inspect auto layoutfigma inspect auto layoutfigma inspect auto layout

5. Cómo usar Figma para inspeccionar componentes

Al tener este componente seleccionado, el panel Inspect te dará acceso a lo siguiente:

  1. Gracias a ese pequeño ícono, podrá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
  2. La descripción del componente
  3. La variante activa del componente.
  4. El tamaño y la posición del componente.
  5. El código que necesitas para replicar el componente
figma inspect componentfigma inspect componentfigma inspect component

También puedes inspeccionar los objetos que conforman un componente. Al hacer doble clic en este componente e inspeccionar la marca de verificación, puedo tener acceso a:

  1. El nombre que se le ha asignado en el panel Layers
  2. El nombre del componente principal. Haz clic en el ícono de la diana para regresar a la configuración del componente.
  3. El tamaño y los valores de los márgenes superior e izquierdo
  4. Los ajustes del trazo
  5. El código que necesitas para replicar este círculo.
figma inspect pathfigma inspect pathfigma inspect path

6. Cómo usar Figma para inspeccionar las animaciones

Además de las especificaciones del diseño, el panel Inspect también te muestra los valores para las animaciones del prototipo.

Al tener seleccionado este ícono de notificaciones, en la sección Animation del panel Inspect, obtendrás información acerca de:

  • On Click (Al hacer clic): el activador de la animación
  • Navigate to (Navegar a): la acción del prototipo y el destino vinculado
  • Animate (Animar): el tipo de animación
  • Curve (Curva): el tipo de animación de ease
  • Duration (Duración): la duración de la animación
figma inspect animationfigma inspect animationfigma inspect animation

7. Cómo copiar las propiedades desde el panel de inspección

Al pasar el cursor sobre la mayoría de los ajustes del panel Inspect, verás un botón azul que dice Copy (Copiar). Al hacer clic en este botón copiarás los valores de esa sección. Luego podrás pegar los valores copiados en cualquier lugar que los necesites.

copy properties inspect panelcopy properties inspect panelcopy properties inspect panel

¡Felicitaciones! ¡Has terminado!

Espero que hayas disfrutado de este tutorial y que puedas aplicar estas técnicas en tus futuros proyectos. No dudes en compartir tu resultado final en la sección de comentarios.

Puedes ajustar el diseño final y hacerlo tuyo. En Envato Elements podrás encontrar excelentes fuentes de inspiración, con interesantes soluciones para mejorar tu diseño.

how to use figma to inspecthow to use figma to inspecthow to use figma to inspect

Tutoriales de Figma en Tuts+

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.