Atomic design es una metodología en la que una interfaz(pantalla) se descompone en elementos pequeños para la creación de un sistema de diseño.
Dichos elementos o componentes están interconectados y se organizan en una jerarquía de seis niveles: tokens, átomos, moléculas, organismos, plantillas y páginas.
Para entender la forma en que los componentes de los diferentes niveles se entrelazan usaremos la metáfora de Brad Frost, creador de esta metodología: imaginemos a las muñecas rusas, donde los componentes pequeños se incluyen en componentes más grandes, a la vez que estos se incluyen en componentes más grandes y así eventualmente se crean interfaces completas. Es importante aclarar que en ocasiones un componente puede estar formado por otros de su mismo nivel.
Podemos decir que este es un nivel subatómico, que está compuesto por las propiedades o variables que van a definir los estilos y comportamientos de los átomos. Entre ellas están los colores, border radius, espacios y box shadows.
Ejemplos de tokens.
Este es el primer nivel atómico, aquí se encuentran los componentes más básicos, los cuales no se pueden descomponer más sin dejar de ser funcionales. Junto a cada componente definimos sus estados, como hover, focus, inactivo.
Algunos de estos componentes son botones, íconos, títulos, inputs.
Ejemplos de átomos.