Cómo crear un header con variantes en Figma

Curso Práctico de Sistemas de Diseño con Figma

Contenido del curso

Visión general de los Sistemas de Diseño

Guía de Estilos con Figma

Librería de componentes

Implementación y medición

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:14

Cómo crear un header con variantes en Figma

Curso Práctico de Sistemas de Diseño con Figma

Clase 20 de 26

Clase 20 / 26

Recursos

Crear un header en Figma usando atomic design te permite construir moléculas reutilizables a partir de átomos ya existentes, como botones y textos. Aquí aprenderás a diseñar dos variantes de header (con CTA y simple) aplicando auto layout, variantes y fundamentos de diseño responsive. Es contenido pensado para diseñadores que están armando su primer design system.

¿Qué estructura tiene un header como molécula?

La molécula header parte de una arquitectura sencilla con una sola variante: el type. Esa variante cambia entre dos opciones, with CTA y simple, y cada una responde a una necesidad visual distinta.

La primera versión incluye un texto a la izquierda que funciona como logo y un botón al lado derecho que actúa como call to action. La segunda versión es más compacta, sin botón, con el logo centrado y menor altura porque ya no necesita tanto espacio vertical [00:38].

¿Qué es una molécula en atomic design? Es un componente formado por la combinación de átomos más pequeños, como un texto y un botón, que juntos cumplen una función específica dentro de la interfaz.

¿Cómo armar el header con CTA paso a paso?

El primer paso es crear un rectángulo base que defina el contenedor del header. La medida recomendada para mobile first es 360px de ancho, porque es un estándar actual con el que también trabajan los desarrolladores [02:00]. La altura inicial puede ser de 100px y se ajusta después según el tamaño del CTA.

Luego aplicas un relleno usando un color del design system, por ejemplo primary 50, que mantiene consistencia con el resto de componentes.

Para los elementos internos sigue esta secuencia:

Agrega un texto que funcione como logo (por ejemplo, Ugly a 18px).
Inserta el botón ya creado como átomo, aprovechando sus variantes.
Selecciona ambos elementos y presiona Shift + A para activar auto layout [03:30].

¿Cómo separar el logo y el botón con auto layout?

Al aplicar auto layout por defecto, los elementos quedan juntos. Para separarlos, abres las opciones del auto layout (los tres puntos) y eliges la opción de espacio en el medio. Figma muestra visualmente cómo quedará el resultado antes de aplicarlo.

A partir de ahí, cuando hagas resize del contenedor, el logo se queda a la izquierda y el botón a la derecha automáticamente. Esto convierte tu header en un componente responsive listo para mobile y desktop.

¿Qué márgenes internos debes aplicar?

Los márgenes responden a los fundamentos definidos previamente en el design system. Para mobile, el estándar es 24px arriba, abajo y a los lados [05:20]. Esto refuerza la coherencia visual y respeta las decisiones tomadas en la fase de fundamentos.

¿Cómo convertir el header en componente con variantes?

Una vez tienes la estructura visual lista, seleccionas el frame y lo conviertes en componente. En el panel de propiedades agregas una variante llamada type, y cambias el valor por defecto a with CTA.

Para crear la segunda variante:

Duplica la variante existente desde el panel de propiedades.
Renombra el segundo valor de type 2 a simple.
Entra al frame de la variante simple y elimina el botón.

Gracias al auto layout, el header simple se ajusta solo: queda más compacto porque conserva los márgenes de 24px pero ya no contiene el botón [07:10].

¿Para qué sirven las variantes en Figma? Permiten agrupar versiones distintas de un mismo componente bajo una sola propiedad, facilitando el cambio entre estados o tipos sin duplicar archivos.

¿Por qué usar auto layout en un header? Porque hace que el componente se adapte automáticamente al ancho del contenedor y mantenga los espacios definidos, sin necesidad de reposicionar elementos manualmente.

¿Por qué reutilizar átomos al construir moléculas?

El header demuestra el valor real de atomic design. En lugar de diseñar el botón desde cero, reutilizas el átomo botón ya creado, con sus propias variantes. Eso significa que cualquier cambio en el átomo se propaga a todas las moléculas que lo usan.

Con esta segunda molécula ya sumas tres componentes en el design system: el botón como átomo, y dos moléculas que lo integran. El siguiente paso natural es construir un organismo combinando estos elementos.

¿Tú ya estás armando tu propio design system? Cuéntame en los comentarios qué moléculas estás creando primero.

