--- title: Comunicação entre elementos por variáveis description: Deixe seus protótipos ainda mais fieis na interação com o compartilhamento de variáveis entre componentes textfield, micro front-ends e texto no Figma. image: https://ffit.com.br/hubfs/Imagem%20de%20demonstra%C3%A7%C3%A3o%20de%20comunica%C3%A7%C3%A3o%20por%20vari%C3%A1veis.png --- [![Logo FFIT Serviços de Inovação e Tecnologia](https://ffit.com.br/hubfs/Imported%20images/Logo-FFIT-Servicos-de-Inovacao-e-Tecnologia.png)](https://ffit.com.br?hsLang=pt-br) - [HOME](https://ffit.com.br?hsLang=pt-br) - [PRODUTOS](https://ffit.com.br/pt-br/produtos-e-servicos?hsLang=pt-br) - [BLOG](https://ffit.com.br/pt-br/blog) - [CONTATO](https://ffit.com.br/pt-br/contato?hsLang=pt-br) Laum # Comunicação entre elementos por variáveis Deixe seus protótipos ainda mais fieis na interação com o compartilhamento de variáveis entre componentes textfield, micro front-ends e texto no Figma. [Breno Morais](https://ffit.com.br/pt-br/blog/author/breno-morais) out 25, 2023 --- 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. [Laum](https://ffit.com.br/pt-br/blog/tag/laum) [Acessibilidade](https://ffit.com.br/pt-br/blog/tag/acessibilidade) [IHC](https://ffit.com.br/pt-br/blog/tag/ihc) [Saúde](https://ffit.com.br/pt-br/blog/tag/saúde) [TecnologiaInclusiva](https://ffit.com.br/pt-br/blog/tag/tecnologiainclusiva) ## Similar posts Laum ### [Prototipando com FFIT LAUM](https://ffit.com.br/pt-br/blog/prototipando-com-ffit-laum?hsLang=pt-br) Aprenda sobre prototipagem com o sistema demonstrativo Doctor Shares e descubra como utilizar MFEs no Figma. Explore as possibilidades com o FFIT... Breno Morais jun 23, 2023 Laum ### [Prototipagem com Figma e Laum: aulas 3 e 4](https://ffit.com.br/pt-br/blog/prototipagem-com-figma-e-laum-aulas-3-e-4?hsLang=pt-br) A relevância do Laum na aceitação do produto através de avaliação de experiência do usuário e funcionalidades que intensificam a fidelidade dos... Breno Morais dez 22, 2023 Laum ### [LAUM - Library of Accessible and Usable Micro Frontends](https://ffit.com.br/pt-br/blog/laum-library-of-accessible-and-usable-micro-frontends?hsLang=pt-br) Laum é uma abordagem de trabalho focada na reutilização de componentes de interação na forma de micro front-ends com alta usabilidade e acessibilidade Fran Oliveira nov 18, 2022 ### Seja notificado sobre novos insights de computação Seja o primeiro a saber sobre novos insights de computação para construir ou refinar sua função de engenharia de software com as ferramentas e o conhecimento da indústria atual. ![FFIT=branco](https://ffit.com.br/hubfs/FFIT=branco.png) Rua Barbosa de Freitas, 1741 ALDEOTA FORTALEZA - CE 60170-021 ### Produtos - [Laum](https://ffit.com.br/pt-br/laum?hsLang=pt-br) - [Squads](https://ffit.com.br/squads?hsLang=pt-br) ### Páginas - [Blog](https://ffit.com.br/pt-br/blog) - [LinkedIn](https://www.linkedin.com/company/ffittecnologia/) - [Instagram](https://www.instagram.com/ffit_tecnologia/) © 2024 FFITAll rights reserved [Powered by Atlas - a B2B SaaS HubSpot theme](https://www.kalungi.com/atlas-hubspot-theme-for-b2b-saas-software) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Breno Morais", "url" : "https://ffit.com.br/pt-br/blog/author/breno-morais" }, "dateModified" : "2023-10-25T20:21:52.646Z", "datePublished" : "2023-10-25T20:21:52.000Z", "headline" : "Comunicação entre elementos por variáveis", "image" : [ "https://ffit.com.br/hubfs/Imagem%20de%20demonstra%C3%A7%C3%A3o%20de%20comunica%C3%A7%C3%A3o%20por%20vari%C3%A1veis.png" ], "mainEntityOfPage" : { "@id" : "https://ffit.com.br/pt-br/blog/comunicacao-entre-elementos-por-variaveis", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://ffit.com.br/hubfs/Imported%20images/60392e7435c4998b12954735_Logo-FFIT-copiar.png" }, "name" : "FFIT" } } ```