Web Design » Figma » How Do You Do Parallax in Figma?

How Do You Do Parallax in Figma?

Last updated on September 29, 2022 @ 12:27 am

The Parallax effect has been around for years in classic video games, and more recently, in new media web design. The basic idea is simple: background images move slower than foreground images, creating an illusion of depth.

In Figma, you can create the illusion of depth using the Parallax effect. To do this, you need to have two or more layers on your canvas. The background layer should be on the bottom of the layer stack, and the foreground layer should be on top.

PRO TIP: This article is outdated and no longer reflects Figma’s current functionality. We recommend you check out our documentation on parallax for more up-to-date information.

To create the Parallax effect, select the top layer and click on the “Effects” icon in the Inspector panel. Then, click on the “+” icon and select “Parallax” from the drop-down menu.

In the Parallax settings, you can adjust the “X Offset” and “Y Offset” to control how much your foreground layer moves in relation to your background layer. You can also adjust the “Scale” to control how big or small your foreground layer appears.

The Parallax effect is a great way to add depth and dimension to your designs. By adjusting the offset and scale, you can create a variety of different looks. So experiment and see what you can come up with!

Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.