The release of LottieFiles for Figma in 2023 was made to give everyone access to motion design. The aim was to reduce the learning curve in creating motion to empower designers in bringing their creative visions to life.
LottieFiles for Figma allows you to easily convert your designs or prototypes into production-ready Lottie animations. The plugin is linked directly within Figma itself which allows designers to seamlessly collaborate on creating motion.
Recently, our own creative team, Lottie Studio, was given a task to demonstrate the power of this very tool. When they were approached by Fons Mans to create Lottie animations for a playlist, the result yielded more than we could imagine.
Fons Mans wanted to create a website full of playlists specifically for designers - playlists they could listen to while researching, designing, focusing or to detach and relax. He wanted to take basic shapes and turn them into unique, spiraling animations and give each playlist its own dedicated animation.
Not only did the team capture the essence of the graphics, but they also tapped into the personalities of well-known (and some of our favorite!) designers such as Michael Riddering and Tommy Geoco.
Ideation and brainstorming
Fons Mans provided the team with a set of 24 distinct graphic shapes, which were to be the foundation of our animations. Using the LottieFiles for Figma plugin, we were able to easily access Fons’ shared library of graphic shapes. We were able to edit, test, iterate, and collaborate with other team members, without ever leaving Figma.
After receiving access to the assets, the brainstorming phase began. The team assigned a keyword that encapsulated each shape; this was crucial to determine the type of animation that would best represent it. The end goal was to create a shape-based animation language that could evolve, shift, and transform — all while unveiling new and unexpected perspectives.
As we progressed, key themes were identified which guided our animation direction including:
- Aligning the movement of each shape’s animation with the personality of the featured designer. For example: Using forward-shooting arrows to reflect Framer’s CEO, Jorn van Dijk’s future-focused mindset and drive for progress.
- Amplifying animations to highlight the contributions of the featured designers.
- Embracing diversity of the different designers while keeping cohesion with the visual narrative.
Next, the foundation for sketching and experimenting was built as the team utilized animation sequences right within Figma. This revealed a continuously shifting and transforming, creation of unexpected combinations. Elements merged together to uncover dynamic animations in this newly-found shape-based language.
Bringing the elements to life
The team began crafting numerous multi-variant component animations using LottieFiles for Figma. Because it sits directly within Figma, we were able to see our Lottie animations come to life as soon as the flows were finalized.
Our focus was to build a consistent motion design language for each shape, while sticking to simple, yet effective movements such as rotating, masking, and scaling, while still adhering to key motion principles. In doing so, we were able to build a strong foundation that could be tailored to highlight the unique identity of each designer featured on the playlist’s dedicated website.
Bringing it all together
The team started combining different shapes and components to generate a wide variety of animations, all of which was done within a single Figma file. Our team of visual and motion designers was able to seamlessly collaborate with one another directly within Figma, while also working closely with Fons Mans to ensure his vision was being met.
Using components for our animations gave us room to easily update and maintain consistency across the entire project. We simply merged different component flows where to create entirely new animations, while streamlining our workflow.
Time to ship
The last step: ship and implement! Converting our animations in Figma into Lottie animations was a breeze with LottieFiles for Figma; it only took a single click.
Our team exported and organized each animation into our shared workspace, making it easy for anyone to access, edit, and finalize the animations for implementation.
The end result was mesmerizing - animations full of shapes, bright colors and lots of movement. You can see them in all their glory by visiting www.playlists.design. We had a blast working on this project and to be able to use LottieFiles for Figma to make our collaboration with Fons Mans a breeze. And of course, a big thank you to Fons Mans for bringing us on board for this incredible project.
Get creative with LottieFiles for Figma
LottieFiles for Figma gives your team the power of efficiency. Whether you're working on a single frame, multiple frames, or an entire prototype, feel free to experiment, explore and have fun with the process.
If you’d like to learn and become a LottieFiles for Figma expert, check out our LottieFiles for Figma certification. Remember, with the LottieFiles for Figma plugin, teams can easily incorporate production-ready animation and motion into their designs.
