Componentes y variantes en Figma con Atomic Design

Curso de Figma: Técnicas Avanzadas de Diseño

Contenido del curso

Cómo iniciar los proyectos en Figma

Diseño Responsive y Técnicas Avanzadas

Crea componentes avanzados

Variables en Figma

Inteligencia Artificial para Figma

Crear Landing Pages con Figma

Interacción Avanzada con Prototipos

Prototipado avanzado con Figma

Cómo trabajar con los equipos de desarrollo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:30

Componentes y variantes en Figma con Atomic Design

Curso de Figma: Técnicas Avanzadas de Diseño

Clase 11 de 29

Clase 11 / 29

Recursos

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.

Carolina Gómez

Hace un año

Resumen – Componentes Avanzados en Figma

En esta clase se profundiza en el uso de componentes avanzados en Figma, destacando cómo crear y organizar componentes dentro de una tarjeta o card. También se introduce el concepto de auto-layout, que proviene del modelo de caja del navegador.

Puntos clave:

Modelo de caja y auto-layout:
- El auto-layout permite definir cómo se comportan los elementos en relación con su contenido y su contenedor.
- Es importante entender el modelo de caja (contenido, bordes, márgenes, rellenos) para un diseño correcto en Figma.
Creación de componentes:
- Se extraen elementos individuales de una card (botón, título, imagen, badge, etc.) y se convierten en componentes separados.
- Se recomienda nombrar correctamente cada elemento para una mejor organización en el panel izquierdo.
Jerarquía de componentes:
- Figma permite organizar componentes jerárquicamente usando la sintaxis con "slash" (/), por ejemplo: Card/Button, Card/Title, etc.
- Esto permite agrupar lógicamente elementos como parte de un componente principal.
Uso de variantes:
- Una vez creados los componentes, se seleccionan y se combinan como variants (variantes) de un mismo componente.
- Esto permite cambiar fácilmente entre elementos desde el panel derecho (por ejemplo, cambiar un badge por un botón).
Publicación en la librería:
- Al crear o modificar componentes, Figma detecta los cambios y permite publicarlos en la librería del equipo.
- Es posible añadir una descripción a cada publicación para registrar lo que se ha hecho.
Construcción de la card:
- Se agrupan los componentes dentro de un auto-layout principal.
- Se ajustan los márgenes, rellenos, bordes y se define el comportamiento del layout (como fill container o hug contents).
- Se asigna una jerarquía al componente final como Card/Primary y se publica en la librería.
Uso en otros archivos:
- Al activar la librería en otros documentos, se puede reutilizar la card y sus variantes fácilmente.
- Las variantes permiten modificar un elemento directamente desde el panel de propiedades.

Conclusión: La clase muestra cómo descomponer una tarjeta en componentes reutilizables, organizarlos jerárquicamente, combinarlos como variantes y prepararlos para su uso en distintos archivos mediante librerías. En próximas clases se verá cómo hacer estas cards responsivas.

Comentarios (19)19 comentarios

Ariel Hernán Contini

Hace 3 años

Miranda María Guerrero

Carmen Ansio

Profesor

Martín Fuentes

Nidia Carrillo

Hace 2 años

Claudia Agudelo

Roxana Carvallo

Tino Ponce

Diana Alexandra Rodríguez Rojas

John Antonio Carranza Acevedo

Laura Pino

Christian Fernando Arias Ramirez

Hace 7 meses

Clever David Cardenas Medina

Hace 5 meses

Limber Fernando Alanoca Plata

TrainingAndDevelopment Frubana

Sandra Chaparro

Sayra Robledo

Miguel Alejandro Camacho Sánchez

Luis Gonzalez

Hugo Ponce

Alberto Chaves

Roiber Avendaño

Cristina Belén Bascur

Alan Valentín Castellón Cuentas

Cómo iniciar los proyectos en Figma

Diseño responsivo en Figma con Atomic Design

Cómo construir una card con Atomic Design

Estilos y librerías compartidas en Figma

Diseño Responsive y Técnicas Avanzadas

Cómo crear una grid de 12 columnas en Figma

Constraints en Figma para diseño responsive

Menú responsive con Auto Layout y constraints

Wrap y min/max width en Figma Auto Layout

Cómo usar el design system en Figma

Ensamblando una interfaz mobile en Figma

Breakpoints y Responsively para probar diseño responsive

Crea componentes avanzados

Componentes y variantes en Figma con Atomic Design

Propiedades de Componentes en Figma para Diseños Flexibles

Copies dinámicos en Figma con Google Sheets

Variables en Figma

Variables en Figma: Creación y uso para diseño eficiente

Traducciones automáticas en Figma con variables

Inteligencia Artificial para Figma

Genera iconos, copies e imágenes con Magician

Muse y Builder contra la página en blanco

Crear Landing Pages con Figma

Crea briefings y sitemaps con IA en Figma

Paleta de Colores Corporativos para Banco Transfer

Wireframes de landing page en tres secciones

Landing page responsive con Auto Layout en Figma

Interacción Avanzada con Prototipos

Creación de Microinteracciones en Figma: Guía Paso a Paso

Microinteracciones con variantes en Figma

Prototipado de Navegación en Figma: Interacciones y Animaciones

Prototipado avanzado con Figma

Cómo dar y recibir feedback constructivo en proyectos de diseño

Diseño Web Responsive con Figma y Atomic Design

Documentación de Diseño en Figma: Elementos y Plugins Esenciales

Cómo trabajar con los equipos de desarrollo

Dev Mode de Figma para desarrolladores

Figma dentro de Visual Studio Code

Componentes y variantes en Figma con Atomic Design