For the complete documentation index, see llms.txt. This page is also available as Markdown.

Serviços e 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 integrado com outras frameworks de React. Caso seja utilizada outra tecnologia é necessário cumprir com os mesmos 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 da 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 o 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 a correta aplicação das soluções disponíveis.

Ferramentas úteis

Logo Figma

Figma

  • Para designers e developers

  • Biblioteca de design e ponto de contacto entre equipas

  • As equipas terão de solicitar o acesso, dado que a biblioteca não é pública. É necessário enviar um pedido por e-mail para designsystem@ticapp.gov.pt, a indicar o nome da entidade e o âmbito em que pretende implementar o Ágora Design System

  • A biblioteca disponibiliza seis quadros

6 quadros disponíveis no Figma
Quadros Figma disponíveis
  • Possibilidade de incorporar outras marcas ou identidades visuais através da variável de cor primária e secundária

Logo Zeroheight

Zeroheight

  • 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

 Exemplo de componente do Ágora Design System
Exemplo de componente do ADS

Logo StoryBook

StoryBook

  • 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

Biblioteca do Ágora Design System
Biblioteca do ADS

Logo Npm

Npm

Conteúdo:

  • @arte-pt/agora-design-system

Principais tecnologias:

Ágora Design System no Npm
ADS no Npm

Last updated