¿Te ha pasado que terminas diseñando el mismo botón cinco veces en una página web o app? Los componentes en Figma resuelven justo eso: te permiten crear un elemento una vez y reutilizarlo en toda la interfaz, manteniendo coherencia y ahorrando horas de trabajo.

Diseñar software se trata de eficiencia. Y aquí entra en juego la combinación entre auto layout, vectores y componentes para construir interfaces escalables sin repetir decisiones.

¿Qué es un componente principal y qué es una instancia?

Un componente principal o main component es el elemento maestro del que dependen todas las copias. Cuando lo creas, Figma lo identifica con un color fucsia tirando a morado y un ícono de cuatro rombos agrupados en la barra de capas [01:48].

Las instancias son las copias que arrastras o duplicas a partir de ese componente principal. Obedecen a los cambios que hagas en el maestro: si cambias el color, el texto o la posición de un ícono en el principal, todas las instancias replican ese cambio en cadena.

¿Qué es una instancia en Figma? Es una copia ligada a un componente principal. Hereda sus propiedades automáticamente, pero puede sobrescribir ciertos detalles como color o texto sin perder la conexión con el maestro.

¿Cómo creo un componente desde cero?

Selecciona el elemento que quieras convertir en maestro, ve a los tres puntos en la barra de propiedades arriba a la derecha y elige Create component. También puedes usar el atajo:

• Mac: Command + Option + K.
• Windows: Control + Alt + K.

En la clase, Santiago convierte un botón de descarga en componente y lo nombra map [02:30]. Al duplicarlo con Command + D u Option + clic, las nuevas copias ya son instancias atadas al maestro.

¿Cómo se comportan las instancias rebeldes frente al componente principal?

Una instancia puede sobrescribir propiedades específicas y volverse, como dice Santiago, "una hija rebelde" [04:51]. Cuando eso pasa, el componente principal respeta esa decisión local y no la pisa con cambios globales.

Ejemplos de sobrescritura que se mostraron en la clase:

• Cambiar el fondo de una instancia a naranja.
• Modificar el texto de un botón a "Descargar".
• Alargar la longitud de una instancia.

Si luego alargas el componente principal, todas las instancias se alargan excepto la que ya alargaste manualmente. Lo mismo pasa con el color y la tipografía: la instancia rebelde mantiene su sobrescritura.

¿Cómo empujo los cambios de una instancia al componente principal?

A veces una instancia queda mejor que el maestro. Para promover ese cambio al componente principal, ve a los tres puntos en la barra de propiedades y selecciona push changes to main component [06:21].

Al hacer clic, el maestro adopta esos ajustes y las demás instancias se actualizan, salvo aquellas que ya tenían sus propias sobrescrituras en otras propiedades.

¿Dónde encuentro mis componentes guardados?

Figma organiza tus componentes en la pestaña Assets, ubicada en la barra superior junto a File [07:08]. Ahí aparecen las bibliotecas locales del archivo y los componentes que ya publicaste.

Desde Assets puedes arrastrar el componente a cualquier frame y duplicarlo con Command + D las veces que necesites. Cada copia funciona como instancia y responde a los cambios del maestro.

¿Cómo desligo una instancia de su componente principal? Selecciona la instancia, abre los tres puntos en la barra de propiedades y elige detach instance. La copia conservará el auto layout original pero dejará de obedecer al maestro.

¿Cómo reseteo una instancia que tiene demasiados cambios?

Si sobrescribiste tantas propiedades que perdiste el rumbo, Figma te deja volver al estado original. Ve a los tres puntos y selecciona reset. Puedes resetear cambios específicos como tamaño, color o texto, o hacer un reset completo para regresar a la versión inicial del componente [08:49].

Esta flexibilidad es lo que hace de los componentes el fundamento más importante del diseño de software escalable: diseñas una vez, reutilizas en todas partes y ajustas con precisión cuando lo necesitas.

¿Ya identificaste qué partes de tu próximo proyecto deberían ser componentes? Cuéntame en los comentarios cuál vas a convertir primero.