Figma Tutorial: Device Frames and Scrolling

[@Figma]

In June 2024, we introduced a redesigned Figma-called UI3. With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content. - Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI - Learn more about device frames and scrolling: help.figma.com/hc/en-us/articles/360039818734-Prototype-scroll-and-overflow-behavior#Apply_overflow_behavior

[@devilzinger]

зачем

[@samsongilbertnota5804]

Figma saved my whole Ui/Ux Career when i migrated to linux , you the best.

[@uvinduharshana1169]

had the same issue.thanks again figma

[@navedhasan4632]

@Anderson Remy bot

[@mohammadnazrin599]

And THIS is how you make a tutorial. SIMPLE, EASY TO UNDERSTAND, EFFECTIVE. GREAT WORK!

[@MeTubeERG]

I haven't been this excited about a new tool in a long time.

[@MrTend0]

Steps: --> Group the objects --> set as components by Creating component --> select component objects --> Ctrl + Alt+G / Commend + _ +G to add frame --> adjust that frame width to screen width --> select that frame and change its overflow behavior --> test it ~

[@loquatmuncher]

It would be nice if you could control when an element gets fixed. Like when you have a nav bar near the middle of the screen that moves up as the user scrolls, but then gets fixed at the top of the screen to make it accessible to the user no matter how far they scroll.

[@shashankr7705]

Thank you LORD! I was actually struggling to get the "multi-scroll" and I saw your video!

[@Figma]

Glad we could help, Shashank! 🔥

[@godsentthearbitor]

Wow this is so powerful. So good. I am two years too late for this update on the frames. Future is already here but some is more aware than the others.

[@j.barclay]

Made the switch a few months ago. Haven't looked back. Keep up the amazing work!

[@bebro2075]

Finaly! Thanks for it..that is a great new step Figma becomes more powerfull. Please more of this content for Prototyping. I need it :-)

[@Figma]

Hey Be Br, glad you're enjoying the Tutorials! If you have specific things you'd like to learn about, let us know here in the comments or head over to our Community Forum and start the conversation! Find it here: spectrum.chat/figma

[@loiuhuiygny7guyguiygk]

I LOVE FIGMA!!! i've already messaged big websites such as 99designs to start accepting Figma files as an industrial standard! best app & web design software out there! wohoo

[@astarodumov]

Great news! Thank you! Will be awesome if prototyping will work in Figma Mirror

[@evgeny1463]

Seems it's work for me with Mirror... however not very smooth with Galaxy s7.

[@iamtrexzgeorge7867]

feels great using figma

[@ahmedkhaled1068]

Amazing tutorial!!! Can't wait to play with horizontal scrolling.

[@daviddr2d2]

Thanks, this really helped me with understanding how to make the frames scroll. cheers.

[@dianesoulstar2112]

Very good tutorial. I did step by step as you told. Thank you for teaching us.

[@mararosenstock6564]

The fix position when scrolling checkbox isn't there anymore, or maybe it doesn't always show up? Is this part of the most recent Figma update? Still trying to figure out how to make sure a component is fixed on the page.

[@ihoryarchuk9127]

Thanks Figma Team!

[@irishnftgal]

Thanks for this. I thought you needed to add the destination interaction for horizontal scrolling to work. Its so seamless!

[@ashwinganvir3943]

Please tell me how to select frame selection... please tell me shortcut key for windows platform

[@MarcelSilvaCBZ]

Amazing feature!

[@ellenhossain]

This tutorial has been so helpful! Thank you so much

[@cratchap926]

But i have a question, say i create a prototype with the Android large preset, but it still doesn't completely fit to many screens, so if i want my prototype to work with different phone screen sizes, do i have to create a new prototype according to a new screen size for all screen sizes!!?? If not then can you please make a tutorial for fixing this issue for beginners?

[@СергейБаронов-ф9ы]

Goood update! Please more! :))) Thanks Figma Team!

[@BarazalMatazawad]

My jaw just dropped when he did the scrolling.

[@illyaswan]

Awesome tutorial. Thank you!

[@anastasiiasobolieva9897]

Thank you! Very useful video!

[@zerosandones7547]

how do we create a scrollbar that will respond to scroll overflow in figma?

[@artneo7]

Awesome tutorial! Thanks Figma!

[@niklastsalkos]

