Contenido del curso
Cómo crear un header con variantes en Figma
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:
¿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:
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.
