Parallax is a visual effect where elements on the page move at different speeds as the user scrolls. It can create an immersive, interactive experience for your website visitors.
You might have seen it used on sites like Nike’s “The making of Air Max” and on Mashable’s “The Evolution of the Smartphone. ”
So, can you do parallax in Figma?
The short answer is yes, but it requires a little bit of creativity and knowledge of how to use Figma’s built-in animation tool, called Keyframes.
Here’s a step-by-step guide on how to create a simple parallax effect in Figma:
1. Create your design in Figma
For this example, we’ll be creating a very basic design with three layers: a background, a middle ground, and a foreground.
Parallax can be a great way to add some depth and interest to your designs, but it can also be a bit tricky to work with. If you’re not careful, it’s easy to create designs that look wonky or unfinished. Here are a few tips to help you create beautiful, polished parallax designs in Figma:
1. Use simple shapes and colors.
Don’t try to do too much with your parallax effect – keep it simple! Using lots of different colors or complex shapes can make your design look cluttered and busy. Stick to a few basic colors and shapes, and your design will look much cleaner and more professional.
2. Be consistent with your movements.
When you’re moving elements around on your canvas, make sure that they’re all moving at the same speed. This will help create a sense of cohesion and harmony in your design.
3. Pay attention to the details.
It’s the little details that can make or break a parallax design. Make sure that all of your elements are properly aligned, and that there aren’t any weird gaps or overlaps. Taking care of the small stuff
2. Select the layer you want to animate
In our case, we want to animate the middle ground layer.
3.
Add keyframes to the layer
Click the “Add Keyframe” button in the top left corner of the layer. This will add a keyframe at the current frame.
You can add as many keyframes as you want by clicking the “Add Keyframe” button again.
(Figma will automatically tween between keyframes, so you don’t need to worry about that. )(You can also add keyframes to multiple layers at once by selecting them and clicking “Add Keyframe”.)
