Hoje em dia, uma das formas mais populares de organizar e manter componentes e módulos usados pelas equipes de design é o atomic design, uma metodologia de estrutura de arquivos que divide todos os elementos de uma página, neste artigo mostro de forma breve como fazer uma estrutura de um design system utilizando a metodologia do atomic design em um projeto flutter.
Tópicos do Artigo
O que é um Design System?
Design System é uma coleção de componentes reutilizáveis, padronizados para determinado produto, site ou sistema. Diferente de um style guide (guia de estilos), um design system vai além: o design system unifica a linguagem de um determinado produto.
Encare o design system não como um projeto, mas como um produto interno da empresa, que precisa de pessoas que o atualizem enquanto desenvolvem soluções novas, novos componentes, novos guias de estilo. De botões arredondados e snippets de códigos a concepções de aplicação de marca, tom de voz de texto.
O que é o Atomic Design?
O atomic design é uma metodologia que nos ajuda a pensar na interface do usuário de maneira hierarquia e reforça a importância da qualidade de pattern libraries eficazes, apresentando técnicas para otimizar o fluxo de trabalho do design e desenvolvimento em equipe. O atomic design também detalha o que acontece durante a criação e manutenção de sistemas de design, permitindo a implementação de UIs com mais consistência e qualidade.” — Brad Frost
Quais as vantagens de usar o Atomic Design em um Design System?
- Componentes Reutilizáveis — Ao criar sua própria biblioteca, você tem à mão os elementos para qualquer desafio de projeto. Você também pode misturar e combinar os componentes de forma muito fácil.
- Layout facilmente entendível e com facilidade para manuntenção — O código de um aplicativo projetado atomicamente é geralmente muito mais fácil de ler do que um criado de maneira mais tradicional. Isso é verdade não apenas durante o momento da criação, mas no futuro, quando a aplicação estiver sendo revista para referência ou pequenos ajustes.
- Menos componentes em geral — Se um desenvolvedor tiver uma lista de átomos, moléculas e organismos apresentada a ele antes do início da criação de um aplicativo, é mais provável que use o que já existe do que crie novos componentes para pequenas variações.
A metodologia do Atomic Design proposta por Brad Frost
O atomic design se inspira no conceito de átomos e moléculas da química, basicamente consiste nestes cinco níveis distintos:
Átomos
Na química, o átomo se resume à unidade básica da matéria. Pense num átomo como uma peça de lego: eles são considerados os componentes básicos das interfaces, que não precisam de outro elemento para existirem. Portanto botões, labels, caixas de seleção são alguns dos exemplos que entendemos por átomos.
Moléculas
O agrupamento entre dois ou mais átomos, iguais ou diferentes, assumem uma nova propriedade, que na química denominamos de moléculas. Voltando para nosso contexto, moléculas para nós desenvolvedores seria a junção dos componentes básicos da interface passando uma ideia mais tangível aos elementos.
Organismos
Os átomos e as moléculas em conjunto formam uma estrutura material organizada e complexa. Como um corpo na biologia ou como um organismo na química, entendemos que nas interfaces essa estrutura consiste na mesclagem entre átomos e moléculas, formando componentes mais complexos que norteiam a navegação dentro de um layout.
Templates
A comparação com a química não se estende às próximas fases. Formado pela união dos organismos, os templates possuem o intuito de exibir a estrutura de um layout de forma simplificada. O importante nessa etapa é entender como os componentes vão interagir entre si e se a composição faz sentido.
Páginas
Com os organismos, moléculas e átomos se comportando harmonicamente entre si, os templates evoluem para páginas, e é aqui que acrescentamos o conteúdo real. A última fase é a etapa mais concreta do atomic design, pois é com esse layout que os usuários vão se deparar ao acessarem seu aplicativo.
Exemplo de uma estrutura de arquivos do Atomic Design no Flutter
Conforme exemplo abaixo, o atomic design está separado por modulos, isso facilita a organização dos templates, não é uma regra, porém é interessante separar dessa forma.
Utilizando Tokens
Mesmo utilizando os 5 conceitos do Atomic Design proposto por Brad Frost, ainda temos um problema, como poderíamos fazer as cores, sombras, animações, fontes e iconografias usadas junto com todo o projeto padrão?
A metodologia do tio Brad sugere que dentro do nível dos átomos pode ser incluso elementos mais abstratos como paletas de cores, fontes e aspectos ainda mais invisíveis de uma interface, como animações por exemplo. Porém também podemos criar uma estrutura auxiliar denominada de Tokens, com essa estrutura conseguimos separar toda parte de estilização, animações, espaçamentos . . .
Exemplo de uma estrutura de Tokens no Flutter
Criando o Design System no Flutter
Agora que você sabe o que é um Design System e Atomic Design, é hora de aplicar seu novo conhecimento em Flutter.
Você pode utilizar o seguinte comando no terminal para criar um package de um design system:
flutter create --template=package nome_design_systemCamada de Tokens
Você pode definir suas cores, tipografia, espaçamentos, sombras e tamanhos na camada Tokens.
Um exemplo de um arquivo com tamanhos que estaria dentro da camada de Tokens:
Após configurar seus Tokens, você pode criar uma pasta chamada Atomic e começar fazer toda estrutura do Atomic Design.
Camada de Átomos
Conforme citado, átomo é a camada mais baixa do atomic, sendo inputs, botões, labels e etc. A seguir demonstro um exemplo de uma implementação de um Átomo no Flutter.
Camada de Moléculas
Você pode adicionar o componente criado pela união de átomos na camada de moléculas.
Camada de Organismos
Podemos encontrar componentes criados pela união de moléculas e átomos na camada dos organismos.
Camada de Templates
Nessa camada definimos um componente de modelo que seja fácil de usar e utilize as camadas internas, com intuito de criar um modelo todo estruturado esperando parâmetros que vão ser passados pela página.
Para auxiliar a camada de template, podemos também adicionar uma sub-camada para conter todos os parâmetros relacionados ao template. Com isso conseguimos separar os atributos por responsabilidade de forma clara e objetiva.
Camada de Páginas
Por fim, você pode definir suas páginas, lembrando que por padrão, as páginas só chamam os templates que estão em outro projeto, passando todos os parâmetros necessários.
Consumindo um Design System no Flutter
Dentro do Projeto de Design System, você precisa exportar os arquivos para que eles sejam facilmente enxergados pelo biblioteca, então a forma mais simples de fazer isso, é adicionar os exports dos templates dentro do arquivo principal do package.
Em seguida no projeto que vocé vai consumir as templates você basicamente inclue o package do seu Design System, que no caso desse artigo, está um diretorio anterior.
Conclusão
O design atômico (Atomic Design) é uma excelente metodologia para construir nossos sistemas de design (Design System). Usando essa abordagem para construimos nossas estruturas de widgets, conseguimos reduzir de maneira significativa o retrabalho em layouts e construir componentes de qualidade.
Projeto demostrado nesse artigo:
