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.