Crear componentes y variantes en Figma te permite construir interfaces escalables que reflejan los principios de Atomic Design. Aquí aprenderás a transformar elementos de una card en componentes reutilizables, agruparlos como variantes y publicarlos en tu librería para usarlos en cualquier archivo.

Por qué auto-layout viene del box model del navegador

Antes de iterar sobre la card conviene entender de dónde sale el concepto de auto-layout. Viene directamente del box model del navegador, ese diagrama donde cada contenido tiene un height y un width, y a partir de ahí defines márgenes internos, bordes y cómo se comporta respecto a otros elementos [00:32].

Entender este modelo te ayuda a predecir cómo se acomodarán tus diseños en Figma cuando aplicas espaciados y contenedores. No es un capricho de la herramienta, es una traducción visual de cómo funciona la web.

¿Qué es el box model? Es el modelo del navegador que define cómo cada elemento tiene contenido, padding, borde y margen. Auto-layout en Figma replica esa lógica para que tu diseño se comporte como en código.

Cómo convertir cada elemento de una card en componente

La idea es tomar la card y descomponerla pieza por pieza. Seleccionas el botón, lo sacas del frame y lo conviertes en componente desde el ícono superior. Repites el proceso con el título, el badge, la imagen y el body [02:30].

Un truco práctico: cuando un elemento queda dentro de otro frame, sácalo para que su nombre aparezca claramente en el panel izquierdo y en el canvas. Figma agranda los nombres cuando haces zoom out, así puedes identificar elementos sin importar la distancia visual.

¿Por qué tanto detalle con cada elemento? Porque a nivel de Atomic Design, necesitas tus átomos bien definidos para que los cambios se reflejen en moléculas y organismos más complejos.

Cómo agrupar componentes con jerarquía de slash

Figma reconoce jerarquías separadas por barra (/). Si nombras tu badge como card/badge, le estás diciendo que ese elemento pertenece al grupo card. Haces lo mismo con card/button, card/title, card/body y card/image [05:48].

Esta convención no es decorativa. Es la base que permite que Figma reconozca un conjunto de componentes como candidatos a convertirse en variantes.

Qué son las variantes en Figma y cómo combinarlas

Una vez que todos los elementos comparten la jerarquía card/, los seleccionas y Figma te ofrece la opción "Combine as variants" en el panel derecho. Aceptas, y todos quedan dentro de un contenedor único llamado card con líneas punteadas que indican que son variantes [07:15].

Las variantes funcionan como un selector. Al arrastrar el componente desde la pestaña Assets, en el panel derecho puedes cambiar entre badge, body, button, image o title sin duplicar componentes en tu librería.

¿Qué es una variante en Figma? Es una agrupación de componentes que comparten propósito pero cambian en estado, tipo o estilo. Te permite seleccionar la versión correcta desde un menú en lugar de buscar componentes separados.

Por defecto, Figma nombra la propiedad como "Property 1". Renómbrala a algo descriptivo como element para que el menú diga claramente qué estás eligiendo.

Cómo publicar componentes en tu librería de Figma

Con todos los elementos convertidos en variantes, vas al ícono de librería y haces clic en Publish changes. Figma te muestra cuántos cambios detectó (en este caso cuatro) y te pide un mensaje descriptivo [09:32].

Un buen mensaje sería: "Create elements for our card". Esto deja trazabilidad para tu equipo. Una vez publicado, abre otro archivo, habilita la librería desde el menú de assets y verás los mismos componentes disponibles para arrastrar.

• Activa la librería desde el panel de Assets en el archivo destino.
• Busca el componente por nombre, por ejemplo "badge".
• Selecciona la variante deseada desde el panel derecho.

Cómo armar la card final con auto-layout y fill container

Con todos los componentes publicados, los colocas dentro de un layout principal. Aplicas auto-layout al contenedor, defines un padding de 24 y un border-radius de 20 [11:45].

Aquí entra una propiedad clave del auto-layout: los modos de comportamiento. Un elemento puede ajustarse a su contenido (hug contents) o expandirse al ancho de su contenedor padre (fill container).

Cuándo usar fill container en lugar de hug contents

El botón submit por defecto se ajusta al texto "submit" porque tiene activo hug contents. Pero en el diseño original el botón debe ocupar todo el ancho de la card. La solución es cambiarlo a fill container y centrar su contenido [12:58].

Esta diferencia entre hug y fill es lo que separa un diseño rígido de uno responsivo. Cuando un componente entiende a su contenedor padre, se adapta sin que tengas que redibujarlo.

¿Cuál es la diferencia entre hug contents y fill container? Hug contents ajusta el elemento al tamaño de su contenido interno. Fill container expande el elemento al ancho o alto disponible en su contenedor padre.

Finalmente, le asignas la jerarquía card/primary al componente principal, lo publicas en la librería y queda listo para que en próximas iteraciones se adapte a layouts mobile, desktop y tablet.

¿Ya tienes tu librería de componentes organizada con esta lógica de variantes? Cuéntame en los comentarios cómo estás nombrando tus jerarquías.