Resumen

¿Qué estructura tiene un header como molécula?

¿Qué es una molécula en atomic design? Es un componente formado por la combinación de átomos más pequeños, como un texto y un botón, que juntos cumplen una función específica dentro de la interfaz.

¿Cómo armar el header con CTA paso a paso?

Luego aplicas un relleno usando un color del design system, por ejemplo primary 50, que mantiene consistencia con el resto de componentes.

Para los elementos internos sigue esta secuencia:

Agrega un texto que funcione como logo (por ejemplo, Ugly a 18px).
Inserta el botón ya creado como átomo, aprovechando sus variantes.
Selecciona ambos elementos y presiona Shift + A para activar auto layout [03:30].

¿Cómo separar el logo y el botón con auto layout?

¿Qué márgenes internos debes aplicar?

¿Cómo convertir el header en componente con variantes?

Para crear la segunda variante:

Duplica la variante existente desde el panel de propiedades.
Renombra el segundo valor de type 2 a simple.
Entra al frame de la variante simple y elimina el botón.

Gracias al auto layout, el header simple se ajusta solo: queda más compacto porque conserva los márgenes de 24px pero ya no contiene el botón [07:10].

¿Para qué sirven las variantes en Figma? Permiten agrupar versiones distintas de un mismo componente bajo una sola propiedad, facilitando el cambio entre estados o tipos sin duplicar archivos.

¿Por qué usar auto layout en un header? Porque hace que el componente se adapte automáticamente al ancho del contenedor y mantenga los espacios definidos, sin necesidad de reposicionar elementos manualmente.

¿Por qué reutilizar átomos al construir moléculas?

¿Tú ya estás armando tu propio design system? Cuéntame en los comentarios qué moléculas estás creando primero.

Comentarios (6)6 comentarios

Roberto Linares

Hace 3 años

La explicación tuya sobre como crear variantes a los componentes me pareció la más genial y amigable para entender como funcionan... Muchas gracias

Ketty Reyes

Estoy totalmente de acuerdo, en los anteriores curso no llegué a entenderlo.

Pablo Meiki Huamani Ricra

Ahora en Figma no aparece la opción de Space Between en las opciones avanzadas del layout, estan dentro horizontal gap.

Link para más detalle:

Erimer Alcantara Peña

Gracias Pablo!

Jorge Martinez

Hace un año

Excelente aporte, mil gracias Pablo...

Anggi Vanesa Pallares Solis

María Isabel Castaño Cadavid

Llevo poco aprendiendo sobre Figma y en otros cursos no había aprendido tanto como en este. La explicación que hace sobre variantes y componentes lo hace ver tan secillo que ya me siento súper experta. Mil gracias!!

Wilson Giral

Hace 2 años

No hay como los ejemplos SIMPLES para explicar temas que facilmente pueden llegar a confundir, gracias!

Excelente explicacion de como crear componentes, propiedades y variables, en otros cursos no se entiende claramente, gracias Estefany!

Visión general de los Sistemas de Diseño

Anatomía de un design system en Figma

Conceptos Básicos de Figma para Sistemas de Diseño

Pasos para crear un design system

Neo-Brutalism como base de un design system

Taller para nombrar tu design system

Documentación de Fundamentos en Sistemas de Diseño

Guía de Estilos con Figma

Design tokens: qué son y cuándo usarlos

Escalas tipográficas con proporción áurea

Creación de Escalas Tipográficas en Figma

Psicología del color para design systems

Tokens de color en Figma con Material Design

Espaciado y elevación en design systems

Espaciado y elevación con tokens en Figma

Iconos e ilustraciones en tu design system

Documentación de Sistemas de Diseño en Figma

Librería de componentes

Atomic Design: Construcción de Componentes en Design Systems

Arquitetura e auditoria de componentes no Figma

Cómo crear variantes de botón en Figma

Creación de Componentes de Cart en Diseño UI

Cómo crear un header con variantes en Figma

Cómo construir un hero con variantes en Figma

Cómo publicar tu librería de Figma

Diseña una landing page con tu design system

Implementación y medición

Calculadora de ROI para design systems

Cómo construimos un design system en startup

Qué sigue después de tu design system

Cómo crear un header con variantes en Figma

Progreso del curso

Visión general de los Sistemas de Diseño

Guía de Estilos con Figma

Librería de componentes

Implementación y medición

Recursos

Recursos