O elemento Spotlight permite que você chame a atenção do espectador para uma área específica de um degrau, escurecendo tudo fora da região definida de spotlight. Todas as áreas fora da região de destaque serão escurecidas. Atualmente, o nível de brilho da área diminuída não pode ser ajustado.
Destaque para cenários do mundo real
| Cenário | Configuração Recomendada |
|---|---|
| Guiando um usuário para clicar em um botão específico em uma demonstração de produto | Formato retangular, dimensionado para cobrir o botão |
| Destacando um ícone ou indicador de status | Formato circular, dimensionado ao ícone |
| Chamando atenção para um menu de navegação ou item na barra lateral | Formato retangular, cobrindo a região do menu |
| Focando em um campo de formulário durante um guia de integração | Forma retangular, alinhada à área de entrada |
Adicionando um elemento de destaque
Como adicionar destaque a um guia passo a passo
- Navegue até a etapa em que você quer adicionar um holofote.
- No painel direito, role até a seção Adicionar elementos .
- Clique em Destaque. Se um ou mais elementos de destaque já foram adicionados, clique em Adicionar novo para inserir outro.
- Use o ícone do olho no canto superior direito do painel Spotlight para alternar a visibilidade do spotlight para o usuário final. Holofotes ocultos não serão visíveis no Flo publicado, mas podem ser tornados visíveis novamente a qualquer momento.
- Ative a opção Ocultar outros elementos para ocultar temporariamente todos os outros elementos na etapa atual enquanto configura o spotlight. Outros elementos ficam escondidos temporariamente e não são deletados.
- No campo Nome , insira um rótulo descritivo para o elemento de destaque.
- Em Forma, escolha uma forma no menu suspenso:
- Retângulo - mais indicado para destacar botões, campos de formulário, painéis ou regiões horizontais da interface.
- Círculo - adequado para ícones, avatares ou componentes circulares de interface.
- Clique em Aplicar para salvar o elemento de destaque.

Como adicionar vídeo spotlight / demonstração interativa
- Navegue até a etapa em que você quer adicionar um holofote.
- No painel direito, role até a seção Adicionar elementos .
- Clique em Destaque. Se um ou mais elementos de destaque já foram adicionados, clique em Adicionar novo para inserir outro.
- Use o ícone do olho no canto superior direito do painel Spotlight para alternar a visibilidade do spotlight para o usuário final. Holofotes ocultos não serão visíveis no Flo publicado, mas podem ser tornados visíveis novamente a qualquer momento.
- Ative a opção Ocultar outros elementos para ocultar temporariamente todos os outros elementos na etapa atual enquanto configura o spotlight. Outros elementos ficam escondidos temporariamente e não são deletados.
- No campo Nome , insira um rótulo descritivo para o elemento spotlight (por exemplo,
Spotlight - Submit Button,Spotlight - Navigation Menu). - No campo de hora de início , insira o carimbo de hora em que o holofote deve aparecer.
- No campo Fim do tempo , insira o carimbo de tempo em que o holofote deve desaparecer.
- Para selecionar um quadro exato, use a opção Selecionar quadro exato (15 fps ). Use os botões de seta para navegar quadro a quadro ou insira um número de quadro diretamente. Clique em Select para confirmar ou Cancelar para descartar.
- Em Forma, escolha uma forma no menu suspenso:
- Retângulo - mais indicado para destacar botões, campos de formulário, painéis ou regiões horizontais da interface.
- Círculo - adequado para ícones, avatares ou componentes circulares de interface.
- Clique em Aplicar para salvar o elemento de destaque.

Gerenciamento dos elementos de destaque
Uma vez adicionados, os elementos de destaque são listados no painel Destaque, cada um exibindo o nome do destaque e a etapa à qual ele é aplicado.
- Adicione outro destaque - Clique em Adicionar novo no topo do painel para configurar um elemento adicional de destaque.
- Editar um destaque - Clique em qualquer destaque na lista para abrir seu painel de configuração, onde o nome, o passo e a forma podem ser modificados. Clique em Aplicar para salvar alterações, Cancelar para voltar ao painel do Spotlight, ou no ícone Excluir para excluí-la.
- Exclua um destaque - Passe o mouse sobre um destaque na lista para revelar o menu de três pontos. Clique nele e selecione Excluir para remover permanentemente o elemento de destaque.

Melhores práticas
- Use nomes descritivos - Rotule cada destaque claramente para facilitar a identificação e gerenciamento, especialmente quando múltiplos destaques forem aplicados em etapas diferentes.
- Esconder em vez de deletar - Desative temporariamente os holofotes que não são necessários em vez de deletá-los. Isso preserva a configuração para uso futuro.
- Redimensione e reposicione após aplicar - Certifique-se de que o holofote cubra exatamente a área pretendida na tela.
- Use holofotes com moderação - Evite aplicar holofotes em muitos passos consecutivos para manter sua eficácia.
- Pré-visualização após a aplicação - Verifique se a região escurecida não oculta outros conteúdos essenciais na tela.