Floating Action Button - Dia 02 | 100 Dias Prototipando no Figma

Começando mais um Prototipando no Figma e no vídeo de hoje vamos aprender a criar e animar um botão de ação flutuante no Figma. O FAB é um botão de ação flutuante que representa a ação mais importante em uma tela. No entanto, as pessoas precisam entender o ícone para compreender o que a ação fará ou não. Uma das diretrizes do seu comportamento é que ele apareça na frente de todo o conteúdo da tela, geralmente como uma forma circular com um ícone no centro (M2: https://m2.material.io/components/but...) ou em forma quadrada com cantos arredondados como disponibilizado na nova versão (M3: https://m3.material.io/components/flo.... Esse desafio nasceu como um projeto pessoal, que tinha como objetivo aprender, treinar e aprimorar técnicas de animações e interações de interface que eu já aplico no meu dia a dia. Quer fazer parte, entre no grupo do Telegram: https://t.me/prototipandonofigma Quer enviar uma sugestão de componente ou design https://forms.gle/d7dZ8ACvpsaFuck59 ---------- Capítulos 00:00 Intro 00:16 Diretrizes e comportamento do botão 00:29 Vamos começar 00:32 Ícones e referências de cor 00:52 Criando uma elipse/círculo 01:25 Adicionando o Drop Shadow 02:26 Montando os botões 04:03 Transformando o botão em frame 04:59 Editando o botão de ação 05:33 Transformando o botão em componente 06:13 Criando as variantes do botão 08:08 Animando o botão 08:50 Aplicando o botão 10:15 Resultado 10:28 Criando opacidade 11:54 Resultado final 12:18 Fechamento e considerações finais ---------- Como participar? Acesse o grupo do Telegram para ter acesso ao template do Notion (Atualizado a cada novo tema) Replique o tutorial no seu Figma, seguindo as instruções do vídeo ou do template do Notion Compartilhe o resultado nas suas redes sociais com a hashtag #100DiasPrototipandoNoFigma e me marque no post @souvgomes (@ válido para Instagram, Twitter e Linkedin) ---------- Redes Sociais Telegram https://t.me/prototipandonofigma Instagram   / souvgomes   Twitter   / souvgomes   Linkedin   / souvgomes   ---------- #100DiasPrototipandoNoFigma #Figma #FigmaTips #2023 ---------- First Snow de Purrple Cat | https://purrplecat.com Música promovida por https://www.free-stock-music.com Creative Commons Attribution-ShareAlike 3.0 Unported https://creativecommons.org/licenses/...