Horizontal & Vertical Scrolling | Figma Tutorial

In this video I show you how to add horizontal and vertical scrolling to your Figma prototype. I go over two different ways of adding vertical scrolling to your design. I show how to add horizontal and vertical scrolling to particular areas of the screen using Frames and then how to make the entire page scrollable while pinning the tab bar to the bottom of the page.
I show you:
0:54 - How to clip content to a frame
1:14 - How to add horizontal scrolling
1:17 - How to make a group into a frame
1:44 - How to add scrolling for overflow of content
2:11 - How to add vertical scrolling
3:06 - How to clip content for scrollable area
3:44 - How to add page scrolling
4:25 - How to constrain the tab bar
4:46 - How to fix position of an element
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.co....
--
Gear
Microphone - amzn.to/34bDTxH
Hard Drive - amzn.to/30m5E5M
--
Let's Connect
Dribbble: dribbble.com/a...
Blog: / angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

[@yuusufahmad6734]

I couldn't believe a video of about four years ago could still serve as better as this video actually done. Thanks to the tutor.
Great teaching with simplicity!

[@andabrowska2611]

in 5 min you've explained more than other 40 min tutorials. That's exactly what I was struggling with and now everything is clear. Thanks!

[@annas9544]

Same!

[@northwestnasandthesearch3359]

This was very clear and easy to understand, thank you for not making it a 20 minute video too 🙏🏼

[@blaskotron]

Yes I hate when they spend 75% of the video doing a design from scratch

[@joshuaedward1748]

When resizing the scroll frame, hold ctrl/cmd so it doesn't transform the whole group

[@nifty8404]

Thank you soooooooooooooooooooooooooooo much

[@valenbonas396]

GRACIAS

[@anujinbuyanmunkh3472]

thank uuuuu so much

[@user-ge2dx2mn9h]

oh my god thank u

[@cupofatea7524]

thank you bro

[@savannaray7293]

THANK YOU SO SIMPLE AND SO EASY TO FOLLOW ON MY OWN WORK. I SWEAR I COULD NOT FIND SOMEONE WHO TOLD IT THIS EASILY!!!

[@GoriAmir]

Thank you so much for this simple yet helpful video! As a beginner to Figma, I appreciate your tutorial. Thanks again!

[@angeladesign737]

Thanks so much! Happy it was helpful!

[@kelseylane9997]

This was by far the best tutorial on this I have seen so far! Thank you so much!

[@caroll6733]

Hello Angela, great, tutorial. Simple, clear & straight to the point, including all the details. Thank you so much !!!

[@angeladesign737]

Thank you!

[@robertsyer]

Unreal tutorial. Quick, concise, easy to follow...much appreciated!

[@kellyp509]

I love how you showed the problem at @2:55 and then explained how to fix. That was so helpful

[@naminenami]

Thank you so much, I've watched several videos, and NONE of them explained quick and simple like you. Most of them was missing information.

[@janmejaykul4109]

I am a beginner and this tutorial has blown my mind. Thanks a tonne!

[@jennajacobs3700]

I can't seem to remember how to do scrolling and I reference this video CONSTANTLY. Thank you for making it.

[@TiffanyBrooks-m6u]

literally sooo straight forward. your pace and steps were easy to follow. Thanks so much for this!

[@MiChaylaPollard]

You are wonderful! Thank you so much, I'm just starting out and couldn't find instructions on how to make a scroll bar that was simple to follow. You are a life saver!

[@NataliTymofeieva]

You did a great job! It is clear and up to topic. Thank you, Angela!💗

[@muneebahmed4168]

Amazing, I just love this and don't have words to appreciate you, thank you so much

[@angeladesign737]

Happy it was helpful!

[@supra2k8]

Your Figma tutorials are probably the best ones on youtube, keep it up!

[@angeladesign737]

Thank you so much!

[@lucioafdesign3512]

OMG thank you I was looking for this for A LONG TIME! Btw this video is fast and direct thank you again!

[@angeladesign737]

Glad it helped!

[@monicalindin1392]

Amazingly simple tutorial, thanks, Angela. Easy to understand and clear instructions, love it.

[@shrmtvav]

I SPENT 10 HOURS ON HOW TO DO THIS AND AFTER YOUR VIDEO DID IT IN 2 MINUTES, THANKS!

[@tasealali4923]

