Cómo usar componentes en Figma

Quien soy
Matthew Wilhelm Kapell
@matthewwilhelmkapell
Autor y referencias

En los √ļltimos a√Īos, Figma ha crecido r√°pidamente en popularidad, y no es de extra√Īar. El software gratuito basado en la nube es f√°cilmente accesible en todos los dispositivos y no requiere cuotas ni descargas. Desde el dise√Īo de interfaces de aplicaciones m√≥viles hasta la creaci√≥n de publicaciones en redes sociales, con Figma puede experimentar con todo tipo de funciones de dise√Īo gr√°fico y aumentar sus habilidades.

Para una mayor consistencia en sus dise√Īos, puede considerar el uso de componentes en su trabajo. Los componentes son elementos de la interfaz de usuario (UI) que se pueden usar en varios archivos en Figma. A menudo, estos pueden ser una gran adici√≥n a sus dise√Īos y mejorar su calidad general.



Si es nuevo en Figma o lo ha estado usando por un tiempo y no está seguro de cómo usar los componentes con éxito, estamos aquí para ayudarlo.

En este artículo, exploraremos cómo usar los componentes de Figma y cómo pueden ayudarlo a mejorar su trabajo.

Si quieres saber m√°s, sigue leyendo.

Cómo usar componentes en Figma

Dominar el uso de componentes puede ayudarlo con la organizaci√≥n y la coherencia al trabajar con Figma. Estos elementos de la interfaz de usuario se pueden usar una y otra vez en varios proyectos de dise√Īo en los que podr√≠a estar trabajando. Un componente puede consistir en un icono, un bot√≥n, etc., seg√ļn su proyecto.

El beneficio de introducir componentes en su experiencia con Figma es que le ahorra mucho tiempo. Cualquier cambio que pueda realizar en un componente se actualiza autom√°ticamente en los dem√°s. Esto puede ser especialmente √ļtil si tiene un plazo ajustado o est√° colaborando con otros dise√Īadores y desea acelerar su flujo de trabajo.



Para empezar, notar√° que hay dos barras laterales a cada lado del lienzo principal que est√° usando. Puede usar las herramientas en cualquiera de estas barras laterales para realizar cambios en su proyecto.

La barra lateral del lado derecho le da acceso a todas las configuraciones del prototipo y le permite ajustar o cambiar las propiedades de sus componentes. Sin embargo, la barra lateral izquierda le muestra las capas, los activos y las p√°ginas utilizadas en su proyecto. Esto se llama el "Panel de capas".

Los componentes deben introducirse en su trabajo desde el principio. Le ayudan a mantener la coherencia de sus dise√Īos y le permiten acelerar la velocidad a la que realiza cambios en sus proyectos. Hay dos elementos clave de un componente:

  • El componente principal (o principal) (icono de diamante cu√°druple)
  • Un componente de instancia (icono de diamante √ļnico)

Compositores principaux

Antes que nada, primero debe crear el componente principal. Para hacer esto, siga estos pasos:

  1. Haga clic derecho en su capa, grupo o marco.
  2. Seleccione "Crear componente".
  3. En el lado izquierdo de la pantalla, ver√° un men√ļ desplegable que dice "Componente". Haz click en eso.
  4. Desde aqu√≠, notar√° un men√ļ donde puede realizar cambios en los estilos de sus componentes y redise√Īar todos los proyectos.

Otra forma de crear un componente maestro es usar atajos:

  • Opciones + Comando + K para Mac
  • Ctrl + Alt + K para Windows

Por supuesto, este método solo funciona si usas Figma en una PC.



Componentes instant√°neos

Un componente instant√°neo es una copia de su componente principal. Cuando el componente principal se modifica de alguna manera, la instancia se actualiza autom√°ticamente para que coincida con los cambios realizados. Si est√° creando un sitio web, esta herramienta puede ser especialmente √ļtil y ahorrarle mucho tiempo. Por ejemplo, no habr√≠a tiempo para acceder manualmente a todos sus componentes para repetir los mismos cambios. En cambio, Figma los cambia todos por ti.

Puede haber ocasiones en las que haya creado varias instancias y desee volver a su componente principal para poder editar r√°pidamente todos sus componentes. Para acceder a su componente principal, siga estos pasos:

  1. Haga clic derecho en cualquier instancia.
  2. Haga clic en "Ir al componente principal".
  3. El componente principal aparecer√° en la barra lateral del lado izquierdo.

