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
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 ~
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.
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
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.
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
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.
Tip: This tutorial is good, but it doesn't say how to keep the dimensions of the device you want the scrolling to happen in. The way to do this is by making the main frame the size of the device, like iPhoneX, and having a child frame around the items in the "Scrolling" section, with that child frame being longer than the main parent frame. This works, but the items that are fixed to the bottom have to be placed at the bottom of the parent frame, which means that they are over the items in your body, which is the part scolling. This is annoying because you have to turn the visibility on and off to add items to the body. EDIT: Actually, the child frame is not needed. You just need to have a part of the body, like the background, extend past the main frame, the one that is the iphone dimensions. Make sure to uncheck Clip Content.
Can you explain how you set up your screen to have the preview to the right and auto-update as changes are made? Or is this just to present the information in this video? Seems like it would be a FANTASTIC update in the future if so ;)
Hey Drew, this setup actually has nothing to do with Figma. It's an OS-level feature of MacOS when in fullscreen mode. Just open the Prototype in a new browser window. The auto-updating is all Figma, however! All prototypes always update as you move things on the associated Canvas.
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
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 :(
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?
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!
Dear Team, Thank you for this tutorial and awesome program. I have a question. How can I have icons in a vertical row under the header scroll vertically over the header and make the header gradually fade in not the background as the first icon makes its scrolling way across it and then to reappear again once it scrolls down off it again. I would really appreciate your help. Thank you, Albert :)
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/
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?
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!
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.
hello, I'm doing my final project using figma and I just wanna ask if you can help me, in this video minute 4:29 , I do the same thing as you do ( change the width to 407 ), but the calendar design became responsive and they always move when I shrink the frame, how to fix that?
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?
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
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 😣
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.
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?
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)
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
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
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
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!
The "Fix position when scrolling" only works for my top elements but not the bottom elements. In fact, selecting "Fix position when scrolling" for the bottom elements makes the elements disappear completely from the Play Prototype.I am stuck.
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?
Why I can't resize the frame from left side to make it scroll horizontal to left?
Год назад
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.
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
![BRASIL vs. PERÚ [4-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 10](http://i.ytimg.com/vi/tbyOJKXfQnI/mqdefault.jpg)
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
зачем
Figma saved my whole Ui/Ux Career when i migrated to linux , you the best.
had the same issue.thanks again figma
@Anderson Remy bot
And THIS is how you make a tutorial. SIMPLE, EASY TO UNDERSTAND, EFFECTIVE. GREAT WORK!
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 ~
I haven't been this excited about a new tool in a long time.
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.
Finaly! Thanks for it..that is a great new step Figma becomes more powerfull. Please more of this content for Prototyping. I need it :-)
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
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.
Made the switch a few months ago. Haven't looked back. Keep up the amazing work!
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
Figma is getting more powerful every day. I'm a happy user. Thanks guys!
Bro how can I add a prototype to unity engine
Thank you LORD! I was actually struggling to get the "multi-scroll" and I saw your video!
Glad we could help, Shashank! 🔥
Figma is the best tool!!!
Fo show!!
Great news! Thank you! Will be awesome if prototyping will work in Figma Mirror
Seems it's work for me with Mirror... however not very smooth with Galaxy s7.
This video is great. So clear. Took seconds to fix my issue. Thank you!
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.
Amazing tutorial!!! Can't wait to play with horizontal scrolling.
Thanks, this really helped me with understanding how to make the frames scroll. cheers.
Thanks for this. I thought you needed to add the destination interaction for horizontal scrolling to work. Its so seamless!
Tip: This tutorial is good, but it doesn't say how to keep the dimensions of the device you want the scrolling to happen in. The way to do this is by making the main frame the size of the device, like iPhoneX, and having a child frame around the items in the "Scrolling" section, with that child frame being longer than the main parent frame.
This works, but the items that are fixed to the bottom have to be placed at the bottom of the parent frame, which means that they are over the items in your body, which is the part scolling. This is annoying because you have to turn the visibility on and off to add items to the body.
EDIT: Actually, the child frame is not needed. You just need to have a part of the body, like the background, extend past the main frame, the one that is the iphone dimensions. Make sure to uncheck Clip Content.
Thank you!
Very good tutorial. I did step by step as you told. Thank you for teaching us.
Can you explain how you set up your screen to have the preview to the right and auto-update as changes are made? Or is this just to present the information in this video? Seems like it would be a FANTASTIC update in the future if so ;)
Hey Drew, this setup actually has nothing to do with Figma. It's an OS-level feature of MacOS when in fullscreen mode. Just open the Prototype in a new browser window. The auto-updating is all Figma, however! All prototypes always update as you move things on the associated Canvas.
feels great using figma
Amazing!!! Thanks a lot Figma!
Thank you so freaking much, this has been my biggest trauma of this app, now you solved!
Looks amazing! Can we get a copy of this file to follow along?
This tutorial has been so helpful! Thank you so much
Amazing feature!
Thanks Figma Team!
Goood update! Please more! :))) Thanks Figma Team!
this is so cool , thanks figma
Awesome tutorial. Thank you!
Thanks a lot!! I really needed this!
Awesome tutorial! Thanks Figma!
Thank you! Very useful video!
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
Hi Ryan, were you able to figure this out?
Amazing. Thanks for sharing!
Thank you!
thanks for a lesson! How to put on the right side mobile view?
Really useful, thank you!!
Thank you.
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 :(
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?
Thank you, you legend.
My jaw just dropped when he did the scrolling.
very helpful!
you gave the solution
Hi, thanks for the tutorial. Can we get this file so we can follow along?
thanks!
Is this tutorial sample design available to try following along?
Very impressed
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!
iM AMAZED
Please tell me how to select frame selection... please tell me shortcut key for windows platform
I love you with all my heart.
Dear Team,
Thank you for this tutorial and awesome program. I have a question. How can I have icons in a vertical row under the header scroll vertically over the header and make the header gradually fade in not the background as the first icon makes its scrolling way across it and then to reappear again once it scrolls down off it again. I would really appreciate your help. Thank you, Albert :)
how do we create a scrollbar that will respond to scroll overflow in figma?
awesome !
Figma makes life very easy
i love this tool
Super you are a great thanks
So all of these features are in the free package of 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/
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?
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!
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?
Wow horizontal scroll looks so easy
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.
its super glitchy, the footer dosent always show up, when previewing it on phone some imgs dont show up for like a minute
"scrolling overflow behavior is a property that only belongs to frames" ...if you're wondering why the options for scroll behavior arent' showing up
hello, I'm doing my final project using figma and I just wanna ask if you can help me, in this video minute 4:29 , I do the same thing as you do ( change the width to 407 ), but the calendar design became responsive and they always move when I shrink the frame, how to fix that?
Nice!!!
Thanks!!!!
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?
Is there a way to hide the top bar when you scroll down, but shows again when you scroll up?
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
ty x
helpful videos but the volume even at full is a bit low
What about the few steps before these long frames? How to I get there?
The Nav Bar component disappears from the presentation mode screen when I fix its position while scrolling in the design tab. Please Help!
My navigation bar becomes transparent. How do I make it solid for when I scroll?
Cool but... only mobile and tablet devices? Why not add some laptop resolutions (1440*800, ...) ?
Hi, I don't see fix position when scrolling option, please help me! Thank you.
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 😣
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.
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?
Command + G is group? because I cant see Overflow behaviour, But I can see it when I create a component
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)
thanks u
How do you make navigation bar start to disappear when scrolling down a page?
When I try to resize my frames boundary it just scales all of the content. What am I doing wrong?
Might be that your elements have no contraints
When i create frame by ctrl + g for components for horizontal scroll it becomes group and overflow behavior is not for groups
What should I do if I do not have an overflow behavior tab????
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.
While resizing the boundary box hold the command key and then drag. It will now resize the box and not the content.
@@kevinsantosdj thanks!!
Is it possible to show scrollbar? : )
How to make prototyping navigation appear when scrolling in figma??
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
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
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
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!
YEEEEAAAHHH ( love It )
The "Fix position when scrolling" only works for my top elements but not the bottom elements. In fact, selecting "Fix position when scrolling" for the bottom elements makes the elements disappear completely from the Play Prototype.I am stuck.
same, looks like they changed how this works :/
You can have it fixed to position now by moving it up so it's not at the bottom of the design page
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?
Why I can't resize the frame from left side to make it scroll horizontal to left?
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.
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