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
5 жыл бұрын
Figma saved my whole Ui/Ux Career when i migrated to linux , you the best.
@uvinduharshana1169
4 жыл бұрын
had the same issue.thanks again figma
@navedhasan4632
3 жыл бұрын
@Anderson Remy bot
@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.
@MrTend0
6 жыл бұрын
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
6 жыл бұрын
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.
@MeTubeERG
5 жыл бұрын
I haven't been this excited about a new tool in a long time.
@BrettPeary
5 жыл бұрын
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.
@kellivu2981
4 жыл бұрын
Thank you!
@SnipeNScoreProductions
4 жыл бұрын
I have no option to make it fixed
@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?
@BarazalMatazawad
6 жыл бұрын
My jaw just dropped when he did the scrolling.
@bebro2075
6 жыл бұрын
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
6 жыл бұрын
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
@ElizabethArostegui
5 жыл бұрын
Figma is the best tool!!!
@StanleyBateswar
5 жыл бұрын
Fo show!!
@ashwinganvir3943
6 жыл бұрын
Please tell me how to select frame selection... please tell me shortcut key for windows platform
@loiuhuiygny7guyguiygk
5 жыл бұрын
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
6 жыл бұрын
Great news! Thank you! Will be awesome if prototyping will work in Figma Mirror
@evgeny1463
6 жыл бұрын
Seems it's work for me with Mirror... however not very smooth with Galaxy s7.
@godsentthearbitor
4 жыл бұрын
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.
@jojodesigns777
4 жыл бұрын
Looks amazing! Can we get a copy of this file to follow along?
@mohammadnazrin599
2 жыл бұрын
And THIS is how you make a tutorial. SIMPLE, EASY TO UNDERSTAND, EFFECTIVE. GREAT WORK!
@attilabodi826
6 жыл бұрын
its super glitchy, the footer dosent always show up, when previewing it on phone some imgs dont show up for like a minute
@zerosandones7547
3 жыл бұрын
how do we create a scrollbar that will respond to scroll overflow in figma?
@First.Last.99
4 жыл бұрын
6 buttons in menu. I love Figma but wtf :D
@SinnetSongs
4 жыл бұрын
When I try to resize my frames boundary it just scales all of the content. What am I doing wrong?
@666ipwn
4 жыл бұрын
Might be that your elements have no contraints
@Billy_D
6 жыл бұрын
The only problem i have with horizontal scrolling is that it doesn't go over side margins and its masked by them.
@Figma
6 жыл бұрын
Hey, it's not too difficult to work around this. In the video, you can see that we added some "padding" in our Components for the category cards. This will allow the new scrolling Frame to have some extra space. You can also nest another Frame inside of the Scrolling Frame to accomplish this. Maybe we'll add this tip to our Help Center article.
@theuxbootcamp
3 жыл бұрын
But right now figma don't have any scroll action as trigger.
@Underhills
3 жыл бұрын
Jisses, this is terrible. All I want is to define the viewport height so I can demonstrate that a frame with text content gets overflowed vertically at 550px height. Where is the set point for this?! I have a frame that is 700px high with content, so there's no way of actually setting the overflow point?? Figma pisses me off. It is SO hard and strange. In XD I just drag a ruler to the chosen overflow point and then I make sure there's content to overflow. Then the overflow effect plays in prototype mode. Simple!! But in Figma it's bending backwards trying to find a solution if lucky. Frames, components etc. This tut didn't solve it. There's no overflow behavior - the prototype section is almost empty. There's nothing to do there. When I make the text content inside my frame to yet another frame there's no freakin constraints either. Figma is really getting on my nerves. I hate it but are forced to use this train wreck due to corporate policy. Wish I could go back to XD and common sense.
@scottbiggs8894
Жыл бұрын
No longer relevant. This always happens when people KEEP CHANGING TOOLS. Just do it right the first time!
@DG-2323
6 жыл бұрын
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 ;)
@Figma
6 жыл бұрын
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.
@DeepfriedBaby
3 жыл бұрын
figma has some terrible narration. Emotionless script reading. Brutal. Look at WebFlow.
@shashankr7705
3 жыл бұрын
Thank you LORD! I was actually struggling to get the "multi-scroll" and I saw your video!
@Figma
3 жыл бұрын
Glad we could help, Shashank! 🔥
@BrendanHanna-j6v
11 ай бұрын
"scrolling overflow behavior is a property that only belongs to frames" ...if you're wondering why the options for scroll behavior arent' showing up
@j.barclay
5 жыл бұрын
Made the switch a few months ago. Haven't looked back. Keep up the amazing work!
@cynthiajames5335
3 жыл бұрын
The Nav Bar component disappears from the presentation mode screen when I fix its position while scrolling in the design tab. Please Help!
@oakmitali
2 жыл бұрын
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?
@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.
@lucielewis6438
2 жыл бұрын
Awful tutorial. Not clear, doesn’t work. The screen scrolls with each each movement.
@rgcalderon3458
2 жыл бұрын
My navigation bar becomes transparent. How do I make it solid for when I scroll?
@scritchproductions
6 жыл бұрын
helpful videos but the volume even at full is a bit low
@jesselyynnn
2 жыл бұрын
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?
@andrianrachmat9743
3 жыл бұрын
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?
@sarahha6523
8 ай бұрын
Hi, I don't see fix position when scrolling option, please help me! Thank you.
@julianarocha3649
4 жыл бұрын
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
@readit6138
3 жыл бұрын
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.
@OmarMohammed44
6 жыл бұрын
Amazing!!! Thanks a lot Figma!
@pinonXO
5 жыл бұрын
So all of these features are in the free package of Figma?
@Figma
5 жыл бұрын
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/
@NATHANisANDRE
5 жыл бұрын
Cool but... only mobile and tablet devices? Why not add some laptop resolutions (1440*800, ...) ?
@HDMOVIECREATOR2012
3 жыл бұрын
Is there a way to hide the top bar when you scroll down, but shows again when you scroll up?
@juangermano8179
6 жыл бұрын
Figma is getting more powerful every day. I'm a happy user. Thanks guys!
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?
@hussnainakbar4486
2 жыл бұрын
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?
@kev16
3 жыл бұрын
This video is old so the fixed check box when scrolling is not there anymore, where is it now?
@alexandredesouza6382
2 жыл бұрын
Thank you so freaking much, this has been my biggest trauma of this app, now you solved!
@foxykkk
6 жыл бұрын
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?
@josephstanley
2 жыл бұрын
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 😣
@archerius2
3 жыл бұрын
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!
@YouKys-2024
Жыл бұрын
How to make prototyping navigation appear when scrolling in figma??
Жыл бұрын
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
@karthik20187
Жыл бұрын
My frame is fixed.... Not moving... Not able to duplicate...
@novandarizkiadhika791
6 жыл бұрын
you gave the solution
@AnhPham-jc4li
5 жыл бұрын
how can i put my " present prototype" to the right ...like the video "1:25"?
@Figma
5 жыл бұрын
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!
@SJ-fg6nc
3 жыл бұрын
How do you make navigation bar start to disappear when scrolling down a page?
@Abbiejam
2 жыл бұрын
I'm crying cause it won't work and I can't understand whyyyy
@alterego6888
3 жыл бұрын
How did you create the "cards"??? Leaving out main details meanwhile everyone else somehow figured that part out. smh
@alterego6888
3 жыл бұрын
I think I figured it out.
@Ioannnify
4 жыл бұрын
Hi, thanks for the tutorial. Can we get this file so we can follow along?
@dribbblemvdmeetup500
4 жыл бұрын
Command + G is group? because I cant see Overflow behaviour, But I can see it when I create a component
@Figma
4 жыл бұрын
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)
@rahulsinha9031
Жыл бұрын
Please bring dyanamic sticking header to figma.
@snmbala
6 жыл бұрын
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
5 жыл бұрын
While resizing the boundary box hold the command key and then drag. It will now resize the box and not the content.
@MelissaLynn
4 жыл бұрын
@@kevinsantosdj thanks!!
@Sharandinaaa
3 жыл бұрын
What should I do if I do not have an overflow behavior tab????
@noaganot2995
3 жыл бұрын
Is there any way to scroll horizontally from right to left?? (for languages that read right to left eg. hebrew, arabic)
@madhoundes
3 жыл бұрын
I face that issue right now for arabic language it's weird
@redherring9727
2 жыл бұрын
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 :(
@lucaMMXI
3 жыл бұрын
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.
@adokce
3 жыл бұрын
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
@richardottley4611
4 жыл бұрын
Wow horizontal scroll looks so easy
@dd1.d
4 жыл бұрын
Why I can't resize the frame from left side to make it scroll horizontal to left?
@jeffkurzner7562
2 жыл бұрын
Is this tutorial sample design available to try following along?
@hawkintelligence
4 жыл бұрын
yeah, still can't get the map to move and scroll like you listed here.
@theinnocent_one
4 жыл бұрын
Can we make the bottom bar disappear when we start scrolling and appear when we stop ?
@iamtrexzgeorge7867
6 жыл бұрын
feels great using figma
@alessandra4612
Жыл бұрын
I don't see chec "fix position when scrolling"
@hanoimuaxuan
6 жыл бұрын
thanks u
@adeelrehman29
5 жыл бұрын
Hey XD! watch and learn.
@mariananelson9212
3 жыл бұрын
I mean true but XD does have viewport heights that are adjustable unlike figma. Honeslty, both annoy me. #AxureRP
@1732ashish
6 жыл бұрын
this is so cool , thanks figma
@foxykkk
6 жыл бұрын
when i make a frame with group with 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?
@Figma
6 жыл бұрын
Hey Екатерина, if you're having difficulty with scrolling or images, can you please reach out to us within the app (the black "?") and provide us with more information about your issue? Thanks!
@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.
@minhpl
5 жыл бұрын
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?
@ihoryarchuk9127
5 жыл бұрын
Thanks Figma Team!
@darellbill7578
4 жыл бұрын
Please where is the link to duplicate this design?
@romarmacaraeg661
3 жыл бұрын
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
3 жыл бұрын
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.
@daviddr2d2
4 жыл бұрын
Thanks, this really helped me with understanding how to make the frames scroll. cheers.
@ahmedkhaled1068
4 жыл бұрын
Amazing tutorial!!! Can't wait to play with horizontal scrolling.
@aherzkovich
3 жыл бұрын
This doesn't work for me, t just goes the other way around
@naitikkathiriya
3 жыл бұрын
hm useful and really live maker..
@momoduoladapo4097
4 жыл бұрын
Figma makes life very easy
@bnee4313
6 жыл бұрын
When i create frame by ctrl + g for components for horizontal scroll it becomes group and overflow behavior is not for groups
@MarcelSilvaCBZ
6 жыл бұрын
Amazing feature!
@rameeshoe
2 жыл бұрын
When I try this the contents in the frame gets shrunk.
@VLADSKRYPCHENKO
6 жыл бұрын
Please add basic animation. For example from daneden.github.io/animate.css
@pinpinnapa
4 жыл бұрын
Thank you.
@alterbria
4 жыл бұрын
I need a "On Tap -> Scroll to" function, like an anchor menu. Anyone knows if it's possible with Figma?
@Figma
4 жыл бұрын
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: kzitem.info/news/bejne/l3-amn2EhHeolW0 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.
@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!
@alltimegabi
5 жыл бұрын
Why is it when I begin prototyping the toolbar disappears completely? It's bottom constraint but constantly hidden
@Figma
5 жыл бұрын
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!
Пікірлер: 220