# Serviços e a aplicação do Ágora Design System

## Regras a seguir

1. **Usar os protótipos disponíveis**: seguir o *template* disponibilizado na aplicação Figma e cumprir todos os requisitos indicados;
2. **Um *****design system*****, uma cor primária:** os componentes das fundações não podem ser alterados, tais como cores, tipografia, componentes ou semântica;
3. **Tecnologia ReactJS e NextJS:** o Ágora Design System (ADS) é compatível com tecnologias de ReactJS e Next.js, mas é expectável que possa ser integrada com outras *frameworks* de React. Caso seja utilizada outra tecnologia é necessário cumprir com os mesmo requisitos e parâmetros do sistema;
4. **Ferramentas de trabalho:** as equipas técnicas de *design* têm de solicitar o acesso ao Figma e seguir as orientações para o desenho dos fluxos e aplicação do sistema. As equipas técnicas de desenvolvimento que utilizem a tecnologia de ReactJS têm um canal com os *developers* do sistema para reportar melhorias e erros;
5. **Trabalho orientado e aprovado:** as equipas responsáveis pelo desenho e desenvolvimento dos fluxos de serviços federados, ou de aplicação do sistema a outras plataformas, devem estar alinhadas com a equipa ADS para garantir a coerência e correta aplicação das soluções disponíveis.

## Ferramentas úteis

<div align="left"><figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FzsMLytZHAaTnx4xXSbWD%2FFigma%20logo.png?alt=media&#x26;token=542aee8b-ec70-46ac-8336-b99c0dad5eee" alt="Logo Figma" width="86"><figcaption></figcaption></figure></div>

[**Figma**](https://www.figma.com/design/)

* Para *designers* e *developers.*
* Biblioteca de *design* e ponto de contacto entre equipas.
* As equipas terão de solicitar o acesso, devido à biblioteca não ser pública. É necessário enviar um pedido por email para **<designsystem@ticapp.gov.pt>**, indicando o nome da entidade e âmbito onde pretende implementar o Ágora Design System.
* A biblioteca disponibiliza 6 quadros.

<figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FIpRm0apsugFGCWlG50w3%2FImagem1.png?alt=media&#x26;token=2b95c1f0-d336-45ab-95a3-a3b8ceebca67" alt="6 quadros disponíveis no Figma"><figcaption><p>Quadros Figma disponíveis</p></figcaption></figure>

* Possibilidade de incorporar outras marcas ou identidades visuais através da variável de cor primária e secundária.

<div align="left"><figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FQc3Wyz6YVT3IJhzgGuLs%2Fzeroheight-icon-logo-png_seeklogo-453816.png?alt=media&#x26;token=e3f2d434-8e38-46e4-9580-1971b732d523" alt="Logo Zeroheight" width="150"><figcaption></figcaption></figure></div>

[**Zeroheight**](https://zeroheight.com/1be481dc2/p/232b07-conhecer-o-sistema)

* Plataforma de documentação de todas as peças que constituem o *design system.*
* Compila as bibliotecas de *design* e desenvolvimento.
* Contém os fundamentos e pilares do sistema.
* Contém as regras e diretrizes de utilização, bem como boas práticas de acessibilidade, usabilidade e conteúdos.

<figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FCT2bhAlk0ZwyZfOfXSli%2FImagem3.png?alt=media&#x26;token=47fdd31b-fe25-4f69-b70c-fd97342e5319" alt=" Exemplo de componente do Ágora Design System" width="375"><figcaption><p> Exemplo de componente do ADS</p></figcaption></figure>

<div align="left"><figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2F0cGuLD8TUP1NeM26Oorr%2Fstorybook-icon-svgrepo-com.png?alt=media&#x26;token=0700df7e-2472-4394-a203-a58defd0d7fe" alt="Logo StoryBook" width="96"><figcaption></figcaption></figure></div>

[**StoryBook**](https://storybook.js.org/docs)

* Para *developers.*
* Biblioteca de desenvolvimento em ReactJS.
* Propriedades individuais por componente.
* Acesso às *releases.*
* Plataforma pública com toda a informação sobre os componentes e instalação da biblioteca.

<figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2F4hTwlRj2524fGPOvHBbx%2FImagem2.png?alt=media&#x26;token=77d07b66-dadb-4f35-a5a4-9aa5ac2d72a7" alt="Biblioteca do Ágora Design System" width="375"><figcaption><p>Biblioteca do ADS</p></figcaption></figure>

<div align="left"><figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FuBTCC9BQwNB9kmMu2LpE%2Ft_npm3397.jpg?alt=media&#x26;token=18cf0dd4-26ac-42ce-a3b1-34b403121991" alt="Logo Npm" width="95"><figcaption></figcaption></figure></div>

[**Npm**](https://www.npmjs.com/package/@ama-pt/agora-design-system)

Conteúdo:&#x20;

* @ama-pt/agora-design-system&#x20;

Principais tecnologias:&#x20;

* ReactJS: [https://reactjs.org/  ](https://reactjs.org/)
* Next.js: [https://nextjs.org/ ](https://nextjs.org/)
* TailwindCss: [https://tailwindcss.com/docs/installation ](https://tailwindcss.com/docs/installation)

<figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FhOV2actJzXUPF3j49yIa%2FImagem4.png?alt=media&#x26;token=8e372aa5-754d-4f72-bf11-65210c0bf246" alt="Ágora Design System no Npm" width="375"><figcaption><p>ADS no Npm</p></figcaption></figure>