O elo perdido do Design Atômico

O sistema de design criado por Brad Frost e Dave Olsen — Design Atômico — inspirado pelas aulas de biologia no colegial, possui alguns problemas de conceito em sua metáfora, que também traz um débito arquitetural ao Pattern Lab.

Problema 1

Primeiramente, parte dos problemas na metáfora já foram bem resolvidos. Entenda neste artigo:

No conceito atual do Design Atômico, temos dois níveis que não fazem nenhuma relação com a metáfora: Templates e Páginas.

No artigo acima, essas nomenclaturas foram ajustadas para ter uma relação mais próxima da metáfora, então temos: Ecossistema e Ambiente.


Problema 2

O Pattern Lab trata todos os estilos globais (paleta de cores, famílias de fonte e animações) no mesmo nível dos átomos. Porém, esses elementos visuais, tecnicamente, não são componentes, mas sim estilos. Como eles mesmos afirmam:

“The global category defines visual elements such as color, font families, and motion. While not technically UI components, these elements are critical to document in the pattern library.”
Pattern Lab - Categoria "Global" no mesmo nível dos átomos.

Os estilos globais não deveriam ser tratados como componentes. Logo, também não podem ser tratados como átomos. Faz sentido?

Resolvendo o problema

Seguindo a metáfora biológica por trás da metodologia, o que mais se assemelha com estilos visuais são nossas características genéticas hereditárias. Nosso genoma. Ou seja, é o responsável por dizer qual a cor dos nossos olhos, cabelo, tom de pele e dita até o nosso comportamento. Biologicamente, os genes ficam na cadeia de DNA (e RNA).

O DNA é uma molécula, portanto, para encaixar isso ao fluxo do Design Atômico, teremos algo assim:

Adicionando o DNA ao fluxo do Design Atômico.

Podemos assimilar que os genes, tecnicamente, seriam temas. Assim, todo o estilo visual personalizado seria inserido desta maneira. E não seria mais necessário declarar a categoria global, como está escrito no Pattern Lab. Inicialmente, todos os átomos nasceriam com estilo visual padrão dos browsers (nativo), mas por fim receberiam o estilo personalizado definido por um tema.


Ajustando a arquitetura do Pattern Lab

Adicionando o DNA à arquitetura do Pattern Lab.

Um exemplo usando Mustache (para entender, assista o vídeo da apresentação do Brad Frost), teríamos algo assim:

{{> dna-gene-global}}
Output:
<link rel="stylesheet" src="/dna/genes/global.css" />