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/...