Atomic Design paso a paso 

 
Paso 1: Observa 

Mirá tu producto digital, y analizá las distintas pantallas que tenés. 

 
Paso 2: Relevar las pantallas y los casos de uso 

Bajalas a un papel o a un archivo donde puedas observar todas las pantallas. Sumales los 
casos de uso de cada una. Te recomiendo que utilices Sketch, Figma o cualquier programa 
de tu agrado. 
 
Paso 3: Registra los componentes en la interfaz 

Identificá todos los componentes que veas comunes, botones, inputs, títulos, colores, etc. En 
base a las hojas que tengas o al archivo donde puedas ver todas las pantallas juntas. 
 
Paso 4: Categoriza los componentes 

En base al paso previo define cuáles van a ser tus átomos, moléculas, organismos, etc. 
 
Paso 5: Unifica y documenta 

En las pantallas que tengas unifica los componentes y sus casos de uso, y logra la 
consistencia en la interfaz.   
Atomic Design: Tu guía para unificar componentes de 
interfaz  
1. ¿Qué componentes detectaste que podrías unificar? 
a. Ejemplo1: Colores 
b. Ejemplo2: Botones 
c. Ejemplo3: Títulos y párrafos 
d. Ejemplo4: Contenedores 
e. Ejemplo5: Animaciones 
 
2. Enumerá por cada componente sus casos de uso 
a. Ejemplo1: Colores 
i. Principal 
ii. Secundario 
iii. Marca 
iv. Acción principal 
v. Acción secundaria 
vi. Títulos 
vii. Sombras 
b. Ejemplo2: Botones 
i. Principal 
ii. Secundario 
iii. Cargando 
c. Ejemplo3: Títulos y párrafos 
i. Principal 
ii. Secundario 
iii. Modal 
d. Ejemplo4: Contenedores 
i. Web 
ii. Mobile 
iii. Tablet 
e. Ejemplo5: Animaciones 
i. Web 
ii. Mobile 
iii. Tablet 
 
3. ¿Qué tipo de componentes tenés? 
a. Átomos 
i. Colores 
ii. Botones 
iii. Títulos y párrafos 
iv. Contenedores 
v. Animaciones 
b. Moléculas 
 i. Título + Descripción 
c. Organismos 
i. Título + Descripción + Botón  
d. Templates 
i. Título + Descripción + Botón + Contenedor 
e. Pages 
i. Detalle artículo:​ Título + Descripción + Botón + Contenedor