Figma Tip: Prototyping with 'after delay' and 'trigger after delay' interactions

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.

#Figma #FigJam #FigmaTip #Tutorial #NothingGreatIsMadeAlone

[TheMrBrendo]

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?!

[zach-shea]

Using a gif as a video preview on hover is brilliant

[devbratjoshixxqptjcxdl]

This is good but i have always felt when using smart animate in after delays elements shake weirdly.

[benlow]

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!

[Produkthelt]

I’d love to know more about your custom easing curves 👀 and play with this file. 🤞🏻

[helgasonb]

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.

[sombrego]

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.

[Underhills]

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.

[ArtiomNeganov]

But as I understood, there's no way to insert "after delay" in an onTap action. Basically, if an element has "Press" animation, onTaps won't work for them properly and you cannot delay "onTap" or something...

[monikagevondyan]

Это!просто! то! что! надо! Спасибо большое.

[mokka]

how to perform this interaction in your new updates Figma?

[lokoloko]

even if i set the value of delay 1 ms i paused for longer fore me( how to fix that?

[SkYHawK]

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.

[rekiallard]

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.

[deplatt]

desperately need animation based on scroll position!!!!

[blankdeckskater]

The urge to not like this because its on 404 likes and make a not found joke...except I found this extremely helpful!