Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Duvida de Figma avançado - Instancia / interação / componentização

Gente, vocês sabem se da pra salvar os valores da instancia de um componente ao dar "change to" nas propriedades deste componente no FIGMA?

Passos pra replicar:

  1. Crie um componente de card
  2. Crie um componente de botao com o texto "Exemplo1" dentro
  3. Selecione o componente card, percorra até properties, clique no + e adicione como instancia o botao
  4. Adicione uma propriedade no card booleano onde false a instancia nao existe e true a instancia existe
  5. adicione uma interacao "on click" para "change to" para alterar o valor da propriedade quando se clicar no card
  6. Instancie o componente e altere o texto do botao "exemplo2"
  7. Adicione um flow no card e mantenha ele com a propriedade "false"
  8. Teste o flow e veja o botao com o texto "Exemplo1"

O que faco para ele atualizar para "exemplo2" ao clicar?

3 respostas
solução!

Ooi, Amir! Como vai?

Tô aqui para ajudar você! :)

Como eu não tenho o projeto que você está usando, vou deixar abaixo uma alternativa que você pode usar para “esconder” o botão quando ele for clicado.

  1. Crie o componente card.
  2. Crie o componente botão.
  3. Fora do frame onde os componentes card e botão foram criados, crie um componente no mesmo formato do componente botão e na mesma cor de fundo do componente card. Vou chamar esse componente de componente de cobertura.
  4. Adicione uma interação do tipo "on click" entre o componente botão e o componente de cobertura (que foi criado fora do frame).
  5. Nas configurações da interação, substitua “Navigate to” por “Open overlay”. Em “Overlay settings”, selecione a opção “Manual”, e ajuste o componente de cobertura de modo que ele “esconda” o botão. → Às vezes não é necessário ajustar o componente de cobertura. No gif abaixo, ajustei apenas para que você possa visualizar que é possível fazer isso.
  6. Agora, ao clicar no botão, ele será sobreposto pelo componente de cobertura, ficando “invisível” ao usuário, já que estará da mesma cor do fundo do card.

Veja como eu fiz:

Início da descrição. No gif, a interface do Figma está aberta, nela há um frame com fundo cinza, contendo um card na cor branca e um botão azul que está centralizado no card. O gif apresenta o passo a passo sobre como sobrepor um elemento usando a interação do tipo “Open overlay”. Fim da descrição.

Obs.: Sabe o componente de cobertura? Se você adicionar um texto, como "Botão 2", no componente de cobertura, ele poderá se comportar como um novo botão após o clique. Assim, ao clicar no botão original, o usuário verá o "Botão 2", criando a sensação de troca de botão.

Ressalto que, como não tenho acesso ao seu projeto, pode ser necessário fazer ajustes para se adequar ao seu objetivo.

Espero ter ajudado!

Abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Obrigado, é uma alternativa!

Fico feliz por ter ajudado, Amir!

Sucesso nos estudos!

Abraço! :)