Figma After Delay: How to Create Automatic Animations (for Splash Screens & Loaders)

You're designing a mobile app and want to create a smooth, engaging user experience right from the moment the app launches. Or perhaps you're building an interactive presentation and need elements to appear sequentially without a single click. The challenge often lies in making these transitions feel natural and automatic, rather than requiring constant user input. This is where the powerful figma after delay trigger comes into play, allowing you to orchestrate timed animations effortlessly.

Figma's 'After Delay' feature is a game-changer for UI/UX designers and anyone looking to prototype dynamic flows. It enables you to define a specific time duration after which an interaction will automatically trigger, making it ideal for elements like splash screens, loading indicators, or guided walkthroughs. Instead of relying solely on clicks, drags, or hovers, you can now build prototypes that unfold on their own, mimicking real-world app behavior.

What is the 'After Delay' Trigger in Figma?

The 'After Delay' trigger is a prototyping interaction setting in Figma that allows you to initiate an action or transition automatically after a specified time duration. Unlike 'On Click' or 'On Drag' interactions that require user input, 'After Delay' operates autonomously, making it perfect for creating figma automatic animation sequences. As observed in practical applications, this trigger is exceptionally useful when you want something to activate after a set period, such as a second or more, without any direct user interaction.

When you set an interaction to 'After Delay', Figma waits for the specified number of milliseconds before executing the next step in your prototype flow. This opens up a world of possibilities for creating dynamic and engaging user experiences, from subtle micro-interactions to full-screen transitions. It's a fundamental tool for prototyping interactions that feel fluid and responsive, mimicking the behavior of a fully developed application.

Use Case 1: Prototyping an App Splash Screen

A splash screen is the first thing users see when they open an app, often displaying a logo or brand message before transitioning to the main content. Using figma after delay, you can create a seamless and professional splash screen prototype. Here’s a step-by-step guide to make a logo appear and then automatically transition to the home screen after 800 milliseconds:

Steps to Create a Figma Splash Screen Prototype:

1. Prepare Your Frames:
   • Create your first frame (e.g., "Splash Screen") with your app's logo centered.
   • Create a second frame (e.g., "Home Screen") representing the main interface of your app.
2. Set Up the Initial Interaction:
   • In the Prototype tab, select the "Splash Screen" frame.
   • Click the '+' icon next to 'Interactions' to add a new interaction.
   • For the 'Trigger', select 'After Delay'.
   • Set the delay time. For a quick and engaging splash, you might choose 800 milliseconds. As demonstrated in common design practices, setting an 'After Delay' of 800 milliseconds can smoothly transition from one frame to another with an 'Ease In and Out' animation, creating a polished user experience.
3. Define the Transition:
   • For the 'Action', select 'Navigate to'.
   • Choose your "Home Screen" frame as the destination.
   • For the 'Animation', select 'Smart Animate' for a smooth transition, and choose 'Ease In and Out' for a natural acceleration and deceleration.
   • Adjust the animation duration if needed (e.g., 300ms).
4. Test Your Prototype:
   • Click the 'Present' icon (play button) in the top right corner.
   • Observe how your splash screen appears, waits for 800ms, and then automatically transitions to the home screen.

This method ensures your figma splash screen prototype behaves exactly as it would in a live application, providing a realistic preview of the user experience.

Use Case 2: Building an Animated Loading Indicator

Loading indicators are crucial for informing users that content is being fetched or processed. A well-designed loader can significantly improve perceived performance. With 'After Delay', you can create complex, looping loading animations without requiring any clicks, making it an excellent example of figma animation without click.

Steps to Create a Looping Loading Indicator:

1. Design Your Loader States:
   • Create a component for your loading indicator (e.g., three dots, a spinning circle, or a progress bar).
   • Duplicate this component multiple times, creating slightly different states for each frame of your animation. For example, if you have three dots, you might have:
     • Frame 1: Dot 1 highlighted
     • Frame 2: Dot 2 highlighted
     • Frame 3: Dot 3 highlighted
2. Chain 'After Delay' Interactions:
   • Select Frame 1. Add an 'After Delay' interaction.
   • Set the 'Trigger' to 'After Delay' (e.g., 300ms).
   • Set the 'Action' to 'Navigate to' Frame 2. Use 'Smart Animate' with 'Ease In and Out'.
   • Repeat this for Frame 2: 'After Delay' (300ms) to 'Navigate to' Frame 3.
   • For Frame 3, set an 'After Delay' (300ms) to 'Navigate to' Frame 1. This creates the loop.
3. Adjusting Delay for Rhythm:
   • When fine-tuning animations, you might realize an initial delay isn't quite right. For instance, if a loading indicator needs a slightly longer pause before repeating, you can adjust the 'After Delay' setting to, say, 500 milliseconds, coupled with an 'Ease In and Out' transition for a more refined visual rhythm. This iterative adjustment is key to achieving the perfect feel.
4. Test and Refine:
   • Present your prototype and observe the looping loader. Adjust delay times and animation curves ('Ease In', 'Ease Out', 'Ease In and Out') until the animation feels smooth and natural.

This technique allows you to create sophisticated figma timed transitions that enhance the user experience during waiting periods.

Key Settings & Common Pitfalls

Understanding the nuances of 'After Delay' settings is crucial for successful automatic animations. The primary setting to master is the delay time, specified in milliseconds (ms). Remember that 1000ms equals 1 second. For most micro-interactions, delays between 100ms and 500ms feel quick and responsive, while splash screens might use 800ms to 2000ms.

Common Pitfalls and Troubleshooting:

• Animation Not Firing:
  • Incorrect Frame Selection: Ensure you've applied the 'After Delay' interaction to the *starting* frame of the transition.
  • Overlapping Interactions: Check if another interaction (like 'On Click') on the same element or frame is conflicting.
  • Zero Delay: While technically possible, a 0ms delay might sometimes behave unexpectedly or be too fast to perceive. Always use at least a small delay if you want to see the effect.
• Animation Too Fast or Too Slow:
  • Adjust Milliseconds: This is the most direct fix. Increase the delay for slower animations, decrease for faster ones.
  • Ease In/Out Settings: The animation curve also significantly impacts perceived speed. An 'Ease In' will start slow and speed up, 'Ease Out' starts fast and slows down, and 'Ease In and Out' provides a balanced flow. Experiment with these to get the desired feel.
• Looped Animations Don't Loop Properly:
  • Last Frame Link: Ensure the final frame in your sequence correctly links back to the first frame with an 'After Delay' trigger to complete the loop.
  • Consistent Delays: For smooth loops, try to keep the delay times consistent across all frames in the loop, or intentionally vary them for specific effects.

Next Steps: Chaining Delays for Complex Sequences

Mastering the 'After Delay' trigger opens the door to creating much more intricate and dynamic prototypes. By chaining multiple 'After Delay' interactions across several frames, you can build complex, multi-step automatic animations. Imagine a multi-stage onboarding flow where information cards appear one after another, or a detailed product demo that guides the user through features without requiring a single click.

This technique is foundational for crafting truly immersive user experiences, allowing you to tell a story or present information in a controlled, time-based sequence. To further enhance your skills in creating captivating animations and interactive prototypes in Figma, consider exploring advanced techniques covered in Juno School's free certificate course on Animating Without Code in Figma. This course delves deeper into various animation triggers and properties, helping you build sophisticated designs.