[Dúvida] Criar a variavel de mudar de cor

Olá, Denis. Tudo bem com você?

Vamos tentar esclarecer isso passo a passo.

Primeiramente, é importante entender que as variantes no Figma são usadas para criar diferentes versões de um mesmo componente. No seu caso, você quer criar uma variante do menu que seja azul e outra que seja branca.

Para criar uma variante, você precisa primeiro ter um componente. No seu caso, o menu do sidenav. Depois de criar o componente, você pode criar uma variante dele seguindo estes passos:

1. Selecione o componente que você criou.
2. Na barra de ferramentas superior, clique no ícone de componentização (parece um diamante com um ponto).
3. No menu suspenso, clique em "Create multiple components" (Criar vários componentes).

Agora você tem um conjunto de componentes. Para criar a variante que muda de cor, você pode duplicar o componente original e mudar a cor dele. Para fazer isso:

1. Selecione o componente original.
2. Pressione "Ctrl + D" para duplicá-lo.
3. Mude a cor do componente duplicado para a cor desejada.

Agora você tem duas variantes do mesmo componente, cada uma com uma cor diferente. Para indicar ao Figma que "nesse momento o frame deve estar azul" e "nesse momento o Frame deve estar branco", você precisa usar a funcionalidade de alternância entre variantes.

Na aba de propriedades do componente, você verá uma opção chamada "Variante Ativa". Você pode alternar entre as variantes que criou clicando nessa opção e selecionando a variante que deseja ativar.

Em relação ao tamanho do frame uma vez que se transforma em componente, o Figma cria automaticamente um frame em volta do componente. Infelizmente, o tamanho do frame não pode ser alterado diretamente. No entanto, você pode tentar ajustar o alinhamento do componente dentro do frame para alinhá-lo à esquerda.

Qualquer dúvida estou à disposição.

Até mais e bons estudos!

Obrigado Maria, acredito que foi bem detalhada a sua resposta. Porém au ainda tenho uma dúvida. No caso do meno sidenav: ao lado direito, logo no inicio que eu tenho dois componentes: 1- Hoje 1 2- Próximo 7 dias 8

Eu tenho que criar um componente com duas variantes para o tópico hoje. Depois somente usar esse componente novamente para o tøópico abaixo (7 dias) e manter ele como"false" para ficar branco, é isso? Ou devo criar um componentem com 3 opções: 1- Hoje (Azul) 2- Hoje (Branco) 3- Próximo 7 dias

Acredito que isso esta me deixando um pouco confuso... Na minha percepção, cada componente deveria ter a versão inicial, e todas as outras versões criadas dentro daquele componente deveriam mudar alguma: texto, icone, cor, opacidade, contorno, etc... Mas agora estou confuso de como os componentes operam. Grato, Denis

Olá Denis, tudo bem?

Você pode fazer tanto como no primeiro exemplo como no segundo. Se você deseja fazer alterações sutis e trabalhar com vários estados diferente, o mais recomendado seria você criar a versão inicial, o componente pai, e a partir dele criar as suas variantes, os componentes filho.

Qualquer dúvida estou à disposição.

Até mais e bons estudos!