Criando 4 Tipos de Interações / Animações no Figma
HTML-код
- Опубликовано: 7 июн 2024
- 🚀 Meu Ebook: andreyknabbenn.com/ebook?utm_...
Neste vídeo, eu ensino de maneira prática como criar 4 tipos diferentes de interações no Figma, são elas:
👉 Interação de toque e navegação (levar de uma tela para outra)
👉 Interação slider horizontal
👉 Interação de scroll para um elemento na mesma tela
👉 Interação de abrir modal inferior, com transição suave
Capítulos
00:00 Introdução / o que eu irei ensinar
1:45 Configurando o ambiente
2:50 Criando a primeira interação
4:15 Criando a segunda interação
8:20 Criando a terceira interação
9:43 Criando a quarta interação
12:24 Encerramento
Conheça também meu ebook com 150 páginas e 70 dicas exemplificadas para te ajudar a criar interfaces considerando as boas práticas ideais da área!
🚀andreyknabbenn.com/ebook?
Por mais vídeos como esse Andrey!! 🚀
Top!! Parabéns!!
Muito bom!
Ótimo conteúdo, valeu Andrey!!
Muito bom cara
ADOREI, só agradeço!!!
Vídeo muito útil 👏👏
Mandou muito!
conteúdo incrível pra nós iniciantes!
Nossa muito obrigada 😍
Muito bom, extremamente útil pra mim. Já acompanho seus conteúdos no instagram e fiquei feliz em achar o canal. Parabéns.
conteúdo excelente...gostei da sua didática..parabéns mano
Esse menino voa no figma!
Este software é animal! Valeuuuu
Nem começou mas sei que vindo do Andrei, é trampo bom!
top
Muito bom o conteúdo! É possível criar cenários de accordion, onde expande as informações da tela SEM criar uma tela variante e expandida? Obrigado.
Valeu valeu
Opa Andrey. Muito bom esse vídeo. Você tem ideia de como criar uma animação circular, por exemplo, eu tenho uma logo de uma empresa que aparecerá sozinha e centralizada na abertura. Ao clicar, nessa logo irão aparecer os menus ao redor dessa logo. Como são poucos menus, seria algo bem simples. Caso tenha algum exemplo, até na internet mesmo, eu ficaria grato. Parabéns mais uma vez.
Amei as dicas! Como eu consigo criar essa página mais longa pra poder deslizar mas ficar no tamanho da tela do celular?
Gostei do seu vídeo. Como estou começando agora só achei muito rápido se VC poder mostrar aonde clikar pra fazer as interações com um zoom, agradeço. Um abro
Aff cara que vídeo necessário serio. Eu queria saber como faz a gaveta modal de opções como por exemplo em um ecommerce, fechar e abrir opções.
Feliz que curtiu! Vou deixar como ideia pro próximo vídeo ;)
Opa, Andrey! Muito bom seu vídeo! Sem dúvida vai ser muito útil pra mim. Gostaria de aproveitar para verificar com você uma dúvida. Aqui no meu Figma, no momento em que eu diminuo a máscara (6:37 no seu vídeo), alguns elementos de dentro da minha composição acompanham o movimento. Como eu faço para ajustar isso?
Acontece o mesmo comigo
Quando não aparece o mais pra clicar e fazer a setinha ir ate a outra tela, o que pode ser? Tentei com quadrado, com foto e não deu!
como seria a aplicação prática dessa interação que vc fez? vc colocaria num site? criaria um link no insta e a pessoa caí nessa interação? bem didático. parabéns
Obgd pelo feedback! Então, sobre a aplicação ela seria feita dentro de um aplicativo mesmo, ela só faz sentido num app. Claro que daria pra implementar essas animações em sites ou algo do tipo, mas aí envolveria mais parte de programação, e não Figma. (não sei se respondi sua pergunta)
bacana demais, testei aqui e rolou! eu fiz um outro teste aqui, usando uma barra com vários botoes na horizontal, como se fossem tabs, ai quando clica neles, o conteudo é exibido abaixo. só que, quando eu scrolo essar barra de tabs toda pra direita e clico nos ultimos botoes (tabs), apesar do conteudo ser exibido corretamente abaixo, a barra reseta pra posição inicial, mesmo com a tab la do final selecionada. Eu usei a ferramenta de componentes e variantes pra fazer...que sera que posso fazer pra essa barra manter a posiçã ode scrolling dela? alguma ideia? vlw
Opa obrigado pelo feedback! Cara, se entendi certo, o que resolveria é marcar como "check" a opção "Preserve scroll position" na aba de "Interaction detais" (aquela aba que mostra os tipos de animações e etc...).
Muito bom! Eu só to tendo um problema na parte da transição do frame com scroll. Tipo, você mostrou em horizontal, mas o meu é vertical e acontece que o frame sobe, mas os textos que estão em cima fica tudo um em cima do outro. Será que você poderia me ajudar? Não encontrei forma de contato com você
Pode me enviar um vídeo no meu Instagram pra eu tentar ajudar?