Need advice about which tool to choose?Ask the StackShare community!

Framer

339
482
+ 1
32
Lottie

362
334
+ 1
6
Add tool

Framer vs Lottie: What are the differences?

Key Differences between Framer and Lottie

Framer and Lottie are both tools used for creating dynamic animations, but they differ in several key aspects. The following are the key differences between Framer and Lottie:

  1. Workflow: Framer is a comprehensive design tool that allows for the creation of interactive prototypes using code, while Lottie is a library that enables the use of animations created in Adobe After Effects directly in apps or websites, without the need for extensive coding.

  2. Animation Complexity: Framer provides a wide range of animation options and capabilities, including complex interactions and transitions, allowing for highly customizable and intricate animations. On the other hand, Lottie offers a simplified approach to animations, focusing on the playback of pre-made animations created in After Effects.

  3. Integration: Framer is designed to seamlessly integrate with other design and development tools, such as Sketch and React, allowing for a smooth workflow between different stages of the design process. Lottie, on the other hand, is primarily used for integrating animations created in After Effects into apps and websites, making it more suitable for developers.

  4. Platform Support: Framer is a platform-independent tool, compatible with both iOS and Android, as well as web applications. Lottie, on the other hand, was initially created for iOS and Android platforms, and later expanded to support web development as well.

  5. Ease of Use: Framer requires a certain level of coding knowledge, as it relies on JavaScript and Framer-specific syntax for creating animations. Lottie, on the other hand, offers a more user-friendly approach, as animations can be created in After Effects using a visual interface, and then exported directly for use in apps or websites.

  6. File Size: Framer animations can be smaller in file size compared to Lottie animations, as Framer leverages code-based animations that can be optimized for performance. Lottie animations, on the other hand, tend to have larger file sizes due to their reliance on vector-based assets created in After Effects.

In Summary, Framer is a comprehensive design tool that allows for the creation of interactive prototypes using code, while Lottie is a library that enables the use of pre-made animations created in After Effects in apps or websites, with a simplified approach and no extensive coding required.

Advice on Framer and Lottie
Joey van Gessel
Design & Growth Engineer at Joey van Gessel Design · | 4 upvotes · 5.7K views
Needs advice
on
FramerFramerInVisionInVision
and
ProtoPieProtoPie

Hey!

I want to prototype an app for a school project. I need to test the app from a distance, so it's multiple user tests from different locations when I'm only there online. What do you think is the best combination of tools available? I want to record the user sessions. It should be responsive on different viewports for phones, and it's should be interactive (e.g., testers can actually type in a text box).

Thanks in advance for your advice, looking forward to it. Please also tell me the "why" behind the choice. - Joey

See more
Replies (1)
Christopher Izuchukwu Amadi
UI/UX Designer at Chris Amadi · | 4 upvotes · 3.8K views
Recommends
on
FramerFramer

Hey Joey, I would advise you to use framer. It lets you create realistic prototypes and this allows you to capture usage especially errors from form inputs in a realistic manner as compared to static screens. With framer, you can easily connect to user testing apps such as lookback.io by the click of a button, run your tests and get the best feedback possible.

I hope this helps.

See more
Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.
Learn More
Pros of Framer
Pros of Lottie
  • 18
    Great for prototyping
  • 6
    Free
  • 5
    Fast idea validation
  • 3
    Integrates right with Photoshop
  • 3
    Is free
  • 2
    Multi platform
  • 1
    Open source

Sign up to add or upvote prosMake informed product decisions

What is Framer?

Framer is a JavaScript framework that makes creating realistic prototypes a breeze – complete with filters, spring physics and full 3D effects. Framer Generator is a desktop app that imports the resources and folder hierarchy from Photoshop files (Sketch coming soon). Import your design and immediately start to add interaction and animation.

What is Lottie?

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

Need advice about which tool to choose?Ask the StackShare community!

What companies use Framer?
What companies use Lottie?
See which teams inside your own company are using Framer or Lottie.
Sign up for StackShare EnterpriseLearn More

Sign up to get full access to all the companiesMake informed product decisions

What tools integrate with Framer?
What tools integrate with Lottie?

Sign up to get full access to all the tool integrationsMake informed product decisions

What are some alternatives to Framer and Lottie?
Sketch
Easily create complex shapes with our state-of-the-art vector boolean operations and take advantage of our extensive layer styles.
Figma
Figma is the first interface design tool with real-time collaboration. It keeps everyone on the same page. Focus on the work instead of fighting your tools.
InVision
InVision lets you create stunningly realistic interactive wireframes and prototypes without compromising your creative vision.
Adobe XD
A vector-based tool developed and published by Adobe Inc for designing and prototyping user experience for web and mobile apps.
Origami
Origami is a free toolkit for Quartz Composer—created by the Facebook Design team—that makes interactive design prototyping easy and doesn’t require programming.
See all alternatives