Creating UI Parallax Animations in Figma

Overview: In this video, we learn how to create UI Parallax animations in Figma using three different methods.

Method 1: Illustration Pack

• Use an illustration pack from the community, such as Scenic Background Illustrations, to create a layered effect with foreground, midground, background, and sky elements.

• Place text in the middle of the trees for a more immersive effect.

• As a bonus, add two text layers, one in front of the midground and one behind it.

• Lock any layers that you don't want to animate.

Method 2: Parallax Plugin

• Use the free Parallax plugin to make the magic happen.

• Adjust the amount of Parallax and choose the direction of the animation.

• Use the 3D option for a cool 3D animation.

• Export the animation as an HTML file, SVG animation, GIF, or WebM video.

Method 3: Spline Tool

• Use the Spline tool in Chrome to pick up some cool objects and scenes.

• Take advantage of the library section to find the perfect scene.

• Use the Spline tool to animate the scene.

• Zoom in and out to see the animation.

Adding Parallax Scrolling to Figma Designs

Overview: This video provides an overview of how to add parallax scrolling to Figma designs. It covers two methods: using the Lookout feature and using the Anima plugin.

Using the Lookout Feature

• Select the elements you want to animate and click on the Event tab.

• Increase the distance events for elements furthest away and decrease the distance for elements closest to the title or other elements on screen.

• Click on Export and select Embed.

• Paste the embed code into a rectangle in Figma.

• Preview the animation and adjust the distance events as needed.

Using the Anima Plugin

• Log into the Anima plugin and select Advanced Prototype.

• Select the 3D elements you want to animate and set the Direction, Scale, Delay, and Ease In/Out.

• Save the settings and preview the animation.

• Export the animation as a live website or embed it in Figma.