Hey Angela! I hope my words find you well. I'm starting my career in UX design. This was really helpful. Thank you so much. May God Bless You.

[@newtochrist6239]

I just learned figma yesterday and am so amazed like where has this been my whole life. LOL

[@paulinavillamil931]

Your tutorial has helped me a couple times - I forgot how to do it and again found your tutorial and did it - thanks!

[@ismyalak1419]

Tiny video with a lots of information. Good job.

[@SA-cb2it]

Love this tutorial! Thank you! It explains what I wanted to learn in a simple manner. You would be my go to figma teacher now 😄

[@caesarmusic6248]

Great video! Straight to the point, didn't skip any steps and very clear!

[@angeladesign737]

Thank you so much!

[@Silfiderium]

I cant believe how easy everything changes with a few clicks! Very easy to understand, thanks a lot!

[@shiny3949]

Your way of teaching is an inspiration !

[@cormacfee]

If I could love this a thousand times I would... so helpful - thanks! 🙂

[@LeDank]

This was extremely helpful! I would not have figured this out without your walkthrough.

[@PrajyotMeshram]

Quick fix. Just what I was looking for!
Thank you for this video!

[@losergaming-j3l]

Awe dear Thanks a lot. I was searching for this for a long time but didn't get the exact results. Your video is to the point, very informative, and helpful. Thanks again

[@andrelee5438]

I always back to this video, you saved my life, thank u so much

[@shraddhajoshi6351]

Thanks for clearly showing everything

[@valentinazambrano8527]

Thank you soooo muuuch, I spend a lot of time trying to do the scroll effect and with your video it was so easy to understand, learn and replicate

[@adamsshaibu5996]

thank you, i just started my UI/UX journey. This is really helpful

[@pradippaul9703]

Thank you Angela, I am a beginner, it is really helpful for me. Thanks...

[@gauravgarg4880]

Thank you .. I've been looking for this
And you didn't even wasted any time and started with the exact thing .. ❤️❤️❤️

[@urhorattel]

Thank you Angela! Simple, beautiful, understandable!

[@angeladesign737]

Happy it was helpful! Let me know if you would like to see a tutorial on a specific topic!

[@alenarayssa]

I'm going to send my first case project tomorrow, helps alot thank youuu

[@LuisaAprigioCarvalho]

THE BEST TUTORIAL EVER!

[@rackeimdefreitas9866]

i looked at so many other videos and this was the simplest

[@JavierGonzalez-cz2zl]

THANK YOU SO MUCH❗️❗️ I was trying to do this for days

[@vivianalbert8742]

Thank you for for the short and impactful video

[@rach6938]

Hi Angela, thank you for this video! You explain really well, straight to the point and easy to understand. I'll be going to your channel for tutorials from now on thanks!

[@selinalekhac2165]

Amazing tutorial and was exactly what i was looking for and more particular page scrolling shown at the end!

[@angeladesign737]

Glad it was helpful!

[@inertingd373]

extremely effective tutorial, nice ton e of voice, nice pace , thanks a lot, keep up the good work, good recording quality too (audio)

[@saintapalmer]

You totally simplified it! Thank you.

[@zahraaliux]

This was very helpful! Your tutorial one of the best to cover this subject, keep up the good work 👏

[@alicemello2054]

Excellent tutorial, helped me a lot, thank you!

[@angeladesign737]

Happy it was helpful!

[@rashinsalehi4386]

i've been looking for this about a week , thanks

[@angeladesign737]

Glad it helped!

[@sXnjh]

Amazing. Thank you so much. This is what I was exactly looking for.
Thanks again

[@angeladesign737]

Happy it was helpful!

[@Miviene13]

If you have some issue check the icon next to the overflow scrolling option. You will see exclamation mark.
For mine issue was: "For scrolling to work on this frame the content needs to be bigger than the frame".
Solution: You probably tried to put scrolling option to the frame which is inside your frame which you resized. Use the option scrolling on the frame which contains everything, not at the one inside.

[@nirau]

Thank you! I keep learning Figma and wanted to implement horizontal swipes, your video helped me understand how to do it :)

[@tyson_young]

Superb video, thanks Angela! I was getting caught up on a few basics around actually setting the Overflow Scrolling. This helped a lot :)

[@indusgod12]

thank you so much Angela i was searching for this and found your video its very helpful

[@rehanjamali5829]

Thanks alot, I m begginer in UI Designer. I will wait for your new videos

