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.com/watch?v=D3ZF2...
--
Gear
Microphone - amzn.to/34bDTxH
Hard Drive - amzn.to/30m5E5M
--
Let's Connect
Dribbble: dribbble.com/angeladelise
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!

[@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!

[@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

[@NataliTymofeieva]

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

[@kellyp509]

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

[@monicalindin1392]

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

[@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!

[@robertsyer]

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

[@LeDank]

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

[@paulinavillamil931]

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

[@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!

[@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!!!

[@caroll6733]

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

[@angeladesign737]

Thank you!

[@Silfiderium]

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

[@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.

[@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.

[@Adelinawrites]

Great video Angela, just what I was looking for! Concise and to the point, thanks!

[@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

[@user-kt1lx4df2l]

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

[@user-ph9of2lr5m]

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!

[@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.

[@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

[@nirau]

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

[@d8nya1]

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

[@muneebahmed4168]

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

[@angeladesign737]

Happy it was helpful!

[@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 :)

[@supra2k8]

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

[@angeladesign737]

Thank you so much!

[@beauthylesliek]

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

[@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!

[@mastersenpai7133]

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

[@AsitarYT.]

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

[@zahraaliux]

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

[@PrajyotMeshram]

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

[@newtochrist6239]

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

[@shraddhajoshi6351]

Thanks for clearly showing everything

[@khalilahkhalil]

Great tutorial! Helped me so much. Thank you

[@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!

[@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!

[@slava.senatorov]

Thanks for such clear and handy tutorial! 🖤

[@andrelee5438]

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

[@sXnjh]

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

[@angeladesign737]

Happy it was helpful!

[@alenarayssa]

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

[@alicemello2054]

Excellent tutorial, helped me a lot, thank you!

[@angeladesign737]

Happy it was helpful!

[@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!

[@pravinhublikar5505]

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

[@angeladesign737]

More to come! Thanks!

[@shiny3949]

Your way of teaching is an inspiration !

[@pradippaul9703]

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

[@adamsshaibu5996]

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

[@wisdomezeogu6650]

Thank you. I found the video very insightful.

[@scutaripavel3772]

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

[@sarauix1212]

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

[@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!

[@sohanulhabib1539]

I watch all your Figma Tutorial... it's really helpful & beautiful, Thank you very much .... love to see more video tutorial about Figma pls

[@angeladesign737]

Thank you so much! Let me know if you would like to see a tutorial on a specific topic!

[@WordPressWisdom]

Thanks for your help. Works perfectly!

[@gauravgarg4880]

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

[@hirokitamiya2392]

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

[@andresluna3688]

Thanks Angela, really helpful tutorial!

[@adesewade]

You totally simplified it! Thank you.

[@dianejibbs7914]

Thank you. You made it so easy

[@ItsBunggbunga]

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

[@shrmtvav]

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

[@roomathousandyearswide]

Simple and effective. Thank you

[@BenoNetto]

Really helpful! Thanks for sharing!

[@JavierGonzalez-cz2zl]

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

[@masked_santa]

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

[@yas12356]

Very clear tutorial. Thank you💛

[@inertingd373]

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

[@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.

[@alifiasalsabilla3280]

Thank you so much for the tutorial ❤️

[@rehanjamali5829]

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

[@rackeimdefreitas9866]

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

[@Samira-vy7gw]

Thank you so much for this Tutorial 🙏🙏🙏

[@mouhamedmoustaphadiouf9436]

awesome tutorial and you sounds beautifully keep it up thanks

[@cormacfee]

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

[@fehfeels]

So simple! Thank you!!

[@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!

[@NylodeMeijer]

You are amazing! Thanks for this great and clear tutorial

[@gilsonribeiro4429]

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

[@vivianalbert8742]

Thank you for for the short and impactful video

[@masonfellows405]

You are a lifesaver. Thank you! Just wow.

[@Yauboyy]

Nice and quick tutorial, cheers!

[@Godheals_always]

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

[@immortalarts2098]

Thank you so much this was very helpful

[@JaviBrenes]

Thank you so much! I needed just this.

[@powluiz]

This helped me a lot, thank's!

[@ahmadniazi3599]

Thank you so much for this video!

[@LuisaAprigioCarvalho]

THE BEST TUTORIAL EVER!

[@miles2367]

Thank you so much for this video !!! ❤

[@maverick818]

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

[@ismyalak1419]

Tiny video with a lots of information. Good job.

[@theorganizedblackgirl_]

OMG THIS WAS SO HELPFUL!! Thank you!!

[@jovem_guil]

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

[@sofysanta]

Fantastic!! Thank you for theaching me!!🤩

[@arunamuthunathan7739]

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

[@harisubramanian7022]

increditable show and teach us .thank you

[@erikaandreabarbosameneses7214]

Que maravilla estaba toda enredada con el scroll que estaba haciendo y gracias a este video puede corregir lo que estaba mal.

[@indusgod12]

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

[@alexnoellerivera7180]

Thank you for sharing!!

[@Whooisshe]

Thank you sm! i've finally figured out!👐