After Delay Triggers
Automatically trigger prototype interactions after a set time delay for loading states and animations.
Prototyping
No shortcutAdvanced8 min readQuick Reference
After Delay Triggers
FigmaKeyboard Shortcut
N/A
Toolbar Location
Figma toolbar
Best Used For
- ▸Refer to the tutorial content for specific use cases
- ▸Practice with sample projects to build experience
- ▸Combine with other tools for advanced workflows
Advanced⏱ 1–2 hours to master
Key Settings
Create:Trigger:Duration:Destination:
After Delay Triggers automatically fire an interaction after a specified time. They are used for loading spinners, auto-advancing carousels, and timed animations.
Where to Find It
In the Prototype panel, when creating a connection, set the trigger to 'After delay' and adjust the timing in milliseconds.
How to Use
- Create: Select a layer and add a prototype connection.
- Trigger: Set the trigger to 'After delay'.
- Duration: Enter the delay in milliseconds (1000ms = 1 second).
- Destination: Set the destination frame that loads after the delay.
Pro Tips
- Use 500-1000ms delays for loading state simulations.
- Combine Smart Animate with After Delay for auto-playing animations like carousels.