--- title: "Um passo a passo animado para o seu app GoodBarber" description: "No GoodBarber, o passo a passo, ou walkthrough, é configurado uma vez, em cinco passos no máximo, cada um com uma imagem ou uma animação Lottie." canonical_url: "https://pt.goodbarber.com/blog/como-animar-o-passo-a-passo-do-meu-app-a1406/" lang: pt date: 2026-11-13 last_updated: 2026-11-13 --- # Como animar o passo a passo do meu app? No GoodBarber, o passo a passo, ou walkthrough, apresenta o seu app na primeira abertura, em cinco telas no máximo, que só são vistas uma vez. O seu app tem só alguns segundos para se apresentar, e o passo a passo é configurado em poucos minutos no back office, com as cores e as fontes do seu app. Cada passo mostra uma imagem ou, se você quiser, uma animação Lottie. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://pt.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer [Escolha a **GoodBarber** como suaFonte de notícias preferidaEscolha a **GoodBarber** como sua](https://www.google.com/preferences/source?q=pt.goodbarber.com) 13 de nov. de 2026 · 7 min de leitura ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98688325-68887971.jpg?v=1794562897.9697213) Veja o que um passo a passo faz pelo seu app, os dois layouts entre os quais escolher e como animar um passo. ## O que é um passo a passo e quando ele aparece ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98688325-68887972.jpg?v=1794562899.7137308) O passo a passo é o seu app se apresentando. No back office do GoodBarber, ele fica em **Meu app › Passo a passo**. Ele aparece no celular, uma única vez, na primeira abertura do app depois da instalação. Ele vem antes dos pedidos de permissão, notificações ou localização, para que a primeira coisa vista seja o seu app. Ele tem **até cinco passos**, cada um com uma mídia, um título e uma descrição, todos opcionais. Em volta, os mesmos elementos de um passo para o outro, o título da página ou o seu logo, o botão **Pular**, o paginador e o botão **Próximo**, que vira **Começar** no último passo. Para avançar, basta tocar no botão ou deslizar a tela. O fundo, as fontes, a cor do botão e do paginador são os do seu app, é o nosso princípio "Set once, consistent everywhere". Você não tem nada para redesenhar. O passo a passo é o primeiro momento do onboarding, cujas [boas práticas](https://pt.goodbarber.com/blog/onboarding-de-apps-mobile-boas-praticas-para-chegar-mais-rapido-ao-valor-a1344/) já detalhamos. ## Polaroid ou Immersive, dois layouts para os passos do passo a passo ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98688325-68887973.jpg?v=1794562901.9257429) O back office do GoodBarber oferece dois layouts para os passos. No **Polaroid**, a mídia aparece acima do título, nas proporções originais, nunca ampliada, e uma imagem de 1200 × 1200 pixels basta. No **Immersive**, a mídia ocupa a tela inteira, como um fundo, e o texto fica por cima. Prepare 1536 × 2048 pixels e escolha um **Efeito nas imagens**, Nenhum, Opacidade ou Gradient, para que o texto continue legível sobre a foto. Nos dois layouts, o **alinhamento do conteúdo** oferece seis posições, à esquerda ou no centro, em cima, no meio ou embaixo. Uma regra simples para escolher. Uma foto que traz um clima pede o Immersive, foi o que fez a escola de música Eastside Music Workshop com as fotos das aulas. Um desenho ou uma animação que explica pede o Polaroid, com um fundo próprio, foi a escolha da Unit 7, o ateliê de serigrafia, cujos três passos são desenhados. ## Animar um passo, com uma animação Lottie no lugar da imagem ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98688325-68887974.jpg?v=1794562903.5217514) Uma imagem diz o que o seu app faz. Uma animação mostra. No primeiro passo da Unit 7, um horário da agenda fica verde e a palavra BOOKED é carimbada, e você entende que a reserva é feita pelo celular antes mesmo de ler a frase. No segundo, um rodo atravessa a tela de serigrafia e o contador passa de 23 para 24 impressões. No terceiro, um tambor de Riso sinalizado como vazio volta a ficar disponível, com AVAILABLE em adesivo. Três gestos de três segundos, em loop. É o nosso princípio "Polish you can feel", o movimento que faz sentir um app bem-feito. Essas animações são arquivos **Lottie**, um formato de animação vetorial, leve, que o app reproduz diretamente. Você as encontra na biblioteca LottieFiles, como explica [a nossa ajuda](https://pt.goodbarber.com/help/organizar-seu-conteudo-r93/adicionar-lottiefiles-ao-passo-a-passo-do-seu-app-a427/), ou pode mandar desenhá-las com as cores do seu app, como as da Unit 7. No GoodBarber, uma animação é configurada com a mesma facilidade de uma imagem. No passo, escolha **LottieFiles** em vez de **Imagem**, envie o arquivo e depois ajuste a **Velocidade de reprodução**, de x0.5 a x3, e a **Reprodução em loop**. Em todos os casos, a animação recomeça do início toda vez que o passo aparece. No Polaroid, ela ocupa a largura da tela e mantém as proporções. No Immersive, ela preenche a tela como uma foto. A animação continua sendo uma escolha. Um passo funciona muito bem com uma imagem fixa, e as duas se combinam no mesmo passo a passo. ## Configure o passo a passo no GoodBarber [Animação: no painel do passo a passo, o passo 1 passa de uma imagem para uma animação Lottie, e depois o Alinhamento do conteúdo passa para embaixo à esquerda](https://player.vimeo.com/video/1246541295?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) O passo a passo é uma extensão do GoodBarber. Instale-a em **Loja de extensões › Todas as extensões**, na página **[Passo a passo do app](https://pt.goodbarber.com/extensions/walkthrough/)**, com o botão **Instalar**. Ela custa 5 € por mês nas ofertas Standard e Premium e está incluída na oferta Pro. O menu **Meu app › Passo a passo** aparece então, com a pré-visualização do seu app ao lado. 1. **Escolha o layout**, Immersive ou Polaroid, no alto do painel. 2. **Adicione os passos**, cinco no máximo. Clique em **Adicionar um passo** e depois em **Imagem** ou **LottieFiles**. Para uma animação, a aba **Arquivo** recebe o seu arquivo Lottie JSON, e a aba **URL**, o link do asset de uma animação LottieFiles. Depois ajuste a velocidade e o loop, e escreva o **Título** e a **Descrição**. A pré-visualização, ao lado, abre no primeiro passo, e o botão **Próximo** dela mostra os outros. 3. **Ajuste as Configurações gerais**, comuns a todos os passos. A **Cor do fundo**, o **Alinhamento do conteúdo**, o **Título da página** ou um logo no lugar dele, a fonte e a cor do título e da descrição do passo, o **Botão de pular** e o **Botão "Próximo"**, a cor do **Paginador** e, no Immersive, o **Efeito nas imagens**. Tudo é salvo sem botão para clicar, e a pré-visualização acompanha. No vídeo, o Alinhamento do conteúdo passa para embaixo à esquerda, e todos os passos acompanham. Para que um único passo tenha configurações próprias, um fundo só dele, outro alinhamento, outra cor de título ou de botão, use o JSON do seu app. A extensão gratuita **Edição avançada** o abre com um clique em { EDIÇÃO }, como para [a sombra](https://pt.goodbarber.com/blog/como-regular-a-sombra-na-minha-app-a1363/), [as bordas](https://pt.goodbarber.com/blog/como-regular-as-bordas-na-minha-app-a1372/) ou [a forma](https://pt.goodbarber.com/blog/que-forma-para-a-minha-app-cantos-retos-arredondados-ou-redondos-a1394/). O editor abre em walkthrough. Abra steps, depois o passo a ser modificado, e adicione as chaves do painel que você quer mudar. Por exemplo, para que só o primeiro passo coloque o texto embaixo à esquerda, clique em "+ Adicionar", digite **contentAlign** no campo newKey e o valor bottom_left, e depois "Adicionar". Por fim, clique em "Guardar". Os outros passos mantêm o Alinhamento do conteúdo do painel. ## Antes, depois: o mesmo passo, em imagem e depois em animação [Animação: o mesmo passo do passo a passo, com uma imagem fixa à esquerda e a animação Lottie à direita](https://player.vimeo.com/video/1246541294?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Para ver o que uma animação muda, aqui está duas vezes o mesmo passo, o da tiragem na Unit 7. À esquerda, a imagem fixa. O desenho é caprichado, mas parado. Fica um pouco abstrato, e não dá para entender de cara o que ele mostra. À direita, a mesma ilustração animada. O rodo atravessa a tela de serigrafia, a tinta aparece por onde ele passa, o contador vai de 23 para 24, e você reconhece na hora uma tiragem em andamento. Nada mais mudou, nem o texto, nem as cores, nem o botão. Aqui, o movimento deixa o passo fácil de ler. Mas mesmo quando o desenho já é claro, a animação dá vida ao passo a passo e mostra que o seu app é caprichado. ## O meu passo a passo preferido é animado [Animação: o passo a passo completo de um app de ateliê de serigrafia, da abertura até a tela inicial](https://player.vimeo.com/video/1246541293?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) O que eu prefiro é um passo a passo animado. Para apresentar um app em poucas telas, não conheço nada mais expressivo que o movimento. O da Unit 7, um ateliê de serigrafia compartilhado, é um belo exemplo. Ele usa o Polaroid, sobre um fundo Charcoal #282727, com o logo do ateliê no lugar do título. Os títulos estão em Archivo Black 28, as descrições em Archivo 17, num cinza Concrete #A7A7A7. O botão, com cantos retos, e o paginador ganham o verde do ateliê, Unit Green #B9FF00. As três animações Lottie foram desenhadas para o app, nas suas cores, e cada uma mostra em três segundos um gesto dos membros, reservar, imprimir, avisar. Em vinte segundos, você entende para que serve o app, e a tela inicial assume. **O passo a passo em resumo** - Em um app GoodBarber, o **passo a passo**, ou walkthrough, aparece uma única vez, na primeira abertura no celular, e tem até cinco passos. - Cada passo traz uma mídia, um título e uma descrição, todos opcionais. Em volta, o título da página ou o seu logo, o botão **Pular**, o paginador e o botão **Próximo**, que vira **Começar** no último passo. - Dois layouts, **Polaroid**, a mídia acima do título, e **Immersive**, a mídia em tela cheia com um efeito para a legibilidade do texto. - Uma animação **Lottie** é configurada como uma imagem, com velocidade de x0.5 a x3 e reprodução em loop. Ela recomeça do início toda vez que o passo aparece. - Tudo é configurado em **Meu app › Passo a passo**, e cada passo pode ter configurações próprias no JSON, com a extensão gratuita **Edição avançada**. ## É a sua vez Instale o Passo a passo do app na **Loja de extensões**, abra **Meu app › Passo a passo** e adicione um primeiro passo com uma imagem, o seu título e uma frase. A pré-visualização o mostra na hora. Depois experimente uma animação Lottie no lugar da imagem e veja a página ganhar vida. Ainda não tem um app? [Crie o seu](https://pt.goodbarber.com/create/) com o GoodBarber, o Mobile App Builder. Siga a GoodBarber no Google [![Adicione como fonte preferencial no Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-pt.7226f5ccc026.png)](https://www.google.com/preferences/source?q=pt.goodbarber.com) ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Sobre o autor Marie-Pierre Jeffard UI Designer Sou UI Designer da GoodBarber. Design system das apps, componentes, layouts, site, ilustrações, animações: tudo o que faço gira em torno da interface. O que me agrada no nosso produto é inventar regras universais, que funcionam em todos os ecrãs e acolhem todas as identidades visuais. A app torna-se uma montra para o seu conteúdo. Gosto do que parece simples, e de todo o trabalho invisível necessário para lá chegar: as regras, as escolhas e as restrições que mantêm uma interface de pé. É isso que conto aqui. [Mais de Marie-Pierre](https://pt.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)