I made a timer (with a vertical scroll) and a total price. How do i make the total price raise (and lower) as i scroll the timer?

[@SnipeNScoreProductions]

I have no option to make it fixed

[@Boggs2534]

What if your iPhone frame is being designed with a grid? I want to add more content vertically to the screen to have the user scroll. The grid does not go beyond the iphone frame and stretches out of proportion if the preset iphone frame is extended.

[@AndresLopez-zj2ki]

Thank you, you legend.

[@inessaishenko8453]

thanks for a lesson! How to put on the right side mobile view?

[@prograamerxxxi5950]

thanks!

[@sarahha6523]

Hi, I don't see fix position when scrolling option, please help me! Thank you.

[@momoduoladapo4097]

Figma makes life very easy

[@attilabodi826]

its super glitchy, the footer dosent always show up, when previewing it on phone some imgs dont show up for like a minute

[@archerius2]

Do we need to specify a browser in devices if we are prototyping for desktop? I noticed in devices there are only options for smart devices. Thank you!

[@minhpl]

Hi Figma team, I really love this feature. Just a quick question, when you horizontally scroll, do you notice that the image actually got cut off at the left border but not on the right border? I wonder if we can do something to have a consistent interaction at both ends. Thanks

[@mydesignerlife]

Hi Ryan, were you able to figure this out?

[@juliatyler5336]

very helpful!

[@nuralifmustofa1428]

i love this tool

[@hussnainakbar4486]

there could be a web page that has secondary navigation below the hero that will become fixed when it reaches the top of the screen and be persistent for the rest of the scroll depth. Then when a user scrolls back up, the element releases from the fixed position when it reaches its original position. can we do that?

[@rgcalderon3458]

My navigation bar becomes transparent. How do I make it solid for when I scroll?

[@dehuryanddehury2942]

Super you are a great thanks

[@scritchproductions]

helpful videos but the volume even at full is a bit low

[@josephstanley]

Hi, for some reason when I set the constraint for my bottom nav bar to stick to the bottom, it doesn’t reflect on the prototype, I wonder what goes wrong here 😣

[@redherring9727]

Thank you for this great tutorial! Quick question: The "Left and Right" option is not visible for me when I try to fix the constraints when the checkbox for "Fix position when scrolling" is selected. I don't know how to fix this issue and can't find any help anywhere :(

[@hanoimuaxuan]

thanks u

[@HDMOVIECREATOR2012]

Is there a way to hide the top bar when you scroll down, but shows again when you scroll up?

[@jeffkurzner7562]

Is this tutorial sample design available to try following along?

[@pinonXO]

So all of these features are in the free package of Figma?

[@Figma]

That's correct! You can prototype completely for free. Just create a free Figma Starter team to get started right here: www.figma.com/files/create-team Wondering what you get for a Professional Team? Check out our Pricing page here: www.figma.com/pricing/

[@andrianrachmat9743]

hello, i want to ask something. I have trouble while making the menu bar, if I check the fix position checkbox, the menu bar didn't appear, but its appear when I uncheck the fix position checkbox. so what should I do to make it appear when I check the fix position?

[@SJ-fg6nc]

How do you make navigation bar start to disappear when scrolling down a page?

[@Sponsi_PL]

Is it possible to show scrollbar? : )

[@kev16]

This video is old so the fixed check box when scrolling is not there anymore, where is it now?

[@aaronmund5120]

What about the few steps before these long frames? How to I get there?

[@theinnocent_one]

Can we make the bottom bar disappear when we start scrolling and appear when we stop ?

[@fernandooavl]

Nice!!!

[@alterego6888]

How do you loop the scrolling option?

[@dd1.d]

Why I can't resize the frame from left side to make it scroll horizontal to left?

[@snmbala]

When I resize the boundary bar it string the entire content inside. Here I can see only the outline getting resized. How it can be done.

[@kevinsantosdj]

While resizing the boundary box hold the command key and then drag. It will now resize the box and not the content.

[@MelissaLynn]

@@kevinsantosdj thanks!!

[@oakmitali]

I'm having an issue with vertically scrolling option since this latest update in Figma and I'm unable to fix the issue. Is anyone else having the same issue?

[@bnee4313]

When i create frame by ctrl + g for components for horizontal scroll it becomes group and overflow behavior is not for groups

[@julianarocha3649]

