Cómo construir una card 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:11

Cómo construir una card con Atomic Design

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

Clase 2 de 29

Clase 2 / 29

Recursos

El Atomic Design es la metodología que organiza componentes de UI desde lo más pequeño hasta lo más complejo, y resulta clave para diseñar interfaces consistentes, flexibles y escalables en Figma. Aprenderás a construir desde un átomo (un botón) hasta una card funcional usando Auto Layout, padding y border radius. Está pensado para diseñadores que arrancan con design systems.

Qué es Atomic Design y por qué importa en un design system

El término lo acuñó Brad Frost para describir cómo construir interfaces de forma modular, partiendo de unidades mínimas que se combinan en estructuras cada vez más grandes [0:09]. La lógica es sencilla: un átomo se une a otros átomos para formar moléculas, esas moléculas crean organismos, los organismos arman secciones y, al final, tienes una página completa.

Piensa en un botón. Ese botón, junto con un texto y una imagen, forma una card. Esa card, repetida o combinada, arma una sección. Y así hasta cubrir toda tu web.

¿Qué es Atomic Design? Es una metodología creada por Brad Frost que organiza los componentes de una interfaz de menor a mayor complejidad: átomos, moléculas, organismos, plantillas y páginas.

Qué es un token y en qué se diferencia de un átomo

Un token es algo todavía más pequeño que un átomo: una variable [1:05]. Puede ser un color hexadecimal, un tamaño de tipografía o un espaciado. Los tokens son los que mantienen la consistencia real de tu diseño porque centralizan los valores que se repiten en todo el sistema.

Figma aún no permite trabajar con tokens nativos, pero existen plugins que cubren ese vacío y verás más adelante cómo integrarlos.

Cómo crear un botón atómico con Auto Layout en Figma

El botón es el ejemplo perfecto del elemento más atómico [2:30]. La forma antigua era escribir el texto, dibujar un rectángulo, subir el texto en capas y centrarlo a mano. Funciona, pero no escala.

La forma correcta es usar Auto Layout. Pulsa T para activar la herramienta de texto, escribe el copy del botón y luego presiona Shift + A para activar Auto Layout. Con eso, el contenedor se acomoda al contenido, no al revés.

¿Para qué sirve Auto Layout en Figma? Permite que un elemento se ajuste automáticamente a su contenido. Si cambias el texto de "enviar" a "submit", el botón se redimensiona solo.

Un detalle nada menor: cuida el contraste entre el fondo y el texto del botón. Sin contraste suficiente, fallas en accesibilidad y tu usuario no podrá leer la interfaz.

Cómo trabajar con base 8 y operaciones matemáticas en Figma

Para el padding interior conviene trabajar en base 8, lo que significa usar valores como 8, 16, 24, 32, etc. [4:08]. ¿No recuerdas la tabla del 8? No pasa nada: cualquier input de Figma acepta operaciones matemáticas. Escribe 8 * 3, presiona Enter y Figma te devuelve 24.

Este truco te ahorra tiempo y mantiene la consistencia en los espaciados de tu design system.

Cómo construir una card paso a paso usando Atomic Design

Con el botón listo, toca sumar el resto de átomos hasta formar la card. Estos son los elementos que vas a montar:

Título: tecla T, texto a 24 px y peso semibold.
Contenido: tipografía a 16 px y peso regular, generado con un plugin de lorem ipsum para ahorrar tiempo [5:32].
Imagen: insertada con el plugin de Unsplash, que ofrece imágenes de uso libre directamente desde Figma [6:18].
Badge "producto estrella": duplica el botón con Shift + Option y arrastra. Cambia el tamaño de texto a 10 px.
Botón principal: el que ya creaste con Auto Layout.

Cada elemento de texto también debería llevar Auto Layout. Es un reflejo que conviene automatizar: seleccionar y Shift + A.

Cómo usar border radius en imágenes y badges

El border radius no es exclusivo de los frames. Puedes aplicarlo a una imagen, a un badge o a cualquier contenedor [8:45]. Tienes dos caminos: arrastrar los tiradores que aparecen al seleccionar el elemento, o ir al panel derecho y escribir el valor.

