Cómo construir un hero 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:009:03

Cómo construir un hero con variantes en Figma

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

Clase 21 de 26

Clase 21 / 26

Recursos

Construir un hero en Figma usando componentes ya creados es el siguiente paso lógico cuando trabajas con atomic design. Aquí aprendes a ensamblar un organismo a partir de átomos y moléculas, y a generar dos variantes responsivas: mobile y desktop, sin duplicar trabajo.

Este flujo es útil si estás armando tu primer design system y quieres entender cómo se conectan los componentes pequeños con piezas más grandes de interfaz.

Qué es un hero y por qué se considera un organismo

El hero es esa sección principal que ves al entrar a una página, normalmente con título, imagen destacada y elementos visuales que captan la atención. En atomic design se clasifica como organismo porque combina varios componentes más pequeños que ya tienes listos.

En este caso, el hero reúne tres piezas previas: el botón, la card y el header. La idea es no diseñar desde cero, sino ensamblar.

¿Qué diferencia hay entre un átomo, una molécula y un organismo en Figma? Un átomo es el elemento más simple, como un botón. Una molécula combina átomos, como una card con texto e imagen. Un organismo agrupa moléculas y átomos para formar una sección completa, como un hero.

Cómo armar la versión mobile del hero paso a paso

Empiezas trayendo el componente header al frame en blanco [00:34]. Después arrastras un rectángulo con relleno primario para mantener uniformidad cromática con el resto del sistema.

Luego añades el texto del título, ajustando tamaño y márgenes. Las medidas que se manejan son 24 píxeles a izquierda y derecha, con una separación superior cómoda respecto al header para que no se vea apretado [01:25].

Cómo insertar imágenes gratuitas con Unsplash

Para la imagen de la modelo se usa el plugin Unsplash, que vive dentro de Figma y te deja buscar fotos libres de derechos sin salir del archivo [01:55]. Buscas el término que necesitas, seleccionas la imagen y al insertarla mantienes shift para conservar proporciones originales.

¿Cómo agrego imágenes gratis en Figma? Usa el plugin Unsplash desde el menú de plugins, busca el término que necesites y arrastra la imagen al lienzo. Mantén presionado shift para conservar la proporción original.

La imagen se ajusta a 300 píxeles y se le aplica un border radius de 12 para suavizar las esquinas [02:55]. La relación de aspecto no es estrictamente uno a uno; el ancho queda un poco menor que el alto, lo que se resuelve recortando manualmente.

Cómo agregar las cards al hero

Desde la biblioteca de componentes arrastras dos cards al hero. Aquí aparece un detalle clave de medidas: el componente original viene con un height de 604 y necesitas llevarlo a algo proporcional para que el espaciado quede en 24 [03:45]. Se ajusta sumando 6 píxeles, llegando a 610.

Cómo convertir el diseño en un componente con variantes

Una vez ensamblado el diseño, lo seleccionas y lo conviertes en componente. Pero el verdadero poder llega al crear variantes, que son versiones del mismo componente bajo una propiedad común.

En el panel de properties renombras la propiedad por defecto a device y le asignas el valor mobile a la primera variante [04:42]. Renombras también el componente a hero para mantener orden en la capa de layers.

Cómo crear la variante desktop

Al dar clic en el botón de añadir variante, Figma genera una copia con el valor device 2. Lo cambias a desktop y amplías el frame para tener más espacio de trabajo [05:30].

La medida sugerida para desktop es 1024 píxeles, que también cubre tablet. La lógica es que de 1024 en adelante el diseño se mantiene igual, así que con un solo breakpoint cubres dos devices [06:00].

Texto centrado en lugar de alineado a la izquierda.
Imagen con relación de aspecto uno a uno, fijada en 300x300.
Cards reposicionadas libremente, una arriba y otra abajo de la imagen.

Cómo probar que las variantes funcionan correctamente

La prueba de fuego consiste en arrastrar el componente hero a un lienzo nuevo y cambiar el valor de la propiedad device desde el panel lateral. Al pasar de mobile a desktop, el diseño cambia automáticamente sin que tengas que tocar nada más [07:12].

Esto confirma que las variantes están bien configuradas y que tu organismo responde como un componente vivo dentro del design system.

Cuéntame en los comentarios cómo van quedando tus átomos, moléculas y organismos. Quiero ver tus resultados antes de la siguiente clase, donde toca publicar los componentes.