How To Create a Functional "BACK TO TOP" Button in Figma

No video

How To Create a Functional "BACK TO TOP" Button in Figma

Рет қаралды 30,799

Күн бұрын

Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Download FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
This is a Figma prototyping tutorial for beginners where we'll go over creating a functional "scroll back to top" button in Figma. We will be working with overflow scrolling, prototyping, frames, autolayout to achieve the result.
--------
© 2022 Mavi Design

Пікірлер: 35

@tioroshi8256 Жыл бұрын

Now in prototype set "On Click" > Scroll To > Select a frame on the top, done!

@santiagoardila2202 Жыл бұрын

Thanks bro you transformed 8 min of video in 30 sec

@Domvelando 8 ай бұрын

haha yes seeing the process was cool but this is the only reason i watched the video@@santiagoardila2202

@jareboi18 6 ай бұрын

How do you do it in a frame with auto layout?

@kirbypotito Жыл бұрын

Please, do a tutorial with this new update, this is not function anymore

@sk.q7049 Ай бұрын

Hello,can you make this vlog for framer too?

@Gorilla_brown786 7 ай бұрын

How do you connect one rectangle in one frame to another rectangle in another frame? I can't do it.

@jen5917 Жыл бұрын

after i "fix position" the scroll to top button from the second screen, the "mouse enter" prototype from page 1 does not work for me. the button wont show... how can i fix this?

@JoseReyes-pr9hg Жыл бұрын

I will run my own experiments but how could you replicate this in a mobile environment where there is not a mouse available?

@baichuanlu3131 8 ай бұрын

this is a mobile page, so does mouse enter still work?

@beluarribas3996 4 ай бұрын

How can I can do the same but with hover state?

@hoshinohikaru907 Жыл бұрын

my figma does not show the fix position when scrolling. What should I do?

@Tschoii90 Жыл бұрын

It is now in the prototype section on the top right.

@shoyo671 Жыл бұрын

Nice vid

@sanamadre5051 Жыл бұрын

What would be the substitute for mouse enter for app as in app you scroll thus mouse enter not working for me.

@uts2521 Жыл бұрын

Thank you

@paavamkutty 10 ай бұрын

back button is not working on figma even though I have made the connections. Rest all the buttons are working. Can somebody tell me what might have gone wrong?

@mavidesign 9 ай бұрын

To get personalized help and feedback on your project, please join my free Discord server. You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite. I'm unable to help everyone over KZfaq - thank you for your understanding! Mavi

@maryamabaee332 9 ай бұрын

I can't understand from copying a background and pasting it to website 1...:/

@mavidesign 9 ай бұрын

To get personalized help and feedback with your project, please join my free Discord server. You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite. I'm unable to help everyone over KZfaq - thank you for your understanding! Mavi

@zinmyowin978 Жыл бұрын

Could you pls tell me which website or app do you use in this video for creating design?

@mavidesign Жыл бұрын

Figma, it's in the video title :)

@zinmyowin978 Жыл бұрын

@@mavidesign Thanks!! and I'm waiting for your new video and design😁😁

@kiarakun Жыл бұрын

Can "sticky scroll" be an alternative?

@mavidesign Жыл бұрын

With the new update, I think it can :)

@junjie83 Жыл бұрын

I can't make it lol.. how

@maryamabaee332 9 ай бұрын

me neither

@brunogamesbr1 2 ай бұрын

as a programmer, forced to learn ux design, figma seems like a fancy software for you to find awkward ways to fake a functionality, jesus christ, a "back to top" button is one of the most basic, most common things a SPA should have, it's so common that it should be a prototyping option, why are we forced to make all of this janky shit just for something that every single website has?