Mockup Fiori: Prototipe Telas SAP Antes de Desenvolver 2026

Prototipar telas SAP antes de escrever uma linha de ABAP é uma das práticas mais subestimadas em projetos de implementação. Tipicamente, times de desenvolvimento gastam semanas codificando interfaces Fiori para descobrir, no review com o usuário-chave, que o fluxo de aprovação estava errado ou que campos críticos faltavam. Um mockup Fiori bem feito — validado antes do sprint de desenvolvimento — elimina esse ciclo de retrabalho, reduz custos e alinha expectativas entre negócio e TI desde o início. Este guia explica como estruturar esse processo de forma técnica e prática.

O Que É um Mockup Fiori e Por Que Ele Importa

Um mockup Fiori é uma representação visual de uma tela SAP Fiori — sem código de produção por trás — que simula a experiência do usuário final. Ele pode ir de um wireframe estático (esboço de baixa fidelidade) até um protótipo interativo de alta fidelidade que respeita as SAP Fiori Design Guidelines.

No contexto de projetos SAP, o mockup cumpre três funções estratégicas:

1. Validação de requisitos: o usuário-chave enxerga o fluxo concreto, não um documento de texto abstrato.
2. Antecipação de GAPs: campos que não existem no standard ficam visíveis antes do desenvolvimento, facilitando o GAP analysis do projeto.
3. Insumo para especificação: o mockup aprovado vira anexo da Especificação Funcional (EF) e elimina ambiguidade para o desenvolvedor ABAP.

Sem esse artefato, o consultor funcional entrega uma EF em texto, o desenvolvedor interpreta à sua maneira e o resultado raramente bate com a expectativa do negócio.

Tipos de Fidelidade: Escolha Certa para Cada Fase

Não existe um único tipo de mockup adequado para todo momento do projeto. A escolha depende da fase SAP Activate em que você está:

Fase SAP Activate	Fidelidade Recomendada	Objetivo Principal
Explore / Discover	Baixa (wireframe)	Alinhar escopo macro
Realize (início)	Média (componentes Fiori)	Validar fluxo com usuário-chave
Realize (sprint)	Alta (protótipo interativo)	Insumo para EF e desenvolvimento
Deploy / Run	Alta fidelidade + dados reais	Treinamento e UAT

Nas fases iniciais, gastar horas num protótipo pixel-perfect é desperdício. Um wireframe de caixas e setas já resolve o alinhamento de escopo. À medida que o projeto avança para os sprints de desenvolvimento, o nível de detalhe precisa crescer — campo por campo, comportamento por comportamento.

Padrões Fiori que Todo Consultor Precisa Conhecer

Antes de prototipar, é fundamental entender os floorplans do SAP Fiori Horizon, que é o design system atual da SAP. Cada tipo de app tem um padrão arquitetural diferente:

• List Report + Object Page: padrão mais comum. Usado em apps transacionais como exibição de Freight Orders no SAP TM ou pedidos de venda (VA03). Gerado via Fiori Elements com OData V4 + CDS annotations.
• Worklist: variação do List Report para filas de trabalho sem filtros complexos.
• Analytical List Page (ALP): combina KPIs no topo com tabela detalhada. Ideal para dashboards operacionais.
• Overview Page: múltiplos cards de informação. Útil para cockpits gerenciais.
• Wizard: fluxo guiado passo a passo. Para processos de criação complexos, como onboarding de transportadora.

Conhecer esses padrões antes de desenhar evita que você protótipo uma tela que não tem equivalente técnico no SAP Fiori Elements — o que forçaria um desenvolvimento custom de maior custo.

Para aprofundamento, a SAP Help Portal documenta cada floorplan com especificações de componentes e comportamento esperado.

Passo a Passo: Do Requisito ao Mockup Aprovado

Este fluxo funciona para qualquer módulo SAP — TM, SD, MM, EWM ou FI:

1. Capturar o requisito em formato de user story Escreva no formato: "Como [papel], quero [ação] para [benefício]." Exemplo: "Como planejador de transporte, quero visualizar Freight Orders pendentes de alocação, filtradas por modal e janela de tempo, para priorizar o planejamento diário."

2. Identificar o floorplan adequado Com base na user story, escolha o padrão Fiori (List Report, Worklist, etc.) e liste os campos obrigatórios, opcionais e de ação (botões, status).

3. Mapear campos no standard vs. campos customizados Verifique nas CDS Views relevantes (ex: /SCMTMS/I_FREIGHT_ORDER para TM) quais campos já existem. Campos ausentes no standard viram extensões — documentados como GAPs RICEFW do tipo Enhancement ou Report.

4. Construir o mockup no Designer Use componentes fiéis ao Fiori Horizon: SAP BTP Worklist, tabelas responsivas, filtros em SmartFilterBar, botões de ação no toolbar. A OrkestraFlow oferece um Designer Fiori integrado que gera o mockup já com anotações técnicas e esboço de CDS Views.

5. Validar com usuário-chave Conduzir sessão de walkthrough — não demo. O consultor apresenta o fluxo, o usuário-chave interage e aponta ajustes. Documente cada solicitação de mudança antes de fechar o artefato.

