Molecules e Atoms

Arquitetura de Componentes

Níveis de componentes

Atoms

Nível 1 (Atoms) é composto por componentes como Botões, TextFields, Labels, Avatares… Eles são partes individuais que começam no menor nível possível e juntos eles compõem as Molecules.

Molecules

Esses componentes serão montados como um quebra cabeça com os Atoms, assim gerando componentes de Nível 2, chamados Molecules. As Molecules teriam função visual e não função de aplicação, por exemplo cada Molecule ocupa totalmente a largura da tela, facilitando a composição visual e a responsividade das interfaces.

Tree

Nível 3 vai ser composto em um formato de lista de Molecules, chamado Tree. Gerando assim o esqueleto das telas do App, onde será exibido todos os componentes visuais necessários para ter uma estrutura definida.

Combinação de Atoms (Molecule)

Com alguns atoms e alguns espaçamentos, que por sua vez fazem parte dos tokens, conseguimos montar o quebra cabeça da Molecule desejada, como o exemplo a seguir.

A criação das Molecules só irá acontecer no Atlantica Design, logo apenas o Atlantica Design terá acesso aos Atoms. Já no Design System do projeto, só estarão disponíveis para uso as Molecules.

Desenvolvimento de Feature Screen

A ideia para aplicar features nas telas e nos componentes é o desenvolvedor que for criar a tela conseguir criar apenas com uma declaração de um Array.

Imagine que exista o Componente A, Componente B, Componente C e o Componente D. Com essas opções será possível montar vários tipos de tela só pela ordenação desses componentes por meio do Array.

Exemplo do Array de componentes: [Componente A(Model), Componente B(Model), Componente C(Model), Componente D(Model), Componente D(Model), Componente D(Model)]