Horizontal Scroll Snap | Advanced Figma Prototyping
Вставка
- Опубліковано 25 кві 2020
- Figma project - horizontal scroll snap: www.figma.com/community/file/...
Take your app design prototypes in figma to the next level with this advanced horizontal scroll snap effect.
🚨 This is an old and bad way of doing this. You can now use Interactive Components to this, which is way easier.
✨ Watch the updated video here: ua-cam.com/video/Jtb5IGumbMM/v-deo.html
Such a great tutorial! Haven't seen anything out there that addresses this. Thanks a tonne!
Crazy! Subscribed immediately. Looking forward to more cool Figma prototyping tips from you
Hey thanks for the sub and nice feedback! I will be making more videos once I find time from work.
Outstanding. I would have NEVER figured out how to do this on my own.
Great video, thanks for putting this together!
This is what i was looking for. Simple and clear example. Dzięki :)
Great video, easy to follow and understand. I've been struggling to create horizontal snap, bravo!
Glad it was helpful!
thanks bro! i just subscribed. hope you'll post more great content.
This was an amazing helpful video! Thanks so much!
this is mind-blowing! a game-changer! thank you so much for explaining this it's very helpful :D
Thank you very much for creating such amazing and helpful tutorial videos.
This is so great!! Thank you so much for the tutorial!!
This is AMAZING! Thank you 🙌
Worked perfectly fine. Thanks a lot. By doing with your way I came along with different approach and it worked as well.
What was your other approach, if I may ask?
Nice tutorial. Thank you, this was really useful
Nice design, nice tip, good luck mate.
As Figma now has the Component Variants feature, You can use the same trick, which worked fine for me.
Dude you are a saviour , thanks a ton
It is really useful thank you!
thaaanks man! saved me a lot of time
aha! this is so cool... :) I didn't thought of this. Just create them individually instead of one scrollable frame which is free-flowing. :) nice tutorial!
SUBSCRIBED.
Very nice tutorial
Nice one, thanks!
Absolutely mindblowing! Thanks so much for this. Great Video! I think once Figma comes out with Varients and Interactive Components this is going to be so much easier! I'm looking forward to being able to do this without duplicating the entire artboard just for one micro-interaction 😅
Yep, it's gonna be the biggest addition to Figma ever! 🙌🏼 Already have so many ideas I want to try to make with Interactive Components.
@@fullstackdesigner Did you ever figure out how this worked on the Interactive components level?
Yes, I already have a working project using interactive components. All I need to do is film the video 😅 if all goes well I’ll have the video up next weekend 🤞🏼
Awesome!
very helpful u got subs ✨
This is a great tutorial and it saved my day
You're welcome!
You are a life saver. I moved to Framer because I needed this snap page effect. Turns out Framer kinda sucks. It’s good for many things and does the snapping easily, but slows to a crawl as soon as your project begins to grow; takes forever to load; is buggy; is not designer or typographer friendly; has no Scale tool (K) and a hundred other things.
Framer is a prototyping tool for React devs.
Figma is a prototyping tool for designers and problem solvers.
This video allows me the chance to come back to it. Thanks.
Hey, glad you found this helpful! 🙌
I've been thinking about checking out Framer, but seems that it's not worth it :P Also these kind of interactions will be much more easy to build once Figma comes out with Interactive Components. Really waiting for that!
@@fullstackdesigner Figma + Protopie. That’s the killer combo for me now.
No dislikes
That's what this man deserves
Thanks a lot dude
Thanks a lot ! :)
Thank's man!
thank u!!
Dope hairstyle mate
great
Thank you for the great content. So you basically disabled Auto Layout no?
Curious... how does Figma know which swipe object is dragged when they are stacked?
Nice tutorial!
How did you get the task switcher bar at the bottom of the iphone screen?
I see the bar is all the way at the bottom of your app mockup and that it is fixed position, but how do you fix it to the bottom of the prototype screen? When I have tried this, it seems to be fixed but outside the prototype view
Apologies for slow reply, but all you need to do is to just anchor the frame to the bottom of the parent frame using the "Constraints" panel on the right. And then also enable the "Fix position when scrolling" below it.
Your tutorials are great, I'm a beginner on Figma. How we make a snap scroll with multiple carousels in the frame? I tried by duplicate the frame and gave them different ID. Unfortunately, my frame had 4 carousels when I scroll the first carousel the other carousel is scrolling too.
Sorry for late reply, but I don' think it's currently possible to do that. Of course you can always just enable the basic horizontal scrolling in a frame, but it ain't no scroll snap :/ Thankfully there's hope tho, in January Figma is coming out with Interactive Components and then, in theory, we should be able to build the multi carousel screen you described 🙏🏼
great hair
Hi, love your tutorial. How are you able to vertical scroll this layout. I've been trying without success. Thanks.
The vertical scrolling should work on this layout as soon as you apply a device frame to the prototype. You can do this from the right side panel. Then go to the Prototype tab and there you'll find the Device menu.
I hope this helps!
I've followed your steps only that in my project I have a couple of frames I'm trying to make scrollable with a snap but when I do the interactions on the first one it makes the others scroll too even though I haven't connected the others. it's frustrating !!
Unfortunately it's not possible to make multiple scroll snapping carousels/sections yet. Although this should be possible when Figma officially releases Interactive Components, but it's still a beta feature and you need to join the Figma beta to get access. If you're interested and want to give it a try, you'll find instructions on how to join the beta program by googling "figma interactive components beta".
More Figma tutorials bro
Can you please share a tutorial on Tinder like situation card interaction?
Hey, that's a really good suggestion! I think that should be possible to build in Figma. I'll have to do some testing first though. If I find a good way to achieve card swiping interaction, I'll do a tutorial on that. So stay tuned for that in the near future.
Idk what I’m doing wrong but I’ve tried everything and I thought this was gonna fix it and I did everything just as you did it and it still is not doing what I need it to do.
Hi! This an old and quite bad way of doing this interaction. Here's an updated version of this with Interactive Components. It's way easier to use and implement. ua-cam.com/video/Jtb5IGumbMM/v-deo.html&lc=UgwMebs0TfpC1ifyGVh4AaABAg
Everytime I watch a figma tutorial my mind is blown how stupidly it handles interactions like this. Totally impractical and also not emulating how programming anything like this would ever be done.
But, uh, good tutorial. It's not your fault.
This is so stupid by Figma. The reason I shifted from XD was to get a smarter softeware but serious, It is better but not as good as some say. I find more and more flaws in Figma.
How can i get that life prototype iphone..pls help
If you use Figma in a browser - like I do - when you open the prototype just drag it into its own window. Then just tile the windows side by side and that's it. And on a mac you can also hide the browser UI (tabs, url bar, etc.) by hitting shift + command + F. That's how I get it like full fullscreen.
You can also use the Figma mirror app on your phone for live prototype preview. This is what I often use while doing my own designs. Although I would only recommend this if you happen to have same device as on your prototype.
Hope this helps!
Hey there. I did this, but when I swipe it 'desintegrates' the frame coming in. The image, shape and text come in at different moments. Am I missing something? Thanks.
Hmm, that's odd 🤔 can't really say anything for sure without seeing the project. One thing that comes to mind is that the off screen elements are not inside the same frame. That might cause them to not be "anchored" together. But I'd suggest you copy the sample project linked in the video description into your own drafts and carefully see how the prototype connections are done.
I hope this helps!
@@fullstackdesigner Thanks for the fast reply. Yeah, I haf the groups and frames in the carousel wrongly organized. Also, I was trying to make a carousel that would start in the middle with the image 'zoomed in'/bigger than the ones on the sides, so I had trouble with the resizing.
Thanks again. And great tutorial!
@@fullstackdesigner Hey. I'm bothering you again, but I've been struggling with this for the past days. I can get it to work with the first transition, but when I want to make another one and duplicate it to the next screen, something just gets messed up, and can't figure it out. Could you take a look at the files if it's not asking too much? Thanks.
Hi. I might have time to take a quick look tomorrow or in the next few days. Send me the link to your Figma project to this email fullstackdesigner.official@gmail.com and I'll take a look if I have time.
Bro what of the vertical scrolling?
You mean how to create similar snap effect for vertical scrolling?
@@fullstackdesigner yes bro
Apologies for late reply.
But if you want to achieve a TikTok like home feed scroll snap here's a simple example project that has vertical full screen scroll snap: www.figma.com/file/qpFbr8ApzLSL0AXp42UqFD/Simple-vertical-scroll-snap?node-id=0%3A1
It's really difficult to explain the process in words, so I hope it's enough to provide a sample project :P Just fire up the prototype to test the interaction.
@@fullstackdesigner thanks a lot
What's with the 90's porn music?
Hey blame youtube, I just slapped the first decent sounding track from youtube music library on the background :P
But now that you mentioned that, the music does have an adult film vibe to it XD I’ll try to avoid that in the future ✌🏼