Tutorial de como criar um carrossel de imagens interativo no Figma
HTML-код
- Опубликовано: 7 июл 2024
- Acesse já o meu curso de FIGMA: cursodefigma.com/
Olá pessoal! Hoje vou ensinar a como criar um carrossel de imagens interativo no Figma! Irei mostrar 2 formas de fazer, uma mais simples usando as ferramentas automaticas do próprio Figma, e outra mais complexa usando outros elementos de prototipação avançado.
Para facilitar seu estudo, segue o tempo de cada parte do tutorial:
00:00 Introdução
01:17 O que vamos fazer?
01:29 Criando um Artboard ("A" no teclado)
02:27 Criando um Layout Grid
03:15 Criando um carrossel simples (Horizontal Scrolling)
03:50 Usando o Plugin do Unsplash no Figma
04:19 Habilitando o Horizontal Scrolling no protótipo
05:43 Criando um carrossel avançado com o (on drag)
06:30 Usando o atalho de abrir o último plugin utilizado
07:01 Preparando o frame para o protótipo
08:49 Escondendo o conteúdo (Clip Content) & o layout grid (ctrl+shift+4)
09:36 Criando as interações entre as telas no protótipo (on drag)
11:40 Testando o protótipo!
12:05 Criando os elementos de paginação
13:47 Conclusão
Para mais conteúdo de Figma, UI & UX, Tecnologia e muito mais, é só seguir a minha conta no instagram:
/ feuxdesign
#figma #tutorial #curso #carrossel #primeirospassos #iniciante
Acesse já o meu curso de FIGMA: cursodefigma.com/
Muito bom, poderia mostrar também como fazer para quando deslizar as imagens de baixo, as imagens do scroll de cima que se movidas, possam permanecer no mesmo estado ao transitar para outra tela, sem serem resetadas.
Oi! Foi minha primeira vez usando o Figma e consegui fazer tudo tranquilamente! Achei o tutorial super didático e a duração ideal. Muito proveitoso! Obrigada!
Simplesmente sensacional!
Xonei... no conteúdo e em vc (com todo respeito kkkkkkkk) muito obrigado to começando agora no figma e seu canal é minha referencia! obrigado !
Conteúdo muito bom, rápido e didático!!!
Que vídeo sensacional mano! Que produção foooda!
Entrei achando q ia so aprender a fazer um carrosel ,sai com um monte de coisa nova, MELHOR VÍDEO EVER !!!!!
Muito bom! Obrigada por compartilhar esse conteúdo.
Tutorial bem feito, obrigado por compartilhar Felipe!
Que conteúdo fantástico!
Show!!!
Monstro demais!!!!
Muito bom, didático e direto! Valeu
MARAVILHA!!!
conteúdo TOP , parabéns !!!
Genial! Ensina muito bem, obrigada pela ótima didática!
Muito bom, valeu! 🤘🏻
Ótimo vídeo irmão, parabéns! E obrigado pelo conteúdo
Show Felipe...valeu por compartilhar...ansioso pelos próximos.
Opa! essa semana já teremos mais 1!
Maravilhoso vídeo, adorei! 👏👏👏👏
Caraca, que show de bola.....muito bom !!!!!!
Ótimo vídeo, parabéns !
Simplesmente sensacional, a didática do Felipe é incrivel! Parabéns
Fantástico mano!
Caramba! Sensacional! Era o tipo de conteúdo que eu tava procurando. Muito Obrigada!
Sensacional irmao, tu éh brabo.
Conteúdo brabo !!!! vlw muito.
Amei tua aula e as cores do vídeo!!!!!
Incrível como sempre Felipe!
Opa! Muito obrigado!
Muito bom, sigo no insta e você tem um conteúdo muito bom
Didática SUPER!
Muito bom! Direto ao ponto e claro na explicação/demonstração. Parabéns e obrigado! haha
simples e didático... Obg
👏🏻👏🏻👏🏻👏🏻 pelo vídeo!
que aula maravilhosaaa, continue assim sua didática pra ensino é boa dms
Uau, muuito bom! Gostei!
EU AMEI!
Adorei sua didática, obrigada por compartilhar
Gostei muito top
Muito massa cara, obrigada viu pelas informações
Que qualidade foda do vídeo. Gostei muito Feux, mesmo trabalhando já e manjando de algumas coisas, adoro ver essas coisas e vídeos. Traz mais vídeos de interações entre telasssss
Parabéns, ótimo video! muito bem explicado
Aprendi que só mano parabéns
Completo d+ ✊🏾👏🏾👏🏾
fera demaaais
Aí me salvou d+, serei eternamente grato
Show de Bola, Parabens! Obrigado pela Aula
Vídeo Top! Obrigado por compartilhar conhecimento, estou aprendendo muito!
nossa, amei seu vídeo! Simples e direto! Ganhou uma nova inscrita hehe por favor continue postando seus conteúdos!
Que conteúdo excpecional!
Parabéns, +1 inscrito.
Perfeito
Caraca, bicho. Muito top. Parabéns! Ajudou demais
Muito bom, tô começando em UX e seus vídeos me ajudam demais, você tem clareza e didática
Incrível
muito bacana parabéns eu adorei.
cada vídeo desse que eu vejo e aprendo, mais apaixonado eu fico pelo figma
Que aulão!
Você é extremamente didático! Parabéns, já ganhou uma nova seguidora
Gratidão☺
Ainda bem que você existe! 😮 agora vou ver todos os videos!
cara, seu conteúdo é muito bom, tem me ajudado bastante com a criação das artes da minha marca.
Aulas
não era isso que eu tava procurando, mas caí de paraquedas nesse vídeo. Muito bom! explicação show!
muito top meu mano ajudou demais
Me ajudou demais!
Aula excelnte, muito boa tua didática, amigo :)
Que qualidade de vídeo sensacional!!! Confesso que tem um bom tempo que não me supreendo pela qualidade de um vídeo, ainda mais tutorial. Música de background perfeita, explicação super detalhada, boa oratória e me amarrei nesse efeito borda da facecam. Me inscrevi e ativei o sininho.
Você ensina com uma leveza surreal 👏 Obrigada!
parabéns pelo conteúdo
Muito bom!
😊Valeu!
Top demais isso.
muito braba a aula
Acertou na mosca o que eu estava precisando. Obrigado!
Geniallllll arrasouuuu 👏👏👏👏
Top demais! Ganhou mais um inscrito! Vc realmente sabe como explicar Felipe. Sucesso pra vc meu caro... e esperamos mais tutoriais como este. Valeu!
Gracias amigo! This is what I needed much love from Nairobi.
Parabéns!! Me ajudou, vou acompanhar seu canal, estou muito grato...
Caraca Fe! Aprendi não só os carrosseis, mas um montão de outras coisas nesse vídeo. Obrigadão por compartilhar! (Marquinho do UX da Questão aqui)
Muito bommm tirou muitas dúvidas que eu tinha com animação ai no figma, mais fácil do que no XD.
muito bom!!
Gostando muito do conteúdo
que bacana Felipe, vai ser muito boa essa série. ❤️❤️❤️
Valeu mesmo!
Muito bom. Gostei.
Muito bomm!
Moço ficou perfeito, aprendi um monte de coisa num vídeo só, continua pelo amor de Deus
vc e um monstro kkkk namoral !!! toppp
SALVOU MEU TCC ❤️ obrigada, vídeo e didática perfeita! 🙏
Parabéns pela aula, nossa eu adorei de verdade, consegui reproduzir tudo, e ficou muito boa a explicação.
Você é o melhor professor de figma que existe muito obrigado por sempre estar ajudando
Já cheguei na voadora no like! Salvou demais chavoso!!! Tmj. Obrigado.
muito louco mano o figma
Cara, você foi o primeiro tutorial que eu vi e consegui reproduzir! Muito bom mesmo. Ganhou um inscrito.
Muito bom
muito top! 👏👏
tinha que ter como dar mais de 1 like, vídeo FODA!!!
Caralho, meu amigo! Que vídeo bem produzido, parabéns pela produção cara, dá vontade de ficar horas e horas assistindo.
Muito bom! 😄
Ótimo vídeo, já vou me inscrever no canal
Sensacional...só nesse video já aprendi varios atalhos..
Parabens pelo conteudo
obrigado pela ajuda