Summary
Keywords
Full Transcript
🎯 Figma Dropdown Menu: Aprenda o Jeito Certo Usando Variáveis! 👉 CURSO DE FIGMA: https://www.youtube.com/watch?v=-wMGaO283Cw&list=PL2b2uvKR5s-Hx3byi3qZY_HhPPw9U0e6x 👉 INSCREVA-SE NO CANAL: https://www.youtube.com/@douglazarini Antes de mais nada, se você ainda está criando dropdowns no Figma de forma “preguiçosa”, cheia de conexões manuais e complicações desnecessárias, então este vídeo vai revolucionar sua maneira de prototipar! Aqui você aprende, de forma direta e prática, como criar um Figma Dropdown Menu funcional, inteligente e totalmente otimizado com o uso de variáveis do Figma. Sobretudo, você vai descobrir que é possível criar menus interativos sem precisar configurar dezenas de conexões. Ou seja, ao longo deste tutorial completo, será possível entender passo a passo como construir um dropdown de verdade, desde o botão até o menu suspenso — tudo de forma organizada, reutilizável e profissional. 👉 OUTROS VIDEOS RECOMENDADOS: https://youtu.be/YdRB4zTAzmo https://www.youtube.com/watch?v=lXm-tUfQZrg https://youtu.be/UKTE-04LxVc https://youtu.be/Z1gwNmZUCBM https://youtu.be/DuG7KVmfTjY https://youtu.be/TUZBkOzjjlU https://www.youtube.com/watch?v=Q-3xVA9GFD4 Primeiramente, vamos explorar como criar o botão dropdown com Auto Layout, aplicar ícones com plugins como Feather Icons, adicionar efeitos visuais sutis e transformar tudo em componentes com variantes. Em seguida, veremos como configurar o menu com múltiplos itens e estados interativos, e — acima de tudo — como conectar tudo com variáveis para um protótipo muito mais eficiente. Além disso, você aprenderá como criar variáveis de texto, de cor e até variáveis condicionais para destacar a seleção feita no menu. Ainda mais interessante, você verá como aplicar lógica de interação entre essas variáveis para deixar seu protótipo muito mais realista e funcional. E, por fim, como resultado de todo esse processo, você terá um componente completo, reutilizável e fácil de escalar. Definitivamente, você vai parar de perder tempo com gambiarras e começar a prototipar como um verdadeiro designer de produto! Pontos importantes do video 00:00 Introdução Dropdown no Figma 00:38 Não Faça Dropdown Assim 01:40 Dropdown Button no Figma 05:00 Menu Dropdown no Figma 09:17 Dropdown e Menu no Figma 14:25 Dropdown com Variáveis no Figma 17:46 Indicando as Variáveis 19:16 Adicionando Interações 21:10 Adicionando Condicionais 23:20 Indicar Item Selecionado 28:50 Dropdown Funcional no Figma 🔔 Então, se você curtiu o conteúdo, deixe seu like, inscreva-se no canal Doug Lazarini Design & Dinheiro, e compartilhe com a sua equipe de design. Afinal, todo mundo merece aprender a dominar o Figma Dropdown Menu de forma elegante! REDES SOCIAIS: 👉 Entre no canal do WhatsApp: https://whatsapp.com/channel/0029VabyET76RGJFHdkLIr3Q 👉 Entre no canal do Telegram: https://t.me/douglazarini É isso aí, um abraço! 🚀 Doug Lazarini Designer
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
