Diseñar componentes en Figma sin exponer sus propiedades editables obliga a quien los usa a buscar capas ocultas, hacer múltiples clics y arriesgarse a romper la estructura. Las propiedades editables resuelven ese problema: tú decides qué se puede modificar y lo muestras en el panel derecho, con campos claros que indican exactamente qué cambiar y cómo hacerlo.
¿Cómo se crean propiedades de texto en un componente?
El primer paso es convertir los textos dinámicos del componente en propiedades visibles. Dentro del component set del transaction row, se selecciona el elemento de texto —por ejemplo, el nombre del restaurante o el detalle de la transacción— y en el panel derecho se pulsa el botón para aplicar una variable o propiedad [1:43]. Al no existir ninguna, se crea una nueva de tipo texto con un nombre descriptivo como transaction label y un valor por defecto.
Este mismo flujo se repite para el monto (amount) y el detalle de la tarjeta. Un atajo útil: seleccionar varios elementos a la vez con Comando + Shift + clic y asignarles la misma variable en una sola acción [2:35]. Una vez creadas, las propiedades aparecen en el panel del component set y se puede reordenar su posición según la prioridad que prefieras.
El resultado es inmediato. Al seleccionar cualquier instancia del componente en el diseño, los campos editables se muestran en el panel derecho sin necesidad de hacer doble clic repetidamente para llegar a la capa correcta [3:22].
¿Qué es una propiedad booleana y para qué sirve?
Una propiedad booleana funciona como un interruptor de encendido y apagado: su valor es true o false. Sirve para ocultar o mostrar elementos dentro del componente de forma dinámica [4:05]. En el ejemplo, se aplica al ícono de disclosure que indica que se puede ver el detalle de una transacción.
Para crearla, se selecciona el elemento, se accede a la opción de apariencia en el panel derecho y se añade una nueva propiedad con un nombre como show disclosure o show icon. El valor por defecto se establece en true. Al usar la instancia, aparece un toggle que permite activar o desactivar la visibilidad del elemento sin modificar la estructura interna [4:42].
¿Cómo funciona el instance swap en los íconos?
El instance swap permite intercambiar una instancia de componente por otra del mismo grupo. Es la solución para cambiar el ícono de categoría —gimnasio, supermercado, restaurante— directamente desde el panel de propiedades, sin entrar a las capas internas del componente [5:18].
Se selecciona el ícono dentro del componente, se aplica la propiedad de tipo instance swap y se le asigna un nombre como category. Figma filtra automáticamente los íconos disponibles según la sección donde estén organizados. Para la variante de ingresos, se puede crear un instance swap separado llamado category incomes y restringir las opciones solo a íconos relevantes, como la bolsa de dinero o el cochinito de ahorros [6:52]. De esta manera se evita que alguien coloque un ícono de gimnasio en una transacción de ingreso.
¿Qué son los slots y cómo hacen flexible un componente?
Los slots son áreas flexibles dentro de un componente principal que permiten agregar, eliminar y reorganizar contenido libremente [7:55]. A diferencia de las propiedades anteriores, un slot no se limita a cambiar un texto o intercambiar un ícono: permite modificar la cantidad y el tipo de elementos hijos.
Para crear un slot, se selecciona el contenedor que agrupa los elementos repetitivos y se pulsa el botón convert to slot. Al hacerlo, la capa cambia a un tono rosa más intenso que la distingue visualmente [8:42]. El contenido actual se convierte en un placeholder por defecto que se puede reemplazar.
¿Cómo se usa un slot en la práctica?
Una vez convertido, el componente de tarjeta contenedora acepta cualquier cantidad de instancias de transaction row. Si hoy solo hubo dos transacciones, se eliminan las sobrantes. Si ayer hubo seis, se pegan más instancias dentro del slot [9:30]. Incluso se puede insertar un elemento completamente diferente, como un botón, cuando el diseño lo requiera.
La flexibilidad no significa libertad absoluta, sino control intencional: el slot existe para que puedas adaptarte a escenarios reales sin crear variantes adicionales del componente.
¿Cuál es la regla de oro para exponer propiedades?
El error más común es dejar ediciones escondidas dentro de capas anidadas en lugar de exponerlas como propiedades [10:32]. La regla es directa: si otra persona va a necesitar cambiar algo en la instancia, debe ser una propiedad visible. El chequeo final consiste en seleccionar la instancia, revisar el panel de propiedades y confirmar que todo lo necesario se puede modificar desde ahí.
Ahora que conoces propiedades de texto, booleanas, instance swap y slots, aplícalas al componente de header y al tab bar. Comparte en los comentarios qué propiedades editables utilizaste y por qué elegiste cada una.
