Unlocking Figma's Prototyping Gems: Scroll To Animations and Anchor Points
Get the FREE Figma working file to follow along: https://www.figma.com/community/file/...
Get Figma for FREE: https://psxid.figma.com/ggcj1d
Access all of my UX, UI & Figma courses: https://www.moonlearning.io
Want to stay up to date on new developments, tips and tricks? Make sure to follow me!
Follow me on LinkedIn: / christine. .
Follow me on Twitter: / moonlearning
Follow me on Instagram: / moonlearnin. .
And don't forget to subscribe right here on Youtube for more!
-----------------------------------------------------------------------------------
The Power of Scroll To: Unleashing the Potential of Figma Animations
00:00 - Introduction to scroll to animations in Figma
00:10 - Get the Figma working file
00:16 - One pager navigation or menu with anchor points in Figma
00:48 - Animated picker with horizontal scroll
01:39 - Google map in Figma with scrolling both directions on click
02:47 - Advanced Prototyping
Let me show you a little more about the Scroll To action. It's actually often overlooked, but there is so much you can do with it. Make sure you download the free Figma exercise file so you can experiment with all of these animations yourself. You'll find the link in the description below.
I will show you how to:
1. Connect navigation seamlessly with different sections on a one-pager website, creating anchor points with Figma and easing to various locations on the same page.
2. Creating Horizontal Scroll Effects
But the Scroll Tool doesn't only work in one direction. You can also create nice little effects, such as clicking on a button and scrolling to a specific image, like a carousel or a selector with different colors.
3. Scroll To in Multiple Directions
And we can even take this a step further and create Scroll To in multiple directions, as seen with this map. We can set location pins, and once we click on them, scroll to different locations on a map automatically. All we really need is nested frames with clipped content and our Scroll To magic.
Make sure to download the free exercise file (link above).
The course is part of a larger course on moonlearning.io, which offers more in-depth lessons on Figma for all levels.
Keywords
moonlearning, figma scroll to action, figma exercise file, one pager website, navigation, sections, easing animation, offset, fixed menu bar, clip content, scrolling behavior, vertical scrolling, horizontal scrolling, nested frame, prototyping, multiple directions, map, pins, hidden part, size of the nested frame, subscribe button, New Learning IO, prototyping with figma working files
Watch video Unlocking Figma's Prototyping Gems: Scroll To Animations and Anchor Points online without registration, duration hours minute second in high quality. This video was added by user moonlearning 24 October 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,31 once and liked it 7 people.