Parallax In Figma
It's possible... kinda.
Parallax is like the salted caramel of the design world - it adds that extra oomph to your designs that leaves people wanting more. One of the biggest benefits of parallax is its ability to create a sense of depth and immersion in your designs. It adds a layer of visual interest and can help guide the user's focus to specific elements on the screen. Additionally, parallax can be used to add movement and interactivity to an otherwise static design, making it more engaging and memorable. And while it may seem like a daunting task to achieve parallax in Figma, fear not my fellow designers, because I've got you covered.
Due to Figma's lack of scroll events, parallax has to be 'faked' by animating between two states either on click or, ideally, on drag. But fear not, because this actually has its benefits. By faking parallax, you have more control over the interaction and can create a more seamless experience for your users.
To achieve the best results with parallax, it's best to create it within a component. This allows you to place it anywhere in your designs and have it transition independently of your screen transitions. It also means you can easily reuse the parallax effect in multiple designs without having to recreate it each time.
So, how do you actually fake parallax in Figma? It's pretty simple, really. Start by turning your layers image into a component and then creating two separate variants of your design, one for the initial state and one for the final state. Then, use the prototyping feature in Figma to create a drag interaction between the two states.
The secret sauce here (especially for mobile) is to divide your page up into screen sized sections so that you can drag to scroll a full screen height at a time, making the parallax effect much more realistic.
You can learn more on my YouTube channel where I have a video on both parallax on ‘scroll’ and on mouse move.