1
resposta

Como utilizar o conceito de ter uma base para criação das variantes usando o

Na aula o professor ensina a criar várias variantes de um botão a partir de um botão base. Para isso, ele fez:

  1. criou um botão e o transformou em componente.
  2. criou instâncias desse componente botão e modificou tamanho e cor de acordo com o desejado.
  3. selecionou todas as instâncias dos botões e criou um component set.

Meu problema se deu em replicar esse processo para a estrutura de lista, utilizando o Figma atualizado, com as opções de criar propriedades do tipo boolean em um item interno ao meu componente.

Minha 1ª tentativa

1 - criei a base com o ícone e o texto da ação.

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

2 - criei três instâncias para configurar as três opções na ação e criei o component set selecionando essas três instâncias.

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

3 - tentei selecionar o item de texto "CHAMADA" ou o outro item de texto "Descrição" para adicionar uma propriedade do tipo boolean. Porém o Figma não me permite fazer isso.

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

Dessa forma simplesmente não funciona. Não consigo usar component set com essas propriedades novas que ajudam tanto.

Minha 2ª tentativa

  1. Criei o componente base conforme 1ª tentativa.
  2. Ainda no componente base, inseri as propriedades do tipo boolean para a caixa de texto "CHAMADA".
  3. Aí criei as três instâncias e criei o component set.

Nesse caso, até funciona, mas eu não consigo ter todas as propriedades no mesmo local. A propriedade referente ao tipo de ação (com ícone, com texto ou sem nada) aparece quando eu seleciono a instância do meu component set. Mas a propriedade booleana do texto "CHAMADA" aparece quando eu entro uma camada à dentro da instância.

Prints

  • Selecionando a instância. (notar que no menu a direita só existe a propriedade tipo_acao)

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

  • Entrando uma camada à dentro. (notar que agora a propriedade chamada aparece)

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

Como fazer isso funcionar?

Vou colocar o passo a passo que eu fiz para dar parcialmente certo. (não tem o componente base)

  1. Criei um componente normalmente.
  2. Criei as variáveis booleanas para as caixas de texto "CHAMADA" e "Descrição".
  3. No menu a direita, fui em adicionar propriedade variant e adicionei +2 variantes para configurar a propriedade do tipo de ação (com ícone, com texto ou sem nada)

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

Nesse caso, ao olhar no menu a direita, todas as propriedades desejadas estão presentes e a instância funciona perfeitamente. Mas eu não consigo criar um componente base dessa forma.

Como que faço para criar um componente base e ainda assim ter todas essas propriedades funcionando?

1 resposta

Opa, e aí Diego, como vai?

Note que na primeira imagem, vc criou um componente, e a partir dele, criou um novo componente com 3 variants, e aí tentou inserir as propriedades boolean nas variants. Isso não vai funcionar, porque o boolean só vai aparecer nas camadas que forem do Main component. Um pouco confuso? Vamos a um exemplo:

Digamos que "A" é um Main componente. Então eu componentizo ele novamente, chamo esse novo componente de "A2", e crio 3 variants

Cada variant usará o componente "A", e ele possui suas próprias propriedades, que não podem ser criadas por um novo componente. Se for necessário criar ou modificar as propriedades de "A", você não fará isso no "A2", mas sim "A".

Voltando ao seu exemplo real, o correto mesmo seria você não componentizar novamente, e manter somente o que vc está chamando de "instância da lista", com as propriedades boolean que vc já havia incluido para o botão de ação e o ícone. Só ali, você já está suprindo o que precisa, sem a necessidade de criar um novo componente em cima disso.

Se tiver ficado confuso, pode voltar aqui que te ajudo a entender de outra forma. Abração!