Create a Dropdown [interactive] - Figma micro interaction Prototype

[@lednard]

ótimo video, daqueles que vão ganhar muitos views daqui há uns anos quando a ferramenta e a área estiver mais aquecida.

[@FlambDesign]

Que sua profecia seja feita! haha Brincadeiras a parte, fico feliz que gostou do vídeo. Muito obrigado pelo suporte Led Ferreira. Abraço!

[@kleysonrenatodossantos6939]

Ótimo video!! me ensinou muito bem

[@FlambDesign]

Que bom que te ajudou Kelyson! Muito obrigado! 🔥🙌🏻

[@deboralourenco4637]

Adoro seus vídeos, um jeito super simples de ensinar e olha que vi várias formas de fazer esses Dropdowns. Parabéns!!!!

[@FlambDesign]

Que legal saber disso Debora. Muito obrigado pelas palavras. 😊🔥🔥

[@lucasfernandes2613]

valeuuuuuuu Flávio ! Me salvouuu +1 vez

[@FlambDesign]

Bora praticar! Valeu Lucas. 💪🏼🔥

[@kayopinheiro2780]

Muito obrigado, ajudou bastante

[@FlambDesign]

Fico feliz que ajudou Kayo! Muito obrigado. 👏🏻🔥

[@estermascarenhas4109]

Parabéns meu caro, muito bacana

[@FlambDesign]

Obrigado Ester! 🙌🏻🔥

[@nathansouza8993]

Obrigado, super útil e deu certo por aqui hehe :)

[@FlambDesign]

Maravilha Nathan! É isso ai, só praticando a gente fixa o conteúdo. Obrigado! 🙌🏻🔥

[@137Pena]

Show! Muito bom!

[@FlambDesign]

Que bom que gostou. Obrigado sempre pela força Fernando!

[@EduardoOliveira-ed4zc]

se puder dar uma dica, quando vc utilizar teclas de atalho por favor fale quais teclas são, pq vc juntou tudo e depois fez componente tudo por teclas e nao falou quais são

[@FlambDesign]

Obrigado pelo feedback Eduardo. Vou me atentar a isso, é que as vezes sai automático, hehe. Indico também dar uma olhada neste vídeo, nele mostro os atalhos que mais uso: kzbin.info/www/bejne/gGrSnYdrbbp3gs0 Mesmo assim, vou tentar melhorar isso. Obrigado!👍

[@FlambDesign]

Obs: escolhi a palavra “size” para o botão ficar menor, mas pensando agora poderia ter utilizado “Tam.” Enfim, o importante é a lógica! 😅

[@ricardinhoakj6176]

vlw

[@FlambDesign]

Tamo junto! 🙌🏼🔥

[@geovanesilva8396]

Mostra como vc criou tudo dês do início

[@FlambDesign]

Fala Geovane. A interface eu peguei da Comunidade do Figma, só pra ilustrar. Foquei mais na interação, para o tutorial não ficar tão longo. Mas valeu o feedback, posso pensar em fazer tutoriais mais detalhados e passo a passo. Obrigado Geovane.

[@vfx.elicoelho]

Tks

[@FlambDesign]

Valeu Eli! 🙌🏻

[@mateusbistene]

muito bom, cara! não testei ainda, mas será que tem como criar outra interação, tipo, quando vc escolhe uma das opções (p,m,g), aparece outra caixa, para escolher, por ex, o modelo da roupa? a cada uma das opões (p,m,g) haveria uma segunda box com opçoes exclusivas para cada?

[@FlambDesign]

Muito obrigado Mateus! Daria pra fazer sim, só que vai aumentando a complexidade da interação. Além da letra/tamanho daria pra ter mais um elemento, ex: quando P aparece um card/box com info. E assim por diante. 👍🏼

[@mateusbistene]

tava fazendo alguns testes aqui e as vezes o componente com interação de hover não some quando eu vou pra variante seguinte ao clicar nele, o componente permace aparecendo mesmo na variante em que ele está com o "olhinho" da layer fechado. é como se o P, M ou G do vídeo continuassem ativos mesmo depois de recolher o dropdown. alguma ideia do porquê isso pode estar acontecendo? curioso é que essa "pala" so acontece quando eu faço o hover com o mouse em cima deles, se eu abrir e fechar o dropdown sem interagir com eles funciona de boa.

[@brendalelis4475]

Mesmo problema por aqui

[@tulio_rocha]

Incrível! Você me ajudou dmais. Muito obrigado.

[@FlambDesign]

Fico feliz que ajudou! Obrigado Túlio!