1
resposta

Change overlay e Overlay com várias ações

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Pessoal estou com um problema aqui nessa situação, e confesso que não sei se existe essa possibilidade. Tentarei explicar a necessidade aqui:

  1. o componente "Bloco principal" apresenta os box de captura de digital
  2. o componente "Frame" apresenta as variações dos box, default, e preenchido
  3. o componente pop_up exibe o pop up

como é o fluxo e como prototipar: (para ficar interessante o prototipo eu gostaria que fosse dessa forma)

  1. ao clicar em "captura" no bloco principal, abre o pop, e ao clicar em fechar o box é alterado pra segunda variante
  2. ao clicar em "remover digital" abre um pop e o box volta aa variação default

O que eu consigo fazer?

  1. exemplificar apenas um exemplo com fluxos simples, repetindo os frames e alterando manualmente com a ação click - navigate to e fazendo o retorno com ação click - navigate to, nesse caso consigo aplicar pelo menos o pop up com overlay ficando da seguinte forma:
  • Ao clicar no "captura" do bloco principal 1, abro o pop up em overlay, ao clicar no fechar do popup, faço a ação navigate to para uma cópia do bloco principal (2) e altero a variação do box em questão para a opção preenchido
  • só que fazer dessa formam teria que fazer várias copias do bloco principal para simular esse processo

O que eu gostaria de fazer:

  1. no componente "frame" eu prototipei da seguinte forma se eu clicar em captura acontece um swap overlay e alterna pra variação preechimento porém, antes de fazer a alteração o pop up de confirmação deveria abrir, nesse caso o fluxo ficaria: Clico em "captura" (independente de qual dos 10 dedos) abre o pop up, clico em "fechar" e o box que teve a ação do botão ativado iria mudar para a variação preenchida. Dessa forma um por um eu vou clicando e alterando a variação conforme eu vou capturando as digitais
1 resposta

Olá, Sergio. Tudo bem com você?

Para conseguir essa interação sem ter que duplicar várias vezes o "Bloco principal", você pode utilizar a funcionalidade de "Interactive Components" do Figma. Com ela, você pode criar variantes de um componente e definir interações entre essas variantes diretamente, sem precisar duplicar os frames. Veja como você pode fazer isso:

  1. No seu componente "Frame", crie variantes para os estados "default" e "preenchido" de cada box.
  2. No componente "pop_up", crie uma interação de "On Click" que feche o pop-up e, ao mesmo tempo, acione a troca de variante no "Frame" correspondente para o estado "preenchido".
  3. No "Bloco principal", defina uma interação para cada botão "capturar" que abra o pop-up em overlay.
  4. Para a ação de "remover digital", você precisará de uma interação que abra um pop-up diferente ou o mesmo pop-up com uma lógica condicional, e depois retorne o box para a variante "default".

Lembre-se de que para usar "Interactive Components", você precisa estar no plano Figma Professional ou superior, ou então estar em uma equipe que tenha acesso a essa funcionalidade. Além disso, essa funcionalidade está em beta, então pode ser necessário se inscrever para ter acesso a ela.

Espero que essa orientação ajude você a criar a interação desejada no seu protótipo.

Qualquer dúvida estou à disposição.

Até mais e bons estudos!