Comunicação entre elementos por variáveis

Olá! O FFIT Laum conta com uma nova atualização que vai deixar seus protótipos ainda mais poderosos! Desenvolvemos uma comunicação entre os textfield, um de nossos componentes primitivos, e os micro front-ends, além de textos no Figma. Isso acontece devido ao compartilhamento de variáveis, ou seja, podemos guardar valores de um componente em uma variável e passar em outro componente. Vamos ver na prática!

Os componentes primitivos textfield foram atualizados para receber um parâmetro Value na biblioteca de componentes FFIT UI na versão v1.1.7. Você pode procurar na comunidade do Figma por “FFIT UI [v1.1.7]”.

Comunicação entre componentes primitivos textfield.

Selecione um textfield e, na coluna direita do Figma, informe um valor que esse campo receberá na propriedade Value.

-- para criar uma variável use o prefixo ## (exemplo: ##name). Caso queira passar um valor inicial, é só colocar == após a variável (exemplo:##name==Joseph).

-- passe uma variável criada em outro input sem atribuir outro valor com == na propriedade Value, no protótipo exportado, o que for digitado em um input aparecerá no outro, pois compartilham da mesma variável.

Comunicação de textfield com textos no Figma

-- selecione o textfield e, na coluna direita do Figma crie uma variável, exemplo: um textfiled com ##cod==85 e outro com ##numero.

-- passando uma variável criada um texto no Figma, o protótipo exportado trocará a variável pelo valor informado após o usuário escrever no input que compartilha a variável.

Na comunicação de textfield com micro front-ends

- selecione o textfield e, na coluna direita do Figma crie uma variável, exemplo: ##email.

- Ao criar um MFE, abra a opção "Events (input)". No campo "Event name", informe o nome do evento de entrada que você deseja disparar no MFE assim que ele é inicializado (para mais informações sobre os eventos, acesse a documentação de detalhes do MFE, no caso vamos utilizar o login). No campo "Event code", informe o campo JSON contendo os elementos a serem inseridos no MFE, porém, ao informar os valores dos campos em questão, adicione entre aspas o nome da variável, precedido por ##, da mesma forma que é feito no campo Value. No protótipo exportado, ao iniciar ou atualizar a página, o valor presente na variável será enviado ao MFE pelo evento.

Na comunicação de entre micro front-ends

- Inicialmente é adicionamos dois MFEs em um frame, mas pode ser mais. Agora  agrupamos os MFE nomeando o grupo com a tag [select-options] e cada MFE deve ser renomeado colocando uma tag [option].

- Ao criar o MFE de origem da informação, abra a opção "Events (output)". No campo "Event name", informe o nome do evento que você deseja que o MFE dispare. No campo "Action type", escolha "Update Variable". No campo "Mfe Reload", adicione o MFE de destino selecionando o nome criado com as tags no passo anterior. Por fim, no campo "Event code" informe o objeto JSON contendo os elementos a serem obtidos do MFE. No valor do elemento do JSON, insira o nome do elemento que sai do MFE, de acordo com a estrutura do evento de saída do MFE, especificada na documentação do MFE. Por exemplo: {"##email": "identifier"}). 

- No MFE de destino da informação, abra a opção "Events (input)". No campo "Event name", informe o nome do evento de entrada que você deseja disparar no MFE assim que ele é inicializado ou atualizado consultando a documentação do MFE. No campo "Event code", informe o objeto JSON contendo os elementos a serem inseridos no MFE da mesma forma que é feito no campo Value do Figma (exemplo: { "identifier": "##email"}). Como esse MFE foi passado ao campo "Mfe Reload" no MFE de saída, o valor presente na variável será enviado ao MFE de destino pelo evento de entrada, assim que o evento de saída do MFE de origem for disparado.

Veja esse exemplo no vídeo a seguir.