Hello, I'm doing expectantly as you , but when I get the prototype the frames open in 2 different screens, one of them the normal layout and other screen with the background in black and just with the images I have done the scrolling.Do you know how resolve that?thanks

[@simplyaizhan]

Hi Figma! Could you do an updated tutorial on scrolling interactions? I created an Overlay menu for mobile and want one of the menu buttons to scroll to the specific section on the frame (but not on the overlay). How do I do that? Thank you!

Hello, I need help. I would like to know who can help me find the screen element pin function (so that other elements scroll). Since the last update, the FIXED function is gone from my figma.

[@Figma]

Hello, we have moved the scroll behavior settings under the Prototype panel. Check out this help center article to learn more: help.figma.com/hc/en-us/articles/360039818734-Prototype-scroll-and-overflow-behavior#Apply_overflow_behavior

[@foxykkk]

when i make a frame with group of pics (which will scroll horizontally) and then i need to resize the frame up to size of main big frame all the pics are resizing with the frame... i turn on/off the constrains and it doesn't help. What the deal?

[@readit6138]

I'm having an issue with the whole page scrolling both vertically and horizontally, but I've only selected horizontal. I seem to have followed all of the directions. But clearly not.

[@adeelrehman29]

Hey XD! watch and learn.

[@mariananelson9212]

I mean true but XD does have viewport heights that are adjustable unlike figma. Honeslty, both annoy me. #AxureRP

[@estefa7777]

Thanks!!!!

[@rahulsinha9031]

Please bring dyanamic sticking header to figma.

[@SinnetSongs]

When I try to resize my frames boundary it just scales all of the content. What am I doing wrong?

[@666ipwn]

Might be that your elements have no contraints

[@dribbblemvdmeetup500]

Command + G is group? because I cant see Overflow behaviour, But I can see it when I create a component

[@Figma]

Hey there, Overflow behavior is available only for Frames, not for Groups. Components are also Frames, which is why you see that property for Components. With your group selected, you can convert it into a Frame instead from the top of the Right side panel (Click the dropdown menu set to Group and select Frame from the options)

[@NATHANisANDRE]

Cool but... only mobile and tablet devices? Why not add some laptop resolutions (1440*800, ...) ?

[@darellbill7578]

Please where is the link to duplicate this design?

[@AnhPham-jc4li]

how can i put my " present prototype" to the right ...like the video "1:25"?

[@Figma]

Both of these are in the Figma web app in the browser. We set up two fullscreen windows split screen in Mac OS. You can do that same in Windows. This isn't a feature of Figma itself, just how we configured the window. You can use the same method for the Web app and Desktop app on opposing sides, or even multiple browser types (Chrome and Firefox). Since a prototype is just a URL, you can even edit on one computer and have the prototype on another. The configurations are very flexible!

[@DennisS-h4b]

Please add overlays to make dropdowns great again! :)

[@noaganot2995]

Is there any way to scroll horizontally from right to left?? (for languages that read right to left eg. hebrew, arabic)

[@madhoundes]

I face that issue right now for arabic language it's weird

[@AliceS-uk6ng]

Google pixel 2 frame is not available in figma now is there a way to add this frame in prototype mode?

[@Figma]

Hello, you can find the Google Pixel 2 frame under "Archive" after pressing F.

[@hawkintelligence]

yeah, still can't get the map to move and scroll like you listed here.

[@xallsounds]

YEEEEAAAHHH ( love It )

[@theuxbootcamp]

But right now figma don't have any scroll action as trigger.

[@alessandra4612]

I don't see chec "fix position when scrolling"

[@sparkplug964]

That is epic.

[@anaisolivares9370]

the shortcuts that you use are command+g rigth? in Windows what would be?

[@Figma]

Hey Anais, typically the equivalent for Command on MacOS will be Control on Windows. You can access a list of Keyboard Shortcuts from directly within Figma by clicking on the black "?" in the lower right-hand corner. Cheers!

[@godsentthearbitor]

Can I get the design files for this?

[@naufalfarras6347]

where can i get this tutorial file?

[@alltimegabi]

Why is it when I begin prototyping the toolbar disappears completely? It's bottom constraint but constantly hidden

[@Figma]

Hey Gabi, thanks for sharing this issue. We have a bug report open and are currently investigating. If you haven't already, please write into Support and include a copy of your problematic file so we can take a closer look. Thanks!

