Diseñar interfaces eficientes significa dejar de repetir trabajo. Si alguna vez has creado el mismo botón, el mismo ícono o la misma barra de navegación varias veces en un mismo proyecto, los componentes en Figma van a transformar por completo tu flujo de trabajo. Con ellos puedes tomar una decisión de diseño una sola vez y replicarla de forma inteligente a lo largo de toda tu interfaz.
¿Qué es un componente principal y cómo se crea en Figma?
Un componente principal (main component) es el elemento maestro del que se derivan todas las copias. Para crearlo, seleccionas el objeto que deseas convertir, vas a la barra de propiedades (los tres puntos en la esquina superior derecha) y eliges create component [3:25]. También puedes usar el atajo Command + Option + K en Mac o Control + Alt + K en Windows.
Una vez creado, notarás cambios visuales importantes:
- En el panel de capas aparece con un color fucsia o morado que lo distingue de cualquier otro elemento.
- Se muestra con cuatro rombos agrupados, señal de que es un componente principal.
Cada vez que dupliques este componente con Command + D, lo arrastres con Option + clic o simplemente lo copies y pegues, estarás generando instancias [4:10]. Las instancias son copias vinculadas que obedecen a todos los cambios que realices sobre el componente principal.
¿Cómo se propagan los cambios del componente principal a las instancias?
La relación es directa: si modificas el relleno, el texto o la posición de un ícono en el componente principal, todas las instancias reflejan ese cambio automáticamente [4:38]. Por ejemplo, si cambias el color de fondo a verde oscuro, ajustas la tipografía o mueves un ícono de izquierda a derecha dentro de un auto layout, cada instancia se actualiza al instante.
¿Qué sucede cuando modificas una instancia de forma individual?
Aquí es donde aparece el concepto de sobrescritura (override). Puedes hacer cambios puntuales sobre una instancia sin romper el vínculo con el componente principal [5:28]:
- Cambiar el color de fondo de una instancia en particular.
- Editar el texto para que diga algo distinto.
- Ajustar la longitud o el tamaño manualmente.
Cuando luego modifiques el componente principal, las instancias que no fueron alteradas en ese aspecto específico se actualizarán, pero las que tengan sobrescrituras conservarán sus cambios rebeldes [6:16]. Si alargaste manualmente una instancia, esa no cambiará de tamaño. Si le cambiaste el color, esa mantendrá su color propio.
¿Cómo empujar cambios de una instancia al componente principal?
Si descubres que un cambio hecho sobre una instancia funciona mejor que el diseño original, puedes promover ese cambio al componente principal. Solo necesitas ir a los tres puntos en la barra de propiedades y seleccionar Push changes to main component [7:16]. Al hacerlo, el componente principal adopta esos cambios y todas las instancias que no tengan sobrescrituras se actualizan también.
¿Cómo usar la biblioteca de assets y gestionar instancias?
Cuando creas un componente en tu archivo, este aparece automáticamente en la pestaña de assets en la barra superior [8:02]. Desde ahí puedes arrastrarlo hacia cualquier frame y generar nuevas instancias sin necesidad de buscar el componente original en tus capas.
Existen dos acciones clave para gestionar instancias que ya no necesitas vincular:
- Detach instance: rompe el vínculo entre la instancia y su componente principal [8:48]. El elemento conserva su estructura de auto layout y todas sus propiedades visuales, pero deja de responder a cambios del componente maestro.
- Reset: si hiciste demasiados cambios en una instancia y quieres volver al estado original, ve a los tres puntos y selecciona reset [9:36]. Puedes resetear solo el tamaño o aplicar un reset completo que devuelve la instancia a su estado inicial.
Estas herramientas te dan flexibilidad total para decidir cuándo mantener la consistencia y cuándo necesitas libertad creativa.
Dominar la relación entre componentes principales e instancias es el fundamento más importante del diseño de software en Figma. Con esta base, el siguiente paso es explorar las propiedades de los componentes, cómo se modifican entre sí y cómo crear múltiples variantes de un solo componente para ahorrar espacio y tiempo. ¿Qué componente vas a crear primero en tu proyecto?