Mientras que hacer componentes uno a la vez es relativamente sencillo; puede acelerar las cosas haciéndolas a granel. Para hacerlo, sigue estos pasos:

  1. En su "Panel de capas", elija las capas en las que desea crear componentes.
  2. Haga clic en el icono de la flecha hacia abajo junto al icono del componente principal en el "Panel de capas".
  3. Seleccione "Crear m√ļltiples componentes" de las opciones disponibles.
  4. A partir de ahí, Figma creará un componente para cada capa ráster.

Preguntas frecuentes adicionales

¬ŅC√≥mo reemplazo o separo una instancia?

Puede haber ocasiones en las que desee realizar cambios en las propiedades de una instancia en particular sin cambiar todas las dem√°s. Se pueden hacer variaciones de diferentes componentes. En Figma, esto se llama "sobreimpulso".



Una vez que reemplace una instancia, los cambios en el componente principal no lo afectarán. Para hacer esto, vea los pasos a continuación:

1. Haga clic en el componente de su instancia.

2. En el panel Propiedades en el lado derecho de su pantalla, seleccione "Componente".

3. En el men√ļ desplegable que aparece, elija "Separar instancia".

Si desea borrar una anulación, seleccione el componente, luego elija "Restablecer instancia" en la barra central superior de su pantalla.

¬ŅQu√© sucede si elimino accidentalmente mi componente principal?

Cuando pasa todo el día editando contenido, a veces puede arrastrar y eliminar accidentalmente algo importante, como su componente principal. No temas, para la restauración, es tan fácil como 1-2-3. Simplemente siga estos pasos básicos para recuperar ese componente central que falta:

1. Navegue a una de las Instancias del componente.

2. En el panel Propiedades en el lado derecho de la pantalla, seleccione "Restaurar componente maestro".

3. El componente principal aparecer√° inmediatamente.

¬ŅC√≥mo agrego una descripci√≥n para mis componentes?

Al crear sus componentes, agregar una descripci√≥n y un enlace de documentaci√≥n a cada uno puede ayudarlo a navegar mejor por su proyecto. Tambi√©n es √ļtil para cualquier colaborador con el que trabaje tener acceso a notas adicionales. Para agregar una descripci√≥n, vaya al panel Propiedades en el lado derecho de la p√°gina y seleccione "Agregar descripci√≥n".

Una vez que haya hecho esto, todos los espectadores externos pueden acceder a esta información yendo al "Panel de inspección" en la barra lateral derecha.

¬ŅC√≥mo importo componentes a Figma?

Puede importar todo tipo de archivos en un componente de Figma. La forma m√°s f√°cil de hacerlo es desde su escritorio. Solo sigue estos pasos:

1. En Figma, abra la p√°gina donde desea cargar un archivo.

2. Desde sus archivos, seleccione el archivo específico que desea usar.

3. Arrastra y suelta el archivo seleccionado en tu p√°gina de Figma.

4. Cuando termine, haga clic en "Listo".

El camino al éxito

Figma es una gran herramienta para usar tanto si eres nuevo en el dise√Īo como si llevas a√Īos en el juego. El software ofrece un sistema de edici√≥n para principiantes donde los dise√Īadores pueden crear contenido desde cero o usar la ayuda de una plantilla si es necesario.

Comprender c√≥mo usar los componentes con √©xito en Figma puede ahorrarle mucho tiempo al realizar un proyecto de dise√Īo. Al aprender a crear un sistema de componentes de alta calidad, puede crecer como dise√Īador. No solo eso, sino que tambi√©n puede ayudarlo a mantener un flujo de trabajo constante a lo largo de su viaje creativo y facilitar que todos los futuros colaboradores encuentren su trabajo.

¬ŅHas probado a usar Figma para tus proyectos creativos? ¬ŅC√≥mo encontraste el uso de componentes? H√°ganos saber m√°s sobre su experiencia en la secci√≥n de comentarios a continuaci√≥n.

Audio vídeo Cómo usar componentes en Figma
A√Īade un comentario de C√≥mo usar componentes en Figma
¡Comentario enviado con éxito! Lo revisaremos en las próximas horas.