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:
- criou um botão e o transformou em componente.
- criou instâncias desse componente botão e modificou tamanho e cor de acordo com o desejado.
- 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.
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.
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.
Dessa forma simplesmente não funciona. Não consigo usar component set com essas propriedades novas que ajudam tanto.
Minha 2ª tentativa
- Criei o componente base conforme 1ª tentativa.
- Ainda no componente base, inseri as propriedades do tipo boolean para a caixa de texto "CHAMADA".
- 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)
- Entrando uma camada à dentro. (notar que agora a propriedade chamada aparece)
Como fazer isso funcionar?
Vou colocar o passo a passo que eu fiz para dar parcialmente certo. (não tem o componente base)
- Criei um componente normalmente.
- Criei as variáveis booleanas para as caixas de texto "CHAMADA" e "Descrição".
- 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)
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?