[@forceaidan8]

Hey, I'm running into an issue where, when I place components outside of my Page frame, and then try to make all the components that I want to turn into a Horizontal sliding motion into a frame, it automatically disappears this Horizontal slider frame from my Prototype when I try to look at it.

[@Figma]

Hello, is the component still inside your page frame in the layer panel? If not, drag the component layer back into the page frame layer. You want to make sure the component is still a part of the frame in order for horizontal sliding to work.

[@forceaidan8]

@@Figma that’s the tricky part. In the video, some of the components were visually outside the boundary of the page frame layer, yet still counted as being a part of the page frame? How do you do that?

[@Figma]

If you look at the layer panel on the left, you'll see that the components are inside the frame even though visually they are outside the frame.

[@forceaidan8]

@@Figma Ah, I see. I feel like a dummy! thank you so much for your help!

[@Figma]

No problem! I'm glad I can help, happy learning! 😊

[@romarmacaraeg661]

I've been wondering if I can create an auto hide while scrolling up and down. Anyone who knows if this is possible in FIgma?

[@Figma]

Hey Romar, this isn't currently a supported feature at this time, though we are aware that it would be useful and have this tracked as a feature request.

[@alterbria]

I need a "On Tap -> Scroll to" function, like an anchor menu. Anyone knows if it's possible with Figma?

[@Figma]

Hey Ceylon, the easiest way to simulate some examples of "scroll to" behavior in Figma using Smart Animate by moving the body content up to the scroll position and using Smart Animate as the animated transition. You can watch this tutorial to learn more: kzbin.info/www/bejne/bHrHZXyEgKqqmJo It isn't currently possible to actually set a trigger to scroll to a coordinate position or ID like you may expect when building a website.

[@HiKalvin]

I don't know why, the bounding box not appear on my prototype, any clue? Or it should be a component?

[@maniushka]

i have the same problem :(

[@Figma]

Hi Kalvin, can you clarify your issue? If you think you've found a bug, please contact our Support Team from the black question mark in the app, or by emailing [e-mail]

[@Underhills]

Where do you set the viewport height?

[@Figma]

Hey Ventende, the "viewport height" isn't explicitly set. Figma will use the max height of the Device Frame you've selected from the Prototype Tab (e.g. Google Pixel 2), or the max height of the viewport of the device you're viewing the prototype on (your monitor or phone).

[@Underhills]

@@Figma That's not very practical. I use my "viewport ruler" all the time in XD and find that very helpful.

[@alterego6888]

How did you create the "cards"??? Leaving out main details meanwhile everyone else somehow figured that part out. smh

[@alterego6888]

I think I figured it out.

[@usnij]

How do I prototype to click a button that then scrolls the page automatically to the bottom?

[@Figma]

Hey Jinsu, scrolling to anchors or Frame coordinates isn't currently supported. Maybe in the future. Thanks for the suggestion!

[@ThuyNguyen-nc5rv]

Was surprised when I saw Vietnamese food in the tutorial :)

[@MartinYankov]

A w e S o m e !

[@dannovic]

How did you get such a detailed google maps picture? And how did you add the picture in, i added mine via the color of that shape and use crop to make it zoomed in, however i cant seem to find the "clip content" button for that one. If i just drag the picture onto the screen it just goes over the whole frame instead of the shape i want shape

[@Figma]

Hey Mista, Here are some extra clarifying details: • The Google Maps bitmap image is actually just a screenshot straight from the browser. • In this example, I didn't actually set the Image fill to "Crop". It's just set to Fill. • You then place the image inside of the Frame, which is smaller than the image. • Any parts of the Image larger than the Frame will then be clipped, as long as Frame clipping is turned on. You can see the setup here (note the blue bounding box on the Canvas showing the true dimensions of the map image): imgur.com/a/mvJVZ6W

[@Figma]

If you have any more questions, try joining our Community Forum on Spectrum and asking your question to some other experienced designers and more. You can find it here: spectrum.chat/figma

[@dannovic]

Figma thanks! I hoped there was a way to get a very detailed google maps picture of a bigger part. When you zoom out on google maps it removes smaller roads which i didn't want. And ill definitely join the community!

[@First.Last.99]

6 buttons in menu. I love Figma but wtf :D