Figma Drag Card Animation
Vložit
- čas přidán 1. 06. 2022
- Hi Family 👋 In this short tutorial, we gonna learn how to create a swipe carousel using Figma!
▽ TRY FIGMA FOR FREE 👉 psxid.figma.com/9d60eat0lfr6
▽ MY FAVORITE DESIGN TOOL 👉 psxid.figma.com/suue4ftvzr51-...
▽IMPORTANT TUTORIALS ▽
My Best Video 👉 • The History of Prototy...
Figma Auto Layout 👉 • Figma Auto Layout: Res...
Figma Components 👉 • Figma NEW Component Pr...
My top 5 Figma Plugins in 2022 👉 • My TOP 5 FIGMA Plugins...
▽ FOLLOW ME ▽
Instagram 👉 / galb.design
Website 👉 www.galbarzilay.com/
▽ FILM GEAR I USE ▽
Main Camera: Sony a7siii
Main Lens (A-Roll): Sony 20mm f1.8
Secondary Lens (B-Roll): Zeiss Batis 40mm f2.0
Drone: DJI Mini
Editing SW 👉 www.apple.com/final-cut-pro/
Key Light: Apture 100d
Microphone: Rode Video Mic Pro Plus
▽ MUSIC I USE IN MY VIDEOS ▽
👉 artlist.io
For sponsorship, product reviews, and collaboration, you can email me here: domino261@gmail.com
________________________________________
Some of the links in this description may be affiliate links that allow me to earn a small commission (at no extra cost to you!) and keep this channel going. Thanks for your support!
#uidesign #figma #figmatutorial
bro excuse my language but dam you are cold at Figma!!! wow, amazing teacher as well thanks for these tutorials they really help! Simplistic and very effective !!😎😎👍🏾
Well Matthew…. YOU JUST MADE MY DAY! Thank you 🙏
Thanks, Gal Bar. I appreciated your instruction.
THANK YOU SO MUCH, I REALLY APPRECIATE ALL OF THESE HELPFUL VIDEOS
This was majorly helpful! Thanks for saving me from pulling my hair out ❤🙌🏾
Awesome tut! well explained
Wow! What a quality of the video! Good job man :D
East peasy tutorial! Love it
Gal thank you SO much! You helped me tremendously with my experimental design app in Figma for my master thesis! Can't thank you enough. Please upload more useful tips on how to prototype using Figma! And your editing skills are of another planet. This tutorial was a JOY! Have a nice day :)
Oh wow 🤩 you made my day! Thank you for sharing. I promise more good stuff to come! You are welcome to check out todays video as well 😉
Heyiii thank you so much!!! Damn useful 🔥🫶🫶🫶
Love it. The explanations are easy to understand especially, for a beginner like me. ❤
Thank you !!
Thanks dude very helpful
Thank you so much!
Great video 🎉
Perfect 😍
Thank you so much bro
Thank you sooo much
Thanks a lot Guru 🤩
Hi how can you make something similiar but to go/drag around the same axis like a wheel (and you keep seeing the moving card behind but smaller)?
awesome 😀
Thank you a lot
Hi Gal, Please can you point mre to or make a video of a figma prototype of a component that changes state upon scrolling in the page
thank you
Best video 📸
תודה!
Thanks
Hi Gal. Lovely video!!! I am new to Figma, so I apologise if this question sounds stupid. How do you switch on all of the measuring and grid lines when you're in outline mode? Cheers.
Shift+R on your keyboard. Thank you for the kind words 😉
You're the reason why the dev team hate my guts haha!
😂😂😂
Hello Gal, what if the movie cards that you’ll like to swap this way are at the center of the page? I tried this but everytime I drag, It goes back to the beginning of the page and then I have to scroll down to see the effects
wow🤩
Hello Sir can make one video on Drag and drop in Figma, vertically and horizontally?
The editing is amazing. Best part is from 2:03 - 2:13 . Don't miss that guys.
Agreed! Truly exceptional
What is the shortcut to view that?
Can you please make a video on how to keep primary tab at fixed position
I will add it to the list 📝
how to make it loop?
basically a frame by frame animation but the play and rewind buttons are dragging motion
What play and rewind buttons?
Hi family 👋 if there is anything you like me to make a tutorial about drop a comment down below 👇
website scrollspy animation would be nice..thanks man for this video tut
@@mohammedshamil3976 website scrollspy?
Do you provide source code
Can u please help me out with the vertical and horizontal swipe in one frame
You have to have multiple frames in order to pull it off ✌️
I'm having trouble with the return interaction (swiping back). I add it to the object, but it doesn't appear in the same handle like yours, but on the left of the object and doesn't swipe back. I can see the 2 interactions in the prototype menu and they're going to the correct screens...
Make sure you use the exact same names for your layers across all frames
@@galxbarzilay They are the same but thanks for the reply
I have a problem. I have two carousels and created a multiple drag screens for both carousels. However, on testing my design, once I swipe the first carousel, the second carousel also swipes. How do I make this not happen?
Change the layers names. Give each layer a unique name and keep the consistent on each frame.
@@galxbarzilay I just did that. Still having the same response in the preview mode.
Maybe I should restructure my question.
Is it possible to have multiple carousel sliders on a screen? If yes, how do you go about it?
Thank you so mcuh!! and I have a question in portuguese 😬Como você consegue gravar o protótipo assim (Part 2:03 at 2:12)?
I use FCPX for editing and MotionVFX plugin called mCamRig 😊
@@galxbarzilay
@@MELMAN_PILGRIM de nada 😉
Do you need to make frame for those cards? Like you do in adobe or you can animate just one part so all other objest stays in? I am just switching from adobe to figma and already found it confusing. Swipe interaction now got complex ahhahaha anyway thanks for video. i hope it will fix all problems with swipe soon
Welcome to the wonderful world of Figma! As for someone who moved from Xd to Figma I can tell you it is so much better! As for your Q, no need to create a frame for those cards…
@@galxbarzilay Oh thanks men , saved half of my life. Peace!
How to make that animation work without having other components from moving? I have a nav bar that I want it to remain stationary and not swipe with the middle content. thanks
I don’t understand the question brother
@@galxbarzilay The header navigation bar at the top would slide with the rest of the content . It looks odd to see it move and to see a duplicate underneath. The scrolling is to be left to right middle section only not to include the top navigation bar. I made multiple frames with same navigation bar thinking that I had to.
@@bjmgraphics617 not sure why you thought you had to include it but hopefully it will work for you ✌️
i do the exactly same thing and try 6-7 times. Idk why but mines is not scroll like that. my prototype looks like its fade in fadeout, nothing is scale and scroll please help
It’s probably you didn’t have the same exact name to your layers across all your frames…
Hi Gal, did Figma make an update b/c this doesn't seeming working anymore, i followed your steps already
Did you make sure to use the exact same layer names across all frames?
@@galxbarzilay Yeah its not working for me either. When I drag, it just fades into the next screen and then stops working
@@galxbarzilay and should I put on Horizontal Scrolling
@@galxbarzilay Oh nvm!!! For some reason the contents of my carousel came out the frame so it was being seen as a different layer. Thats why smart animate didn't work! Great tutorial!!!
@@galxbarzilay Thank you for this video , but I have question why do name all layers have the same name?
How to cmd + Y in Windows?
CTRL + Y doesn't work like that
Shift + O or Control + O or google it 😉
My figma only goes to the right
sh*t
I’m sure if you pay attention to the details and do it step by step you will be able to solve it ✌️
Have you found the solution yet?
1:19 how to do in windows
Watch my video on Figma keyboard shortcuts ✌️