O Design System é um pacote de design atômico que fornece um conjunto de componentes reutilizáveis, estilos e utilidades para o desenvolvimento de aplicativos Flutter na empresa. Este repositório contém todos os arquivos e recursos relacionados ao Design System, incluindo código-fonte, documentação e exemplos.
Um Design System é uma abordagem sistemática para a criação, manutenção e implementação de um conjunto consistente de componentes, estilos e diretrizes de design para um produto ou empresa. Ele serve como uma referência centralizada para a equipe de design e desenvolvimento, fornecendo uma base sólida e padronizada para a criação de interfaces de usuário coesas e eficientes.
O Design System segue a metodologia de atomicidade, onde os componentes são divididos em diferentes níveis de granularidade, desde átomos individuais até organismos mais complexos. Essa abordagem permite a reutilização e combinação flexível de componentes para criar interfaces de usuário coesas e adaptáveis.
A ideia central por trás de um Design System Atômico é promover a reutilização máxima dos componentes. Cada átomo é projetado para ser independente e autossuficiente, com uma única função e propósito. Isso significa que um átomo pode ser usado em diferentes contextos e combinado com outros átomos para criar componentes mais complexos.
A estrutura de um Design System Atômico geralmente segue uma hierarquia semelhante à seguinte:
-
Átomos: Os átomos são os elementos mais básicos e indivisíveis do design system. Eles são os blocos de construção fundamentais, como botões, caixas de texto, ícones, cores, tipografia, entre outros. Esses átomos são altamente reutilizáveis e não dependem de nenhum outro componente.
-
Moléculas: As moléculas são combinações de átomos que formam componentes mais complexos. Por exemplo, um campo de entrada com um rótulo e um botão de ação seria considerado uma molécula. As moléculas são compostas por vários átomos, mas ainda são relativamente simples e reutilizáveis.
-
Organismos: Os organismos são conjuntos de moléculas e/ou átomos que formam componentes maiores e mais significativos. Eles são mais complexos e específicos para determinados contextos ou funcionalidades. Por exemplo, um cabeçalho de página com um logotipo, menu de navegação e botões de ação seria considerado um organismo.
-
Modelos: Os modelos são estruturas ou layouts pré-definidos que combinam organismos para formar uma página ou seção completa. Eles fornecem uma estrutura consistente para o design e desenvolvimento de interfaces, facilitando a criação de páginas coerentes em um aplicativo.
-
Páginas: As páginas representam as telas completas ou seções maiores de um aplicativo. Elas combinam os componentes do design system, como átomos, moléculas, organismos e templates, para criar interfaces completas e funcionais. As Pages ajudam a manter a consistência visual e funcional em todo o aplicativo, garantindo que todas as telas sigam as diretrizes de design estabelecidas. Elas são construídas com base em templates, que definem a estrutura básica da página, e utilizam os componentes do design system para criar e compor os diferentes elementos da interface. A inclusão de Pages no design system atômico permite uma visão mais ampla do fluxo de trabalho do aplicativo e facilita a criação de experiências coesas e padronizadas.
Ao seguir essa abordagem atômica, um Design System Atômico permite maior flexibilidade, reutilização e consistência no desenvolvimento de interfaces. Os componentes são projetados de forma modular e podem ser facilmente combinados e reconfigurados para atender a diferentes necessidades e cenários de design. Além disso, essa estrutura facilita a manutenção e evolução do design system, pois as alterações feitas em átomos ou moléculas têm um impacto controlado e previsível nas partes maiores da interface.
Em resumo, um Design System Atômico é uma metodologia poderosa para projetar e desenvolver interfaces eficientes, modulares e consistentes, aproveitando a reutilização de componentes em diferentes níveis de complexidade.
Este repositório segue uma estrutura de arquivos organizada para facilitar a navegação e o desenvolvimento do Design System. A seguir, estão as principais pastas encontradas na raiz do repositório:
-
lib: Esta pasta contém a implementação dos componentes atômicos até os templates. Os componentes estão organizados de acordo com a ideia de atomicidade, fornecendo uma estrutura clara e consistente para o design system. Além disso, você encontrará uma pasta de estilos que contém as definições de cores, tipografia e outros estilos globais do design system. Também é fornecida uma pasta de utilidades com funções auxiliares úteis para o desenvolvimento.
-
catalog: Aqui, você encontrará um aplicativo web que serve como um catálogo e widgetbook para os componentes do Design System. O catálogo fornece uma interface visual para explorar, testar e entender como os diferentes componentes podem ser usados. É uma ferramenta valiosa para os designers e desenvolvedores da equipe.
-
test: Nesta pasta, você encontrará os testes de widgets para garantir a qualidade e o bom funcionamento dos componentes do Design System. Esses testes ajudam a identificar possíveis problemas e asseguram que os componentes estejam funcionando conforme o esperado em diferentes cenários. Além dessas pastas principais, você também encontrará outros arquivos e diretórios importantes, como o pubspec.yaml, que define as dependências e metadados do pacote, arquivos de documentação e exemplos.
Se você deseja contribuir para o Design System, siga as diretrizes de contribuição descritas em CONTRIBUTING.md. Todos os tipos de contribuições, desde correções de bugs até novos recursos e melhorias de documentação, são bem-vindos.
Antes de enviar qualquer contribuição, certifique-se de executar os testes de unidade e garantir que todas as alterações sigam as práticas recomendadas e diretrizes de estilo definidas pela equipe.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent