Cómo usar componentes en Figma

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 fabricación de publicaciones en redes sociales, con Figma puede experimentar con todo tipo de funciones de diseño gráfico y ampliar 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 esto puede ayudarlo a mejorar su trabajo.

Si estás interesado en 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 operar 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 se puede hacer en un icono, botón y más, dependiendo de su proyecto.

Lo mejor 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 particularmente útil si tiene un marco de tiempo ajustado o colabora con otros diseñadores y desea acelerar su flujo de trabajo.

Al comenzar, notará que hay dos barras laterales a cada lado del lienzo principal que está utilizando. Puede usar las herramientas de cualquiera de estas barras laterales para realizar ediciones en su proyecto.

La barra lateral en el lado derecho le brinda acceso a cualquier configuración de prototipo y le permite ajustar o editar cualquier propiedad de sus componentes. Sin embargo, la barra lateral de la izquierda le presenta las capas, los activos y las páginas utilizadas en su proyecto. Esto se conoce como el “Panel de capas”.

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

• El componente maestro (o principal) (icono de diamante cuádruple)
• Un componente de instancia (icono de diamante único)

Componentes maestros

Antes que nada, primero debe crear el componente maestro. Para hacer esto, siga los pasos a continuación:

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”. Haga clic en esto.
   
4. Desde aquí, notará un menú donde puede realizar cambios en su componente y rediseñar estilos en todos los proyectos.
   

Otra forma de crear un componente maestro es usar los atajos:

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

Por supuesto, este método solo funciona si está utilizando Figma en una PC.

Componentes instantáneos

Un componente instantáneo es una copia de su componente maestro. Cuando el componente maestro se edita 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 particularmente útil y ahorrarle mucho tiempo. Por ejemplo, se acabaron los días de ingresar manualmente a todos sus componentes para repetir las mismas ediciones. En cambio, Figma los cambia todos por ti.

Puede llegar el momento en que haya creado varias Instancias y le gustaría volver a su Componente maestro para poder realizar un cambio rápido en todos sus componentes. Para acceder a su componente principal, haga lo siguiente:

1. Haga clic derecho en cualquier Instancia.
   
2. Haga clic en “Ir al componente maestro”.
   
3. El componente maestro aparecerá en la barra lateral del lado izquierdo.
   

Mientras que hacer componentes uno a la vez es relativamente simple; puede acelerar las cosas haciéndolos a granel. Para hacer esto, siga estos pasos:

1. Desde su “Panel de capas”, elija las capas en las que desea crear componentes.
   
2. Haga clic en el ícono de la flecha hacia abajo ubicado junto al ícono del Componente maestro dentro del “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 de cuadro.
   

Preguntas frecuentes adicionales

¿Cómo anulo 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 conoce como “anulación”.

Una vez que anule una Instancia, los cambios realizados en el Componente maestro no la afectarán. Para hacer esto, consulte los pasos a continuación:

1. Haga clic en su componente de instancia.

2. Desde 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é hago si elimino accidentalmente mi componente maestro?

Cuando pasa todo el día editando contenido, a veces puede equivocarse y eliminar algo importante, como su componente maestro. No temas, restaurarlo es tan fácil como 1-2-3. Simplemente siga estos pasos básicos para recuperar ese componente maestro que falta:

1. Vaya 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 maestro 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 esté trabajando para 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 una descripción”.

Una vez que haya hecho eso, cualquier espectador externo puede 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. Simplemente sigue estos pasos:

1. En Figma, abra la página donde le gustaría importar 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 haya terminado esto, 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, podrá 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 permitir que futuros colaboradores encuentren su trabajo fácilmente.

¿Has probado a usar Figma para tus proyectos creativos? ¿Cómo encontró el uso de componentes? Háganos saber más sobre su experiencia en la sección de comentarios a continuación.