O que é Design System e como usar em projetos Angular

No mundo do desenvolvimento front-end, a consistência e a escalabilidade são dois pilares fundamentais para criar interfaces de usuário eficientes e agradáveis. É aí que entra o Design System, uma ferramenta poderosa que tem ganhado cada vez mais espaço no dia a dia dos desenvolvedores. Neste artigo, vamos explorar o que é um Design System, por que ele é importante e como você pode implementá-lo em projetos com Angular e outros frameworks front-end modernos.

O que é um Design System?

Um Design System é uma coleção de componentes, diretrizes e padrões reutilizáveis que ajudam a garantir a consistência visual e funcional em uma aplicação ou conjunto de aplicações. Ele vai além de um simples conjunto de componentes UI, pois inclui também:

• Princípios de design: Valores e diretrizes que orientam a criação de interfaces.
• Componentes reutilizáveis: Botões, formulários, cards, modais e outros elementos de UI prontos para uso.
• Guia de estilo: Definições de cores, tipografia, espaçamento e outros aspectos visuais.
• Padrões de código: Boas práticas de desenvolvimento para garantir que os componentes sejam implementados de forma consistente.
• Documentação: Instruções claras sobre como e quando usar cada componente.

Um Design System bem construído permite que equipes de design e desenvolvimento trabalhem de forma alinhada, reduzindo retrabalho e acelerando o processo de criação de interfaces.

Podemos observar algumas libs e frameworks que já possuem em suas características uma padronização de seu código como bootstrap, primeng, material design, angular material e etc.

Com a padronização podemos trabalhar em multiplos projetos ao mesmo tempo seguindo um design único e evitando ao máximo códigos repetidos.

Por que usar um Design System?

A adoção de um Design System traz diversos benefícios para equipes de desenvolvimento:

1. Consistência: Garante que todas as partes da aplicação tenham a mesma aparência e comportamento, independentemente de quem as desenvolveu.
2. Produtividade: Componentes reutilizáveis permitem que os desenvolvedores foquem em funcionalidades complexas, em vez de recriar elementos básicos.
3. Escalabilidade: Facilita a manutenção e a evolução do projeto, especialmente em aplicações grandes ou com múltiplas equipes.
4. Colaboração: Promove um entendimento comum entre designers e desenvolvedores, reduzindo ruídos na comunicação.
5. Experiência do usuário: Interfaces consistentes e bem planejadas melhoram a usabilidade e a satisfação do usuário final.
6. Sem código repetido: Evita repetir códigos em diversos projetos, pois a lib é única e reutilizada em quantos projetos forem necessários.

Como implementar um Design System no Angular

Agora partindo para uma parte mais técnica, usando o Angular que é um framework robusto e altamente modular, o que o torna uma excelente escolha para implementar um Design System. Abaixo, vamos ver os passos básicos de um exemplo de como criar e usar um Design System em um projeto Angular.

Antes, veja os requisitos mínimos para usar o angular da melhor maneira possível e os softwares e libs necessários para esta implementação neste outro artigo. https://desenvolvimentopuro.com.br/requisitos-minimos-para-instalar-e-usar-um-design-system-com-angular/

1. Defina os Princípios e Guias de Estilo

Antes de começar a codificar, é essencial definir os princípios de design e o guia de estilo. Isso inclui:

• Cores primárias e secundárias.
• Tipografia (fontes, tamanhos, pesos).
• Espaçamento (margens, paddings, grids).
• Ícones e ilustrações.

Essas definições serão a base para a criação dos componentes. Geralmente existe um guia de identidade visual já com essas características pré-definidas.

2. Crie um biblioteca de componentes reutilizáveis

No Angular, você pode criar uma biblioteca de componentes usando o Angular CLI. Para isso, siga os passos abaixo:

1. Crie um novo workspace para o Design System:
   new meu-design-system --create-application=false cd meu-design-system
2. Gere uma biblioteca de componentes:
   ng generate library design-system
3. Dentro da biblioteca, crie componentes reutilizáveis, como botões, inputs, cards, etc. Por exemplo:
    ng generate component button --project=design-system
4. Implemente os componentes com base no guia de estilo definido. Por exemplo, um botão pode ter diferentes variações (primário, secundário, desativado) que são controladas por inputs:
   @Component({
     selector: 'ds-button',
     template: `
       <button [ngclass]="{'primary': variant === 'primary', 'secondary': variant === 'secondary'}">
         <ng-content></ng-content>
       </button>
     `,
     styleUrls: ['./button.component.css']
   })
   export class ButtonComponent {
     @Input() variant: 'primary' | 'secondary' = 'primary';
   }
5. Exporte os componentes no módulo da biblioteca para que possam ser usados em outros projetos:
   @NgModule({
     declarations: [ButtonComponent],
     exports: [ButtonComponent]
   })
   export class DesignSystemModule {}

3. Documente os componentes

A documentação é uma parte crucial de um Design System. Use ferramentas como Storybook ou Compodoc para criar uma documentação interativa dos componentes. Isso ajuda os desenvolvedores a entenderem como e quando usar cada componente.

4. Integre o Design System no projeto principal

Após criar a biblioteca de componentes, você pode publicá-la em um repositório privado (como o npm) ou linká-la diretamente ao projeto principal. Para usar os componentes, basta importar o módulo do Design System no projeto Angular:

Agora, você pode usar os componentes em qualquer lugar do projeto:

Design Systems em outros frameworks Front-End

A abordagem para criar um Design System é semelhante em outros frameworks e libs modernas, como React e Vue.js. A principal diferença está na forma como os componentes são estruturados e exportados. Por exemplo:

• React: Utilize ferramentas como Styled Components ou Emotion para estilizar os componentes.
• Vue.js: Aproveite a modularidade do Vue para criar componentes reutilizáveis e diretivas personalizadas.

Independentemente do framework, o objetivo é o mesmo: criar uma biblioteca de componentes consistente e bem documentada que possa ser usada em múltiplos projetos.

Conclusão

Um Design System é mais do que uma coleção de componentes UI; é uma filosofia que promove consistência, eficiência e colaboração no desenvolvimento front-end. Com Angular e outros frameworks modernos, implementar um Design System tornou-se mais acessível do que nunca.

Eu tive a oportunidade de participar da implementação de design system em algumas empresas e é notório a diferença de ganho de produtividade após utilizar e trabalhar com padrões pré-definidos e componentizados durante o desenvolvimento.

Se você está trabalhando em um projeto grande ou planeja escalar sua aplicação, investir em um Design System pode ser a chave para entregar interfaces de alta qualidade de forma rápida e consistente.

No Desenvolvimento Puro, acreditamos que a adoção de boas práticas como essa é essencial para o sucesso de qualquer projeto. Então, que tal começar a construir o seu Design System hoje?

Gostou do conteúdo? Compartilhe com sua equipe e deixe nos comentários suas experiências com Design Systems!