Figma Tip: Prototyping with "after delay" and "trigger after delay" interactions
Вставка
- Опубліковано 19 сер 2024
- In this Figma tip we cover using after delay and trigger after delay to make more robust prototypes with automatic transitions. These are helpful for micro-interactions and creating animated transitions in Figma.
Duplicate the example file from the Figma Community here: www.figma.com/...
#Figma #FigJam #FigmaTip #Tutorial #NothingGreatIsMadeAlone
I absolutely love these fairly short deep dives into deep figma functions. I hope you keep this series up and show off what you can do with all of the combinations of figma functions. Can you do a mid level dive into the smart animate easing curves and interactive components?!
Using a gif as a video preview on hover is brilliant
This is good but i have always felt when using smart animate in after delays elements shake weirdly.
Cool trick with the on hover gif video thumbnails. I didn’t know you could apply the delay to the mouse triggers. Thanks for sharing!
I’d love to know more about your custom easing curves 👀 and play with this file. 🤞🏻
Duplicate the community file here: www.figma.com/community/file/1093929564574626440
What a great video! I'm loving the prototyping features in Figma. But the more I use it I wish it had more advanced features such as different animations for different elements. And the ability to stagger the delay of elements. And maybe some basic logic, one can wish.
Great video as always. The names of the elements in the frames are triggering my OCDs but otherwise it's always interesting to see how you make full use of the tools Figma offers. That first animation shown looked particularly good it makes me want to up my smart animate game. And also the way you use component variants and then replace a fill with another at the end of the video for the gif cards is interesting. I usually make a base component and then make nested variants of another component in the first one but this way to do it takes less space so to speak. I'll try that out eventually.
Doesn't work with interactive component when there's no manual trigger, just a delay. Like a toast. It just goes in loop, there's no way to stop it. I introduced a third hidden state but that makes it crash all the time. Times like these I really miss XD.
Это!просто! то! что! надо! Спасибо большое.
Pretty pretty really smart
Hey can you guys attaching prototype settings to flows itself. Because we can not have 2 different device prototypes in the same file. Which is quite frasturated because everyone uses same file for different device. Just allow us to select flow then adjust prototype settings, so we can create 1 flow for desktop, 1 flow for mobile.
You can assign a device per page within the same document.
If you want to easily separate them out, you can select the frames, right click and move to another page.
@@miggi-from-figgi Yeah it's better alternative for opening a new file, thank you. Still working in the same page and attaching prototype options to the flow itself would make sense and it will be easier right?
I agree. For how I set up my files and pages, this would be very helpful.
even if i set the value of delay 1 ms i paused for longer fore me( how to fix that?
how to perform this interaction in your new updates Figma?
The urge to not like this because its on 404 likes and make a not found joke...except I found this extremely helpful!
desperately need animation based on scroll position!!!!
I second, third and fourth this idea! this is one of the only interactions that i cant communicate via Figma.
I fifth it. Right now I'm relying on mouse enter interactions to determine where on the page you are, but as you can imagine, it is not very reliable. Would be nice for building sticky headers or scroll spies.
That's quite easy actually. By putting the design to animate inside a component You can do that using "Mouse Enter" trigger
@@shahiferdous Problem with this is you can just move your mouse to trigger the animation. Not great for user testing, but does make for a cool demo.
@@zach-shea yeap you are right. Not good for user testing. Maybe we need something like a "On Reveal" trigger for this. Hope Figma brings it.
Terima kasih, aku pikir Figma membatasi fitur After Delay bagi pengguna biasa, ternyata fitur itu kedisabled karena kesalahan ku sendiri yang tidak paham dasar element didalamnya.
Gotcha 😀