> For the complete documentation index, see [llms.txt](https://guias.mosaico.gov.pt/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guias.mosaico.gov.pt/guias-praticos/decreto-lei-n.o-49-2024-perguntas-frequentes/desenho-dos-servicos-federados/prototipos.md).

# Protótipos

## Fluxo serviço federado

### Antes de começar o serviço online

Ao escolher "realizar o serviço online" a pessoa é direcionada para as necessidades específicas e os  requisitos exigidos para a realização do serviço.

<div align="center"><figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FZwguPwS8tpPbQsa0lHJl%2FImagem8.jpg?alt=media&amp;token=a1d5f86a-e27b-45b6-af35-d0833d2c7b74" alt="Apresentação dos requisitos  para realizar o serviço" width="224"><figcaption><p>Apresentação dos requisitos <br>para realizar o serviço </p></figcaption></figure></div>

### Formulário passo a passo

O fluxo do serviço é constituído por header, hero, body e footer. No corpo é onde temos o formulário, passo a passo e os campos de preenchimento, que cumprem com um número de requisitos para estar em conformidade legal.

<figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FcjCKrEhTLzvcfttvFt9G%2FImagem9.png?alt=media&amp;token=b08ac959-46a1-412f-95b1-78da0325470f" alt="Apresentação do passo a passo sequêncial"><figcaption><p>Apresentação do passo a passo sequencial</p></figcaption></figure>

### Conclusão do serviço

Ao concluir o serviço é esperado que seja indicado à pessoa onde pode consultar as informações que aqui realizou, bem como dar a visão dos próximos passos até o serviço ficar concluído.

<figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2Fmt8pJvjmzYpXjEqzM7Y4%2FImagem10.png?alt=media&amp;token=d77015d5-4225-453d-b92a-56e6769d18d8" alt="Conclusão do serviço"><figcaption><p>Conclusão do serviço</p></figcaption></figure>

## Como navegar no Figma

Através da ferramenta Figma, disponibilizamos os modelos de fluxo para serviços federados com as regras e diretivas legais que devem ser cumpridas.

<figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2F54SJtUxcTuJhNXy3RrlE%2Fimage.png?alt=media&amp;token=db707317-2fea-4545-88fa-cdca7872c5a8" alt="Quadro 6 disponível no Figma" width="323"><figcaption><p>Quadro 6 disponível no Figma</p></figcaption></figure>

[Aceder aos modelos Figma](https://www.figma.com/design/7afr19JOV8RKnbqrmkWQC3/ADS-%7C-06---Modelos-Servi%C3%A7os-Federados?node-id=1-6\&t=TJpWag5SVwWBFSyW-1)

* Para aceder ao ficheiro é necessário solicitar o acesso às equipas ARTE
* Ficheiro protegido por palavra-passe

<figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2F8cJabx7wWtgpS6HhvfXZ%2FImagem12.png?alt=media&amp;token=2984367c-7b01-47ea-80ed-ad4ea40d7900" alt="Exemplo de componente no Figma" width="375"><figcaption><p>Exemplo de componente no Figma</p></figcaption></figure>

Neste ficheiro Figma são disponibilizados os modelos agnósticos e requisitos com as regras e diretivas legais que devem ser cumpridas. Está também disponível um exemplo real de aplicação do modelo para demonstrar a aplicabilidade num fluxo de serviço federado.

No menu à esquerda pode navegar entre os exemplos disponíveis e consultar em detalhe.

* Modelos agnósticos​

<div align="center"><figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2F9hR4rRnMuTjqDwuvi5Nh%2FImagem13.png?alt=media&amp;token=81bae1e0-82d5-41fa-b4a2-d15a91301446" alt="Modelos e requisitos no Figma" width="358"><figcaption><p>Modelos e requisitos no Figma</p></figcaption></figure></div>

* Exemplo real aplicado​

<div align="center"><figure><img src="https://2869735785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0oDmFsd3xf4yMMXZ1ctr%2Fuploads%2FpYaXCLr7YnGLK9PWKM8P%2FImagem14.png?alt=media&amp;token=63f42235-dcbd-4ffe-aa31-768d7d7d7fe7" alt="Exemplo real aplicado no Figma" width="370"><figcaption><p>Exemplo real aplicado no Figma</p></figcaption></figure></div>