Olá, estou com um problema ao criar minhas variantes para botões. Segui passo a passo da aula e mesmo assim não consigo usar o recurso de troca de modo de cor dos botões, irei deixar uma foto do problema. Acredito que eu tenha feito algo errado, tentei por 4 vezes refazendo e não deu certo.
Aproveite o aniversário da Alura
e comece sua jornada tech
Por tempo limitado
Oi, Kaique!
Valeu por compartilhar sua dúvida e a imagem do erro! Essa mensagem que aparece indica que há conflitos entre as propriedades e os valores aplicados nas variantes do seu componente. Isso pode acontecer, por exemplo, quando duas variantes tentam controlar o mesmo atributo de forma diferente.
Pra conseguir te ajudar direitinho, queria te perguntar algumas coisas rápidas:
Modo de cor aparece corretamente no painel direito quando você seleciona o componente na tela?E se puder, você consegue compartilhar o link do seu arquivo no Figma (em modo de edição)? Assim consigo olhar exatamente o que está acontecendo e te orientar melhor.
Se estiver com dúvidas sobre como copiar o link, é só clicar em Compartilhar > Copiar link no canto superior direito do Figma.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
Olá!!
Segue o link do Figma pro meu projeto: https://www.figma.com/design/VwaRGqRmxKSwtGgfo1oLmA/Projeto-Landing-Page?node-id=0-1&t=qJYpbtnD8Zx8NeVS-1
Gostaria de ter colocado para edição e não apenas visualização, não sei se seria configuração da conta ou se seria apenas para contas Pro.
O problema em questão está na página Componentes - Paleta onde se encontram meus botões e outros componentes, agradeço desde já seu retorno e atenção!
Oi, Kaique!
Obrigada por compartilhar o link. Você precisa fazer alguns passos:
Passo a passo: Corrigindo conflitos e organizando variantes no Figma
Selecione todos os botões que representam diferentes estilos (cor e estado).
Utilizamos o atalho Ctrl + Alt + K ou clique com o botão direito > Create component. Vai aparecer no canto superior direito o botão em formato de losango
Com todos os componentes selecionados, clicamos com o botão direito > Combine as variants.
Se aparecer esse erro:
Some variants have the same property values applied
Clique em Select conflicting variants e dê nomes únicos para cada variante.
Identifique os botões com o mesmo nome e ajustamos os valores para Branco, Roxo, Cinza, etc.
No seu caso os dois últimos botões estavam no mesmo nome, romeei para botão branco e roxo.
Os botões agora estão organizados em um set de variantes, com propriedades nomeadas corretamente e sem conflitos.
Dica: sempre nomeie suas variantes de forma clara e consistente para facilitar o uso e manutenção no design system e também indico rever a aula para que os conceitos fiquem mais claros pra você.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!