Figma short tutorial: Back to Top interaction
Вставка
- Опубліковано 17 жов 2024
- A quick figma tutorial that will show you how to create a "back to top" interaction using the "Scroll to" animation.
To go deeper into fixed positioned elements and creating "stick elements", you should check out this tutorial -
• Figma tutorial for beg...
To get a better knowledge and learn about he "Scroll to" interaction in figma, please see this tutorial -
• Figma animation tutori...
#yarivbe #figmatutorial #scrollto-interaction
Nice tutorial! just tried it with regular button symbols and a navbar symbol and they work as well. Thanks!
You are most welcome Walter and thanks a lot for the great feedback! i highly appreciate it 🙂🔥
Short and concise. Thanks you!
You are most welcome Tristan and thanks for the great feedback! I highly appreciate it 🙂⚡
Incredible tutorial. Helped a lot.
Thanks a lot for the great feedback! I really appreciate it 🙂🔥
Thanks! Great help
You are most welcome! Thanks a lot for your great feedback 🙂 i really appreciate it!
thanks a lot, i have a simple question, can we hide bottom floating action button during scrolling?
You are most welcome Hadi!
To your question - in figma prototyping we still cant - in programming sure its possible 🙂
Hello Yariv, thanks for your Video. One Question, what if we don't want to see this button the whole time of scrolling of our display (App and web) . I have seen that this button appears when I want to go to the top. It appears from left side of my mobile
Hi Maryam and thank lot for the great feedback! I highly appreciate it 🙂
To your question - is not really possible to easily do that (in figma prototyping, not in code) - meaning - to make the button appear only in a specific part of the scroll. Will not yet, at least.
There is no "y position trigger". It's definitely not ideal, but for now, that's the situation 🙂
@@YarivBE thanks for answering me so quickly, now i know that. I have seen it by App for the Online shop "About You"
@@maryamabaee332
Your are most welcome :)
Yes, this behavior is in a lot of websites and mobile apps. Definitely.
Thank you Yariv for your video, super helpful :) I followed the steps in your videos but my "back to top" button does not scroll to the top. Could you please advise? Thanks!
Hi there, and thanks a lot for the great feedback! I really appreciate it ✌You are welcome pf course!
Well, its a bit hard to tell why it doesnt work without seeing the file itself. I would check that the "back to top" buttton itself is in a fixed position when scrolling, constrained to bottom and placed at the bottom of the frame.
Make sure its in the top frame that holds the screen and not inside an inner frame (very important).
Let me know if you made sure that its all set like that and if we are having any success?
@@YarivBE Hi sorry for the late reply!! Thank you so much for your help, I was able to fix it ps: love all your videos, they are extremely helpful.
@@FC-dz2to
Thank you so much for your lovely feedback! It is really helpful and important for me to know that 🙂♥
But this is a very easy solution and not that accurate; in development the back to top button appears after scrolling down and then disappears, also for mobile environment you don‘t have a mouse to test the prototype.
Of course Jose and you are right - in prototyping we are demonstrating a behavior on the screen with the technical abilities.
Of course, not all things that are possible in code are possible in prototyping.
Unfortunately, figma didnt add the ability to trigger appearance or disappearance of elements by "Y" position.
Mouse - when you test the prototype on a desktop screen. You can test all prototypes (manly for mobile) on the figma mobile app and use it as you will, in real app.
I hope that clarifies it a bit more.
Feel free to write more if needed. Thanks!
@@YarivBE Thanks for replying. Yes, I know there are limitations but for my work I have to deliver very precise prototypes and mainly for mobile environments. Do you have any idea how can I solve it? My case is as follows:
1- You look for something in a search bar and some results will appear, kind of amazon, very regular behaviour
2- After some delay or scrolling down, a small pop up/modal should appear in the bottom (fixed position) indicating that if you didn’t find what you were looking for, you can ask for support (I need the "back to top" functionality for this modal but in this case going down)
3- By tapping this message, it should disappear and the result page should scroll to the very down where there is a CTA, that by clicking it triggers a different modal
I am really struggling with this scenario because I have tried by setting it up as an overlay, the overlay appears but I can‘t add another interaction to it like "Scroll to" because the modal is not in the canvas. I checked other videos and the solution seems to have different canvas and trigger the animation by "Mouse enter" or "Mouse leave" but for mobile you don‘t have a mouse.
Do you have any idea? Thanks 🙏