6. Gerar a Especificação Funcional O mockup aprovado torna-se o anexo principal da EF. Cada campo recebe: nome técnico sugerido, tipo de dado, obrigatoriedade, fonte (tabela/CDS), e lógica de negócio associada.

Erros Comuns ao Prototipar Telas SAP

Alguns antipadrões recorrentes em projetos brasileiros de SAP:

• Ignorar as Design Guidelines da SAP: criar telas com componentes que não existem no Fiori Horizon gera expectativas impossíveis de implementar com Fiori Elements. Sempre valide o componente no catálogo oficial.
• Prototipar antes de entender o standard: muitos consultores desenham o custom primeiro sem verificar se o SAP já entrega aquela funcionalidade. Valide o standard antes — um relatório de Freight Orders já existe no SAP TM e pode ser o suficiente.
• Mockup sem dado de exemplo: telas em branco não comunicam. Adicione dados fictícios realistas (nome de transportadora, número de documento, valores) para o usuário conseguir avaliar o layout de verdade.
• Não versionar o mockup: projetos longos geram múltiplas versões. Sem controle de versão, o desenvolvimento pode seguir um mockup desatualizado. Numere versões e registre datas de aprovação.
• Separar mockup do catálogo RICEFW: o protótipo de uma tela custom precisa estar rastreado a um item RICEFW. Sem esse vínculo, o esforço de estimativa fica prejudicado.

Se você ainda está estruturando como organizar esses artefatos dentro da metodologia SAP Activate, vale revisar nosso guia sobre SAP Activate e documentação de projeto.

Mockup Fiori vs. Desenvolvimento Direto: O Custo Real

A argumentação mais comum contra prototipação é a de que "custa tempo". Na prática, o raciocínio se inverte:

• Um mockup de alta fidelidade leva tipicamente 4 a 8 horas para uma tela complexa.
• Uma correção de layout após o desenvolvimento ABAP — especialmente em apps RAP com Fiori Elements — pode consumir de 1 a 3 dias, dependendo da profundidade da mudança.
• Mudanças de fluxo pós-UAT, quando o transporte já subiu para Produção, custam ordens de magnitude a mais.

Além do custo financeiro, há o custo de reputação do consultor e da consultoria. Um go-live com tela de produção que não atende ao usuário final corrói a confiança no projeto inteiro.

O investimento em mockup se paga na primeira correção evitada.

Como a IA Acelera a Prototipação Fiori

Ferramentas de IA com domínio técnico SAP conseguem transformar uma descrição de requisito em um rascunho de mockup Fiori em minutos — já respeitando os floorplans corretos e sugerindo os campos adequados com base nas CDS Views do módulo.

Na prática, o fluxo fica assim:

1. O consultor descreve a user story em linguagem natural.
2. A IA sugere o floorplan adequado (ex: List Report para filas, Wizard para criação guiada).
3. A IA lista os campos prováveis com base no standard SAP (ex: /SCMTMS/ para TM, VBAK/VBAP para SD).
4. O consultor refina no Designer visual com componentes Fiori Horizon.
5. A plataforma gera automaticamente a estrutura da EF e o esboço de CDS annotation para Fiori Elements.

Esse ciclo reduz drasticamente o tempo entre o workshop de requisitos e o artefato pronto para revisão. É a diferença entre uma entrega em horas versus dias.

Combinado com a geração de casos de teste — tema detalhado no nosso artigo sobre Teste Automatizado SAP — o mockup Fiori integrado a uma plataforma de documentação cria um pipeline completo de artefatos rastreáveis.

Rastreabilidade: Conectando Mockup, EF e RICEFW

Um mockup isolado tem valor limitado. O real ganho de produtividade vem quando ele está conectado ao resto da documentação do projeto:

• Mockup → Especificação Funcional: o artefato visual vira insumo direto da EF, campo por campo.
• Especificação Funcional → Item RICEFW: telas customizadas são categorizadas como Interface ou Enhancement no catálogo RICEFW.
• Item RICEFW → Caso de Teste: cada campo e comportamento do mockup gera cenários de teste rastreáveis.
• Caso de Teste → UAT: o usuário-chave valida exatamente o que foi prototipado e especificado.

Essa cadeia de rastreabilidade é o que separa projetos SAP bem documentados de projetos que vivem de conhecimento tácito — e que travam na hora da manutenção ou do upgrade para SAP S/4HANA.

Para aprofundar a estrutura de documentação de GAPs e RICEFW nesse pipeline, recomendamos o artigo GAP Analysis em Projetos SAP.

Conclusão

O mockup Fiori não é um luxo de projetos grandes — é uma prática de qualidade que qualquer consultor SAP pode e deve adotar. Ele encurta o ciclo de validação, antecipa GAPs custosos, produz insumo direto para o desenvolvimento ABAP/RAP e eleva o nível de comunicação entre negócio e TI.

Adotar um processo estruturado — da user story ao protótipo aprovado, conectado ao catálogo RICEFW e à Especificação Funcional — é o que transforma entregas pontuais em metodologia replicável. Com ferramentas que entendem a linguagem técnica do SAP, esse processo deixa de ser manual e passa a ser acelerado por IA com domínio real do ecossistema.

---

Começar 30 dias grátis — experimente o Designer Fiori da OrkestraFlow e gere seu primeiro mockup com especificação técnica integrada hoje mesmo.