Parallax Animation: Free Figma Tutorial

Topics Covered in This Figma Tutorial:

Setting up the Parallax Assets, Building the Parallax Animation

Exercise Preview

Exercise Overview

In this exercise, you'll master one of the most compelling visual techniques in modern UI design: creating parallax animations using Figma's Smart Animate feature. This technique adds sophisticated depth and engagement to interfaces, making your designs stand out in today's competitive digital landscape.

Setting up a Parallax Photo

Parallax animations create stunning visual depth by moving multiple layers at different speeds, mimicking how our eyes perceive distance in the real world. The fundamental principle is simple yet powerful: background elements move slower while foreground elements move faster, with the closest layer achieving maximum velocity.

The most technically challenging aspect of parallax animation lies in the preparation phase—specifically, the Photoshop work required to isolate each layer. We've streamlined this process for you by pre-separating the elements, but in production environments, you'll need each layer meticulously extracted with transparent backgrounds where unwanted elements have been removed. To import these assets into Figma while preserving transparency, save them as PNG files. Below, you'll see our three carefully crafted layers: background, middleground, and foreground.

Now that you understand the theory behind parallax design, let's dive into the practical implementation in Figma.

Opening the File

1. Begin by accessing Figma's file browser. If you're not currently on the homescreen, navigate there using the appropriate method for your platform:

   • In the Desktop app: Click the Home tab (Mac users can alternatively choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and select Back to files.
2. To import your local project file, click Import file (this may appear as an icon near the top right corner).

3. Navigate to Desktop > Class Files > Figma Class and double–click on Parallax.fig to select it.

   After the file uploads successfully, click Done and double–click the file to open it in the editor.

With your workspace properly configured, you're ready to begin constructing the parallax effect by organizing the visual layers.

Setting up the Layers

The foundation layer—our background photo—is already positioned within the frame. Your next task involves systematically adding the remaining two layers (middleground and foreground) that will create the depth effect.

1. Select the background photo positioned at the top of the frame by clicking directly on it.
2. Create a duplicate by pressing Cmd–D (Mac) or CTRL–D (Windows).

While the frame appears unchanged visually—the duplicate occupies the identical position but sits above the original—the Layers panel now reveals two Background layers. This layering system is crucial for achieving the parallax effect. Next, you'll replace the uppermost layer with the middleground imagery.

1. Access the image placement tool by clicking the dropdown arrow next to the Rectangle tool in the top-left toolbar, then select Place image/video from the dropdown menu.
2. Navigate to Desktop > Class Files > Figma Class > Parallax Photos and double–click Middleground.jpg to select it.
3. Click on the topmost photo to replace it with the new middleground image. The visual remains unchanged—this is exactly the intended behavior as the layers align perfectly.
4. Maintain organization by double–clicking the top layer labeled Background in the Layers panel and renaming it to Middleground.
5. Repeat this process for the foreground layer. With the Middleground photo selected, duplicate it using Cmd–D (Mac) or CTRL–D (Windows).
6. Again, access the image tool by clicking the dropdown arrow next to Rectangle tool and selecting Place image/video .
7. Double–click Foreground.jpg to select it (navigate to Desktop > Class Files > Figma Class > Parallax Photos if needed).
8. Click the topmost photo to complete the replacement.
9. Finalize the organization by renaming the top layer from Middleground to Foreground in the Layers panel.

Your layer architecture is now properly established. The next critical step involves creating a container that will control the visibility boundaries of your animation.

Putting the Whole Thing in a Frame

During the parallax animation, the foreground will move upward faster than the background, causing the bottom portion of the background to become visible beyond our intended viewing area. To maintain professional presentation standards, we need to establish a clipping boundary. While masks could accomplish this, using a frame provides more flexibility and easier management.

1. In the Layers panel, click to select the The Islands of Hawaii layer.
2. Hold Shift while clicking the Background layer to select all layers in the range.
3. Right-click (or CTRL–click on Mac) the selected content and choose Frame selection from the context menu.
4. In the Layers panel, rename the newly created Frame 1 to parallax for clarity.

5. With the frame still selected, navigate to the Design panel on the right side and enable Clip content.

   This setting prepares the frame to crop any content that extends beyond its boundaries—essential functionality you'll utilize when the animation moves background elements outside the visible area.

Your structural foundation is complete. Now comes the exciting part: bringing your parallax design to life through animation.

Building the Parallax Animation

Smart Animate in Figma requires two frames to define the animation sequence: the initial state and the final state. The system automatically interpolates the movement between these two states, creating smooth transitions. You already have your starting frame configured, so let's construct the ending frame that will define your animation's destination.

1. Select the parent frame by clicking on Parallax Start in the frame name area.
2. Create a duplicate using Cmd–D (Mac) or CTRL–D (Windows).
3. Rename the duplicated frame by double–clicking its name and changing it to Parallax End.
4. Access the nested frame by double–clicking on the top photo within the Parallax End frame.
5. In the Layers panel, locate and click the The Islands of Hawaii layer within the parallax group.
6. Extend your selection by holding Shift and clicking the Middleground layer in the Layers panel.
7. Move the selected elements upward by holding Shift and pressing the Up Arrow key 5 times. This creates the base movement for your background and middleground layers.
8. Refine your selection by holding Cmd (Mac) or CTRL (Windows) and clicking the Middleground layer to deselect it, leaving only The Islands of Hawaii and Foreground layers selected.
9. Apply additional upward movement by holding Shift and pressing the Up Arrow key 10 times.
10. Further refine by holding Cmd (Mac) or CTRL (Windows) and clicking the Foreground layer to deselect it, isolating only the The Islands of Hawaii layer.
11. Apply the maximum movement by holding Shift and pressing the Up Arrow key 15 times.

12. The frame boundaries require adjustment to maintain proper cropping. Since overlapping layers make visual assessment challenging:

    • Temporarily hide the Middleground and Background layers by hovering over their names in the Layers panel and clicking the eye icon .
    • Select the parallax frame in the Layers panel.
    • Carefully resize the bottom edge of the frame upward to align with the bottom of the Foreground layer. Precision is crucial here—aim for a final height of 650 pixels.
    • Restore visibility to the Middleground and Background layers by clicking their eye icons again.
13. Initialize the animation setup by clicking the Parallax Start frame name to select it.
14. Switch to animation mode by clicking Prototype in the right panel header.

15. Create a new interaction by clicking the Plus (+) button next to Interactions.

16. Configure the animation parameters by clicking the Click —> None interaction and making these adjustments:

    • Change the trigger from On click to After delay.
    • Set the delay duration to 1,000 ms (allowing viewers one second to appreciate the initial state).
    • Change the action from None to Navigate to.
    • Set the destination to Parallax End.
    • Under Animation, change from Instant to Smart animate.
    • Set the easing to Ease in and out for natural movement.
    • Configure the animation duration to 4,000 ms (4 seconds for a smooth, observable transition).
17. Test your animation by clicking Present at the top right or pressing Cmd–Option–Return (Mac) or CTRL–ALT–Enter (Windows).
18. Observe as the animation automatically triggers after one second—the parallax effect should be clearly visible!

19. Press the R key to restart and review the animation.

    The deliberately slow timing allows you to analyze each layer's movement. Now, let's add the final enhancement: simulating the scroll-off effect that creates the impression of content moving beyond the screen boundary.

20. Close the presentation by returning to the main editing interface.
21. In the Parallax End frame, select the parallax frame containing your photos and typography.

22. Execute the final positioning move with precision. You need to move the entire parallax frame completely above the visible area while maintaining its relationship to the parent frame.

    Begin dragging the parallax frame upward. As you drag, simultaneously hold the Spacebar (preventing accidental separation from the parent frame) and Shift (constraining movement to vertical only). Continue until the frame sits completely above the navigation bar, hidden outside the top boundary of the parent Parallax End frame.

    Alternative precision method: If you prefer numerical control:

    • Note the current height (H) in the Design panel—it should read 650.
    • Set the Y position to -650 (the negative value is crucial) and press Return (Mac) or Enter (Windows).

    The parallax group should now be completely positioned outside the frame's top boundary.

23. Optimize the remaining content by dragging the lower text and photo elements upward, ensuring the first paragraph appears elegantly positioned below the navigation bar.
24. Clear all selections by clicking in an empty canvas area.
25. Launch the final presentation by clicking the Present button .
26. Wait one second and witness your completed parallax animation in action!

27. Press R to replay and fully appreciate the sophisticated depth effect you've created.

Congratulations! You've successfully mastered parallax animation in Figma—a technique that elevates user interfaces from static displays to engaging, dynamic experiences. This skill positions you at the forefront of modern UI design, where motion and depth create memorable user interactions that drive engagement and differentiate digital products in today's competitive marketplace.