Figma Lessons - Chapter 7 - Prototype (Live Preview)
In this episode, I talked about the prototype feature.
What is a prototype? How and for what purpose is it used?
I tried to explain the animations in the Prototype tab with examples.
👉🏻 Instagram - / endertopaloglu
👉🏻 Twitter - / ender_topaloglu
👉🏻 Email - [email protected]
Timeline
0:00 Introduction
0:27 What is a Prototype?
0:59 Prototype Features
2:23 On Click / On Tap + Navigate to
6:56 On Drag + Smart Animation
10:06 While Hovering + Open Overlay
15:18 While Pressing
16:29 Key / Gamepad
18:30 Mouse Enter + Open Overlay (Pop-up)
20:13 Mouse Leave
21:09 Mouse Down + Mouse Up
21:35 After Delay
24:22 Fix Position
25:25 Scroll to
28:31 Scroll Vertical and Horizontal
34:24 Preverse Scroll Position
35:04 Swap Overlay + Close Overlay
37:17 Back
38:11 Open Link
40:18 Instant + Dissolve
41:06 Smart Animation
42:11 Move in + Move out + Push + Slide in Slide out
43:23 Sample Studies Made with Prototype
How to make the pizza sample in the video You can watch it at the link below:
• Advanced Animation in Figma | Smart animate
If there's anything unclear in the video, feel free to ask in the comments 😊
We Design Websites from Scratch
https://bit.ly/3h0x4qn
Become a UI/UX Expert
https://bit.ly/3f5Q4CR
The Designer's Toolkit
https://bit.ly/3oJ9Mrd
kariyer.net Redesign
https://bit.ly/2SeTdHI
Figma Lessons
https://bit.ly/3hHLigE