olá, obrigada por nos ensinar, seus vídeos me ajudam muito!! Eu gostaria de saber se tem como "digitar" no protótipo (após clicar no login, aparecer o e-mail sendo digitado, obrigada!
@@karenssss Muito obrigado Karen! Fico feliz que os videos estão te ajudando 😊🙌🏻. Olha, simular digitando teria que aplicar uma variant para cada letra, acho inviável (talvez alguém tenha criado um plugin pra isso, desconheço). Uma solução mais fácil seria criar mais uma variant com “texto email” escrito. Não simularia digitando, mas ao menos teria um prototipo com visual do formulário preenchido. Acho que isso já é suficiente para um protótipo. Hoje vejo que eu deveria ter acrescentado esta parte no video, hehe. Espero ter ajudado.
@@filipesantos3733 Sim ajuda muito Felipe. Sempre uso nos meus projetos. Sempre que preciso alterar algo no projeto todo, eu vou na pag. Componentes e edito o componente “mestre”. Alterando todo o projeto. Obrigado pela dica, vou pensar em um vídeo com esse tipo de sugestão. Abraço! 🙌🏻
Eu tenho uma sugestão! Estou amando a forma direta como você ensina coisas diferentes!! Quero saber como usar o figma sem ter problemas com os números quebrados (200.86 ou 319.97) De alguma forma mesmo eu copiando e colando com as dimensões exatas elas sempre acabam ficando zuadas. Já me recomendaram a extensão Pixel Perfect, mas não impede que esses números aconteçam, me da uma força com isso se não vou ficar LOUCAAA.
ESSE VIDEO ACABOU DE SOLUCIONAR UM PROBLEMA GIGANTE QUE EU ESTOU TENDO EM UM PROJETO. BRIGADO FLÁVIO!!!!!!!! Eu tinha pensado no mouse leaving, mas n fazia sentido na minha cabeça, mas pensando em app, n tem mouse, entao sim, qnd eu clico fora, a ação que o figma entende é de mouse leaving, OBRIGADO CARA!!!!!!!!!
O Figma lançou o Variable a pouco tempo. COm ele é possível. Porém é uma complexidade que na minha visão não compensa. Deste jeito que fiz, já cumpre a função de demostrar as interações.
Muito obrigado Eduardo. Boa pergunta! Você precisa “desfazer” o componente. Clica com direito no seu componente: vá em Detach Instance (Crtl+Alt+B). Agora de roxo ele ficou azul, ou seja, se vc clicar com direito novamente vai aparecer a opção Ungroup. Dificil explicar por aqui, mas espero que consiga.
Nota: esta opção não aparece se seu componente estiver dentro de uma variante. O motivo deve ser porque a variante não deve aceitar um elemento “não componente”.
Eu amei aprender essa interação, acho que faz sim diferença ao mostrar algo mais "real" para o cliente ou quem for testar num teste de usabilidade. A unica coisa que adicionei foi a mesma smart animate do começo, na ultima variante ao retornar para o default não fica algo tão seco
Exatamente Débora! Com o protótipo a conversa fica mais fluída e clara, até pra passar pros Devs facilita a conversa. Que legal que você deu um upgrade na interação, esse é o objetivo! 👏🏻👏🏻🔥🔥
Uma coisa que sinto muita falta no Figma é a possibilidade de permitir interações entre objetos diferentes. Nesse seu ótimo tutorial, seria como se o comando de on tap no segundo input também mandasse o primeiro input assumir uma variante específica. Algo como o Axure faz com painéis (sou antigo rs). Mas excelente tutorial, Flávio! Obrigado por compartilhar!
Sim! Compartilho a mesma dor que você André. Eu trnho esperança que logo teremos essa interação entre componentes, chega de gambiarra, hahaha. Obrigado pelo feedback André! 🙌🏻🔥🔥🔥
Olá! Acompanhando agora os vídeos. Parabésns, são excelentes! Você, por acaso, tem algum vídeo explicando como, por exemplo, fazer uma media de notas ou outras funções que precisem de soma, multiplicação etc? É possível mesclar o resultado com textos, como o da média de notas, e aparecer ao final o texto: Sua média é x. Desde já agradeço.
Olá Julia. Geraria um numero de variants e complexidade que ao meu ver não valeria o esforço. O que daria pra fazer era criar mais uma variant simulando o texto já escrito, só pra ter uma referencia visual.
Verdade! Eu poderia ter feito uma variant a mais, simulando o formulário preenchido. Ai acrescentaria uma interação “on tap” e ativaria esse form preenchido. Boa dica Paulo.
Olá, fiz essa interação que você ensinou ano passado, tentei fazer agora, porém o cursor fica piscando muito rápido, não consegui resolver, não sei se a versão do figma mudou alguns recursos recentemente.
Fala Ronaldo! Bem, se está funcionando já é um bom sinal. Eu acredito que é só vc ajustar o tempo da interação, aumente bastante o valor pra vc perceber se encontrou o problema, depois vai ajustando aos poucos.😉🔥
Oi não sei fiz fiz algo errado mas só da certo no protótipo no computador, quando entramos via link pra testar no smartphone a interação continua eterna sabe, ela não para 😅
Oi Manu! Dei risada com o “continua eterna” 😅 Então, vc está certa. Quando estamos no Smartphone o “mouse leave” não acontece, porque nesse caso são os dedos. Minha sugestão é usar o “after delay”, deixa um tempinho suficiente para apresentar o protótipo. Depois me conta se funcionou! 🙌🏻
No meu não aparece o change to, isso é algum recurso do beta? Como faço pra usar isso se não aparece? Eu to com um projeto aqui bem apertado na deadline me ajudaria muito.
Me desculpe, não tinha visto sua mensagem. Teria como você mandar um print ou lago parecido pra eu avaliar? A princípio o "change to" só vai habilitar de os elementos linkados forem o "mesmo". Ou seja, eles tem que ter os mesmos elementos. Difícil explicar por texto, vou compartilhar um vídeo que falo um pouco disso. Só um momento...
![Create a Dropdown [interactive] - Figma micro interaction Prototype](http://i.ytimg.com/vi/KAVCUKgIS_Q/mqdefault.jpg)
![Create a Dropdown [interactive] - Figma micro interaction Prototype](/img/tr.png)
![ILLSLICK X YOUNGOHM - We're The same [Official Video]](http://i.ytimg.com/vi/yUJNkobYR0E/mqdefault.jpg)
E você? teria alguma sugestão de tutorial? Deixa sua sugestão aqui.
olá, obrigada por nos ensinar, seus vídeos me ajudam muito!! Eu gostaria de saber se tem como "digitar" no protótipo (após clicar no login, aparecer o e-mail sendo digitado, obrigada!
@@karenssss Muito obrigado Karen! Fico feliz que os videos estão te ajudando 😊🙌🏻.
Olha, simular digitando teria que aplicar uma variant para cada letra, acho inviável (talvez alguém tenha criado um plugin pra isso, desconheço).
Uma solução mais fácil seria criar mais uma variant com “texto email” escrito. Não simularia digitando, mas ao menos teria um prototipo com visual do formulário preenchido. Acho que isso já é suficiente para um protótipo.
Hoje vejo que eu deveria ter acrescentado esta parte no video, hehe.
Espero ter ajudado.
Cara achei super interessante essa ideia de uma área separada de componentes! Poderia fazer situações ou ideias para facilitar a criação de projetos?
@@filipesantos3733 Sim ajuda muito Felipe. Sempre uso nos meus projetos.
Sempre que preciso alterar algo no projeto todo, eu vou na pag. Componentes e edito o componente “mestre”. Alterando todo o projeto.
Obrigado pela dica, vou pensar em um vídeo com esse tipo de sugestão.
Abraço! 🙌🏻
Eu tenho uma sugestão! Estou amando a forma direta como você ensina coisas diferentes!!
Quero saber como usar o figma sem ter problemas com os números quebrados (200.86 ou 319.97)
De alguma forma mesmo eu copiando e colando com as dimensões exatas elas sempre acabam ficando zuadas. Já me recomendaram a extensão Pixel Perfect, mas não impede que esses números aconteçam, me da uma força com isso se não vou ficar LOUCAAA.
que show!!
Obrigado Elisabeth! 🥰
Top! Top! Top!
Que bom que gostou Marcelo! Muito obrigado! 🙌🏻🔥
Top demais.
Valeu Roberto!🙌
Bom dia! Gostei vou aplicar agora rsrsrs
Boa! Só aplicando e testando que a gente realmente absorve o conhecimento. Tenha um bom dia! 🙂
Vlw. Mt dahora. Parabéns
Muito obrigado brother! Que bom que gostou! Abraço
Genial, já imaginei inúmeras possibilidades somente com as aplicações pra diversos outros tipos de componentes!
Muito obrigado!
É isso ai Pedro! O negócio é entender a lógica pra aplicar em outras situações. Valeu! 🙌🏻🔥
Valeu Flávio muito boa a explicação. Abraço!
Obrigado pela dica Fernando e por gostar do tutorial. Abraço! 🙌🏻🤛🏼
Gostei demais!!
Muito obrigado! 🙂
Aula TOP
Obrigado pelo suporte Washington! 🙌🏻
Conteúdo ótimo, você é o melhor!
Muito obrigado Gabriel! 🙂🔥
mano. curti a didática, ganhou um inscrito!!! parabéns!
Fico feliz que tenha gostado! Muito obrigado Leonardo! 🙌🏻
Fantástico conteúdo
Fico muito feliz de ouvir isso! Muito obrigado Anderson! 🙂🙌🏻
ESSE VIDEO ACABOU DE SOLUCIONAR UM PROBLEMA GIGANTE QUE EU ESTOU TENDO EM UM PROJETO. BRIGADO FLÁVIO!!!!!!!! Eu tinha pensado no mouse leaving, mas n fazia sentido na minha cabeça, mas pensando em app, n tem mouse, entao sim, qnd eu clico fora, a ação que o figma entende é de mouse leaving, OBRIGADO CARA!!!!!!!!!
Que maravilha Gabriel! Fico feliz que resolveu seu problema. 🙌🏻
Obrigado pelo feedback. 🙂
Show. É possivel permitir digitar (texto livre)?
O Figma lançou o Variable a pouco tempo. COm ele é possível. Porém é uma complexidade que na minha visão não compensa. Deste jeito que fiz, já cumpre a função de demostrar as interações.
@@FlambDesign Consegui fazer conforme seu tutorial. Ficou bacana! 👍🏻
@@WagnerGouveia Maravilha! Curto quando praticam o tutorial, ainda é o melhor jeito de aprender. Parabéns pela dedicação. 🙌🏻🔥
Como desagrupar componentes no figma? Video bem legal!
Muito obrigado Eduardo. Boa pergunta! Você precisa “desfazer” o componente. Clica com direito no seu componente: vá em Detach Instance (Crtl+Alt+B). Agora de roxo ele ficou azul, ou seja, se vc clicar com direito novamente vai aparecer a opção Ungroup. Dificil explicar por aqui, mas espero que consiga.
Nota: esta opção não aparece se seu componente estiver dentro de uma variante. O motivo deve ser porque a variante não deve aceitar um elemento “não componente”.
Eu amei aprender essa interação, acho que faz sim diferença ao mostrar algo mais "real" para o cliente ou quem for testar num teste de usabilidade. A unica coisa que adicionei foi a mesma smart animate do começo, na ultima variante ao retornar para o default não fica algo tão seco
Exatamente Débora! Com o protótipo a conversa fica mais fluída e clara, até pra passar pros Devs facilita a conversa.
Que legal que você deu um upgrade na interação, esse é o objetivo! 👏🏻👏🏻🔥🔥
Gosteii, só faltou adicionar O texto input
mt bom!
só fiquei com uma duvida, como faço para ele "escrever" de fato, ou Mostar o teclado no celular?
Up
Uma coisa que sinto muita falta no Figma é a possibilidade de permitir interações entre objetos diferentes. Nesse seu ótimo tutorial, seria como se o comando de on tap no segundo input também mandasse o primeiro input assumir uma variante específica. Algo como o Axure faz com painéis (sou antigo rs). Mas excelente tutorial, Flávio! Obrigado por compartilhar!
Sim! Compartilho a mesma dor que você André. Eu trnho esperança que logo teremos essa interação entre componentes, chega de gambiarra, hahaha.
Obrigado pelo feedback André! 🙌🏻🔥🔥🔥
eu gostaria de saber onde se localiza essa text bar.
Olá! Acompanhando agora os vídeos. Parabésns, são excelentes! Você, por acaso,
tem algum vídeo explicando como, por exemplo, fazer uma media de notas ou outras funções que precisem de soma, multiplicação etc? É possível mesclar o resultado com textos, como o da média de notas, e aparecer ao final o texto: Sua média é x. Desde já agradeço.
como eu coloco o texto no meio exato do retângulo? de forma automática
Como faço pra escrever dentro deles?
Olá Julia.
Geraria um numero de variants e complexidade que ao meu ver não valeria o esforço. O que daria pra fazer era criar mais uma variant simulando o texto já escrito, só pra ter uma referencia visual.
@@FlambDesign entendi, muito obrigada.
Um outro tutorial seria simular a escrita do texto no campo
Verdade! Eu poderia ter feito uma variant a mais, simulando o formulário preenchido. Ai acrescentaria uma interação “on tap” e ativaria esse form preenchido. Boa dica Paulo.
Olá, fiz essa interação que você ensinou ano passado, tentei fazer agora, porém o cursor fica piscando muito rápido, não consegui resolver, não sei se a versão do figma mudou alguns recursos recentemente.
Fala Ronaldo! Bem, se está funcionando já é um bom sinal. Eu acredito que é só vc ajustar o tempo da interação, aumente bastante o valor pra vc perceber se encontrou o problema, depois vai ajustando aos poucos.😉🔥
Oi não sei fiz fiz algo errado mas só da certo no protótipo no computador, quando entramos via link pra testar no smartphone a interação continua eterna sabe, ela não para 😅
Oi Manu! Dei risada com o “continua eterna” 😅
Então, vc está certa. Quando estamos no Smartphone o “mouse leave” não acontece, porque nesse caso são os dedos. Minha sugestão é usar o “after delay”, deixa um tempinho suficiente para apresentar o protótipo.
Depois me conta se funcionou! 🙌🏻
@@FlambDesign Obrigada pela atenção, deu certo sim! 😄
@@manub. 🙌🏻
No meu não aparece o change to, isso é algum recurso do beta? Como faço pra usar isso se não aparece? Eu to com um projeto aqui bem apertado na deadline me ajudaria muito.
Me desculpe, não tinha visto sua mensagem. Teria como você mandar um print ou lago parecido pra eu avaliar? A princípio o "change to" só vai habilitar de os elementos linkados forem o "mesmo". Ou seja, eles tem que ter os mesmos elementos. Difícil explicar por texto, vou compartilhar um vídeo que falo um pouco disso. Só um momento...
Este vídeo fala um pouco sobre esse problema, veja se ajuda: th-cam.com/video/IvsF1yQgWEw/w-d-xo.html
can we type anything on it??
Not actually. It would take too much variants. The prototype just emulate this action, enough to show to the client/developer. Thanks 🙌🏻🔥