Cambiar el color de un botón y descubrir que solo se actualizó en una pantalla es una de las frustraciones más comunes al diseñar interfaces. La raíz del problema no es un bug, sino la confusión entre el componente principal (main component) y sus instancias. Comprender esta diferencia es fundamental para mantener la consistencia visual en proyectos con múltiples pantallas.
¿Cuál es la diferencia entre un componente y un estilo?
Un estilo controla una sola propiedad: un color, una tipografía. En cambio, un componente controla un elemento completo, incluyendo su estructura, la configuración de auto layout, los rellenos y los textos. Es un bloque reutilizable que agrupa todo lo necesario para funcionar de forma autónoma [0:17].
En el ejemplo del dashboard de transacciones de Finwise, se identifican elementos repetitivos como:
- La fila de transacción (transaction row), que puede representar un gasto o un ingreso.
- Las tarjetas de categoría (category row).
- Las tarjetas de estadísticas (stat cards), con una versión prominente y otra general.
- El header, donde solo cambia el texto.
- El tab bar, donde solo cambia el elemento activo.
¿Cómo se crea y reutiliza un componente en Figma?
Una vez que el elemento tiene configurado su auto layout con la estructura deseada, crear el componente es sencillo. Existen tres formas [1:42]:
- Usar el ícono de crear componente en el right panel.
- Presionar Comando + Option + K.
- Hacer clic derecho y seleccionar Crear componente.
Para reutilizarlo, puedes copiar y pegar directamente con Comando C y Comando V, lo que genera una instancia. También puedes ir a la sección de Assets en el panel izquierdo, buscar el componente por nombre y presionar Insertar instancia [2:13].
¿Cómo reemplazar elementos existentes por instancias?
Cuando ya tienes elementos en pantalla que no están conectados a un componente, la función Paste to Replace es tu mejor aliado. Seleccionas los elementos, haces clic derecho y eliges esa opción para sustituirlos por instancias del componente [2:43]. Después, puedes actualizar el contenido de texto usando la herramienta de reemplazo de content con un prompt específico.
¿Qué son los overrides y por qué pueden complicarse?
Cuando modificas el texto, el color o un ícono dentro de una instancia, estás creando un override: una edición local que no afecta al componente principal [3:28]. El componente mantiene la estructura e información base, pero cada instancia puede adaptarse al contexto.
Por ejemplo, si necesitas que una transacción muestre un ingreso de salario en lugar de un gasto, cambias el monto, el color al brand positive y el ícono. Esto es posible porque los íconos internos también son componentes con sus propias instancias intercambiables [4:24].
Sin embargo, los overrides se acumulan rápidamente:
- Cambiar categoría, ícono y color en cada fila de transacción se vuelve tedioso.
- En 50 pantallas, gestionar estos cambios manuales es insostenible.
¿Cómo sincronizar cambios entre instancias y componente principal?
Figma ofrece la opción Push changes to main component [6:09]. Al seleccionar una instancia con overrides modificados y usar esta función desde los tres puntos del panel, los cambios se envían al componente principal. Los overrides existentes en otras instancias se respetan, pero la gestión puede volverse compleja.
Para revertir cambios, puedes usar:
- Reset instance: reinicia la instancia completamente.
- Reset specific changes: revierte solo propiedades puntuales como el fill o el tamaño [6:41].
¿Cuándo los overrides dejan de ser suficientes?
Cuando un mismo componente necesita verse diferente según su contexto, como distinguir gastos de ingresos, mantener overrides en cada instancia no escala. La solución son las variantes: permiten que un solo componente contenga múltiples versiones sin crear componentes separados ni depender de ediciones manuales [7:33].
El reto práctico consiste en crear el main component de category row, las stat cards para el balance, el tab bar y el header. Cada uno de estos elementos sigue la misma lógica: definir la estructura una vez y reutilizarla con consistencia.
¿Ya identificaste qué elementos de tu proyecto podrían convertirse en componentes reutilizables? Comparte tu experiencia y cuéntanos qué parte del proceso te resulta más desafiante.