[@Kerchie]

Saved me so many times!

[@nidhannidhan2034]

Your sound is looking amazing

[@masonfellows405]

You are a lifesaver. Thank you! Just wow.

[@wisdomezeogu6650]

Thank you. I found the video very insightful.

[@Godheals_always]

You've got yourself a new subscriber!
Thank you for this

[@arunamuthunathan7739]

In Your channel easily understandable about prototype, thank you mam 🤘🙂👍

[@andresluna3688]

Thanks Angela, really helpful tutorial!

[@elenabargaoanu5763]

Thanks for sharing, I was looking for a tutorial like this! You explain really well, are straight to the point, and are easy to understand.

[@pravinhublikar5505]

Great tutorial, keep uploading more Figma tutorials, highly appreciated 👍👏

[@angeladesign737]

More to come! Thanks!

[@maverick818]

Thanks I’m a beginner you help me a lot
And you have such a sweet voice

[@WordPressWisdom]

Thanks for your help. Works perfectly!

[@amandab3735]

Perfect tutorial! Thank you!!

[@angeladesign737]

Amanda B thank you! Let me know what other tutorials you would like to see!

[@amandab3735]

@@angeladesign737 I'd love to see how you structure your UI projects and organize frames and components.

[@angeladesign737]

@@amandab3735 Great topic suggestion!

[@timilehinilelaboye6965]

THANK YOU SO MUCH. THIS VIDEO WAS SO EASY AND PRECISE.💯

[@parimal_gavali]

That was so fruitful information loved it so much
thank you and make more content like this on Figma.
As a beginner, this information helps us so much

[@angeladesign737]

Thank you so much! Happy it was helpful!

[@theorganizedblackgirl_]

OMG THIS WAS SO HELPFUL!! Thank you!!

[@gilsonribeiro4429]

Thank you so much! I wasn't understanding the figma's tutorial.

[@sarauix1212]

That was so helpfull & clear tutorial. thank you so much

[@beauthylesliek]

Thank you soooo much! love this video its so clear, straight to the point and easy to understand!

[@facundopincirolli4214]

I love you and don't have words to appreciate you, thank you so much!

[@lifewithtrix]

Just want to let you know that this is super helpful!!! I'm doing a school project on Figma and your video has helped me a lot :)

[@angeladesign737]

Happy it was helpful!

[@elcasa6587]

Hey Angela... You are my Wonder Woman!!! Thanks so much!!!

[@angeladesign737]

Happy it was helpful!

[@elcasa6587]

@@angeladesign737 Looking forward to checking out more of your videos. Rock On, Sista!!! ;)

[@mastersenpai7133]

Thank you for this tutorial, very clear and easy to follow!

[@Drampam]

Who are those 9 people who disliked this video? Great tutorial! Quick and to the point!

[@angeladesign737]

Thank you!

[@jovem_guil]

Thank you so much. I was having issues with overflow because of "clip content" property that was not selected :)

[@Yauboyy]

Nice and quick tutorial, cheers!

[@star-devil9157]

thank you this video is amazing i got so many points thank you sister ❤💕❤😍😍❤❤

[@samisak_kids]

Thank you so much for this Tutorial 🙏🙏🙏

[@scutaripavel3772]

Thank you very much !!! Very helpful tutorial and good job explaining all.

[@d8nya1]

Thank you so much!! You got straight to the point and explained really well.

[@yas12356]

Very clear tutorial. Thank you💛

[@esarijal]

thank you angela. you saved my day

[@karaokewaala9107]

This with Auto layout is such a blessing

[@BenoNetto]

Really helpful! Thanks for sharing!

[@hirokitamiya2392]

Thanks so much for sharing this and it's super helpful

[@josephlawrence927]

this was exactly what I needed

[@dianejibbs7914]

Thank you. You made it so easy

[@fiorelladonayre2914]

Thanks so much. This is very helpful and the way that you explain is very understandable.

[@angeladesign737]

Glad it was helpful!

[@ItsBunggbunga]

wow thank you so much for this easy learn video from you!

[@slava.senatorov]

Thanks for such clear and handy tutorial! 🖤

[@Livi_padron]

loved it!!!!! Just what I was looking for.

[@masked_santa]

Great content and to the point! Love it!
Thanks Angela!

[@alifiasalsabilla3280]

Thank you so much for the tutorial ❤️