Si quieres redondeos distintos por esquina, activa la opción independent corners y define cada esquina por separado. Para este ejercicio, un valor de 10 funciona bien tanto para la imagen como para el badge.

Cómo unir componentes en una card con Auto Layout

Una vez tienes los átomos, selecciónalos y aplica Shift + A para unirlos en un contenedor con Auto Layout [10:12]. Estás creando contenedores que contienen contenedores, esa es la lógica.

Añade un fill blanco al contenedor principal para visualizar la card, ajusta el padding interior y centra el contenido. Listo: ya tienes una molécula formada por átomos.

Cómo fijar un elemento con Absolute Position en Auto Layout

Al meter el badge dentro de la card con Auto Layout, automáticamente entra al flujo del contenedor y se desordena. Para que el badge quede flotando sobre la imagen sin moverse del sitio, usa Absolute Position [11:28].

Selecciona el badge, activa la posición absoluta desde el panel derecho y colócalo donde quieras. A partir de ahí, podrás mover toda la card y el badge mantendrá su lugar relativo. Es la forma limpia de combinar layout flexible con elementos anclados.

¿Ya probaste montar tu primera card con esta lógica? Cuéntame en los comentarios qué componente quieres atomizar primero en tu próximo proyecto.

Carolina Gómez

Hace un año

Atomic Design (Diseño Atómico)

Creado por: Brad Frost.
¿Qué es? Una metodología que organiza los elementos de una interfaz de usuario de forma jerárquica: Tokens → Átomos → Moléculas → Organismos → Plantillas → Páginas.
Objetivo: Crear interfaces más consistentes, flexibles y escalables.
Analogía con la química:
- Tokens: lo más pequeño (colores, tipografías, espaciados).
- Átomos: elementos individuales como botones o íconos.
- Moléculas: combinación de átomos (por ejemplo, un botón con texto).
- Organismos: secciones funcionales completas (como una card).
- Plantillas/Páginas: estructura general con contenido aplicado.

Tokens de Diseño

Son variables reutilizables como:
- Colores hexadecimales
- Tamaños de texto
- Espaciados
Permiten mantener la coherencia visual.
Figma aún no los soporta de forma nativa, pero existen plugins que permiten trabajar con ellos.

Uso de Auto Layout en Figma

Permite que los componentes se adapten automáticamente al contenido.
Es ideal para construir interfaces responsivas y ordenadas.
Al cambiar el contenido, el diseño se ajusta automáticamente.
Se trabaja con una base 8 para márgenes y paddings (8, 16, 24, etc.).
- Figma permite realizar operaciones matemáticas directamente en los campos numéricos.

Ejemplo práctico: diseño de una card

Componentes:

Botón con auto layout y padding.
Título (tamaño 24).
Texto de contenido (tamaño 16, estilo regular).
Imagen (se sugiere utilizar plugins con imágenes libres de uso).
Etiqueta destacada (como "Producto estrella"), duplicando el botón y ajustando estilo y tamaño.

Estilos aplicados:

Bordes redondeados configurables (también individualmente por esquina).
Contraste adecuado para accesibilidad.
Uso de texto ficticio (Lorem Ipsum).

Tips adicionales

Organización de elementos en contenedores usando auto layout.
Añadir fondo blanco y centrar el contenido para una mejor visualización.
Uso de posición absoluta cuando un elemento necesita estar fijo dentro de un diseño con auto layout (por ejemplo, un badge sobre una imagen).

Comentarios (62)62 comentarios

Juan Alberto Solís Castro

Hace 3 años

Carmen Ansio

Profesor

Juan Parra

Ariel Hernán Contini

Daniel Andriy Carrillo Marulanda

Yusting Andrés Mora González

Mario Sanchez Jaramillo

Hace 2 años

Melany Andreina Mota Ruiz

Hernando Alvarado

Antonio Ramón Molina Simancas

Daniel Jiménez Prestan

Alejandro Díaz

Renzo Leonardo Paredes

Martin Coronel

Laura Dayana Mercado Cañizares

Steven Ricardo Mora Gonzalez

Marcos Antonio Ortiz Manjarres

Esteban Santiago Pizzani

Miguel Alejandro Camacho Sánchez

Liliana Perico

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

Cómo construir una card con Atomic Design