1
resposta

Seleção única (de múltiplas opções) utilizando variáveis

Boa noite! Nos últimos dias, tenho criado um protótipo para estudar as estruturas e meu conhecimento em UI Design e no Figma.
Me deparei com uma situação em que criei 5 opções de seleção, porém, queria que elas fossem selecionadas uma por vez (ou seja, não quero que seja possível selecionar mais de uma opção por vez)
Criei uma situação parecida em um dos modais do estudo, mas nesse caso eram apenas 2 opções no total: utilizei a variável String e apliquei uma condicional para cada opção; lembrando que essas 2 opções faziam parte do mesmo componente, ou seja, instâncias idênticas.
No caso das 5 opções, se eu fosse utilizar condicionais teria que fazer criar inúmeras variações, então não é viável.

Alguém tem alguma dica de como posso resolver essa questão?

Aqui a imagem das opções para melhor entendimento (https://cdn1.gnarususercontent.com.br/1/7815371/3b667763-f0c5-4464-a0b4-d194c21d2b9e.png)

1 resposta

Olá, Giovanna!

Para esse tipo de seleção única no Figma, o mais recomendado é trabalhar com uma variável única de estado para representar qual opção está ativa, em vez de criar várias condicionais separadas.

Você pode estruturar assim:

  • Crie uma variável do tipo String chamada, por exemplo, selectedOption;
  • Defina valores possíveis como "Opção 1", "Opção 2", "Opção 3" e assim por diante;
  • Em cada item, aplique uma condição verificando se o valor da variável é igual ao identificador daquela opção;
  • No clique/interação de cada item, configure para alterar a variável para o valor correspondente.

Dessa forma, apenas uma opção ficará ativa por vez, porque todas estarão consultando a mesma variável. Quando uma nova for selecionada, ela substitui a anterior automaticamente.

Essa abordagem escala muito melhor e evita a necessidade de inúmeras variantes.

Espero que isso ajude no seu protótipo.