Componentes de Figma: de cero a héroe | CURSO GRATIS

Duración: 1 hora, 21 minutos | Lecciones: 9

En Figma, puede crear componentes muy fácilmente, y como parte de su flujo de trabajo estándar, para que puedan reutilizarse más tarde en diferentes proyectos. Por lo tanto, un mínimo esfuerzo inicial (y una sola vez) significa que tendrá una experiencia de diseño optimizada de aquí en adelante. ¡Vamos a sumergirnos!

1. Introducción

Ver video lección [0:00] ↗

Así que sí, hacer un botón y guardarlo como un componente significa que puede usar ese mismo botón una y otra vez en múltiples diseños. Pero, con mucho, el aspecto más popular de los componentes en Figma es el hecho de que si realiza un cambio en un componente guardado, este cambio se reflejará automáticamente en cada instancia de ese componente en su diseño actual.

cambiar el color de un botón

Si desea cambiar el color de un botón, solo necesita hacerlo en el botón principal y se actualizarán todas las instancias de este botón.

Ahora, para seguir este curso, necesitará algunos archivos a su disposición. Descargar lo siguiente le ayudará a seguir este tutorial paso a paso. Una vez que haya descargado todo y esté listo para usar, continúe con la siguiente lección:

Archivos fuente

Iconos

Iconos impresionantes de fuentes

Logotipos de criptomonedas

2. Crear uno o más componentes

Ver video lección [4:29] ↗

Con el archivo Figma de origen abierto, puede comenzar el proceso de creación de un componente. Para crear un componente, primero debe seleccionar las capas que le gustaría incluir en él. Continuando con nuestro ejemplo de botón, deberá seleccionar las capas de texto y forma, o un grupo de elementos, para asegurarse de que está creando un componente correctamente.

Un simple clic derecho es todo lo que se necesita para crear un nuevo componente de esta manera.

Un elemento (o grupo de elementos) se volverá morado en el menú de la izquierda cuando se convierta en un componente.

3. Componentes principales frente a instancias

Ver video lección [10:38] ↗

Una cosa que es importante comprender acerca de los componentes está relacionada con la terminología, solo para que no se confunda a medida que avanza en varios tutoriales de Figma.

Por lo tanto, la primera vez que crea un componente, se denomina componente principal. Sin embargo, cada vez que crea una copia de ese componente principal, esto se conoce como una instancia.

componente principal vs instancia

En particular, no puede cambiar ningún atributo de una instancia, solo en el componente principal.

4. Realizar cambios en componentes e instancias

Ver video lección [17:51] ↗

Puede cambiar el contenido contenido dentro de la instancia de un componente. Esto se denomina anulación de componente y describe cualquiera de los cambios que realice en una instancia individual. Estas anulaciones pueden incluir cosas como:

  • El contenido dentro de la instancia.
  • El relleno y el trazo
  • Radio del borde
  • Cuadrículas de diseño
  • Configuración de exportación
  • Nombres de capas
  • Estilos de capa y texto

5. Intercambio de instancias de componentes

Ver video lección [28:06] ↗

En Figma, el intercambio de instancias describe el proceso en el que puede cambiar la instancia de un componente con otra instancia. Esto puede ser útil en una amplia variedad de situaciones, pero es particularmente útil en los menús en los que es posible que necesite moverse por las opciones de menú o los botones sobre la marcha.

intercambiar instancias de componentes

6. Nombrar y organizar componentes

Ver video lección [34:39] ↗

Un archivo de diseño siempre debe estar organizado y Figma nos brinda un montón de herramientas para eso. Uno de ellos es la capacidad de organizar automáticamente los componentes si se nombran de cierta manera.

Usando la convención de nomenclatura separada «barra» o «» en Figma, lo que hace que todos los componentes seleccionados se nombren como «Nombre que elija / nombre del componente». Esto hace que sea mucho más fácil ubicar elementos similares en su lista de componentes. En este ejemplo, los elementos están organizados en la categoría «Icono de menú».

nombrar componentes

7. Uso de variantes de componentes

Ver video lección [47:00] ↗

Las variantes le permiten agrupar componentes similares dentro del mismo contenedor. Por ejemplo, un botón puede tener diferentes estados, como presionar, pasar el mouse por encima o deshabilitado. Pero en lugar de crear un componente separado para cada uno de estos estados, puede crear un solo componente con múltiples variantes.

El uso de variantes de componentes da como resultado una mesa de trabajo y un flujo de trabajo mucho más limpios.

8. Trabajar con propiedades de componentes

Ver video lección [1:00:26] ↗

Entonces, ahora sabe que las variantes de componentes pueden ser muy poderosas, sin embargo, llega un punto en el que su uso se vuelve ineficiente. Por ejemplo, puede tener un botón que tenga docenas de variantes para tener en cuenta diferentes opciones de color, estados, modo claro y oscuro, etc. Pero tener todas estas variantes puede dificultar encontrar la correcta que necesita en un momento dado.

La solución a este problema en Figma son las propiedades de los componentes. Si bien no sustituyen a las variantes, funcionan junto con ellas para simplificar en gran medida el proceso de diseño.

Hay 4 tipos de propiedades de componentes: intercambio de instancias, texto, booleano y variante.

9. Creación de prototipos con componentes interactivos

Ver video lección [1:13:31] ↗

La creación de prototipos tiene que ver con la interacción, su propósito es mostrarle cómo funcionaría un diseño en el mundo real. Para hacer que los prototipos que produce estén lo más cerca posible de la realidad, Figma le permite crear componentes interactivos.

Los componentes interactivos permiten cambiar entre diferentes variantes en un prototipo.

Obtenga más información sobre Figma y cómo usarlo

Ahora que domina los componentes de Figma, es posible que desee ampliar aún más su conjunto de habilidades. ¡Esta colección de tutoriales debería mantenerte ocupado durante algún tiempo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *