LottieFiles vs Penpot
Both are design tools. Here is what separates them.
| LottieFiles | Penpot | |
|---|---|---|
| Category | Design | Design |
| Pricing model | freemium | open-source |
| Price from | Freemium | Open source |
| Upvotes | 18 | 7 |
| What it does | Vector animations that ship as JSON and stay sharp at any size. | Open-source design and prototyping you can host yourself. |
What LottieFiles is
LottieFiles is a set of tools for creating, storing and shipping Lottie animations. A Lottie is a JSON based animation file format that can be delivered to any platform as easily as a static asset, and because it is vector based it scales across device sizes without pixelation. The format itself is open source under the MIT licence and not tied to a single vendor. dotLottie is a packaging layer over Lottie JSON, and the documentation covers when to choose each of the two. Lottie Creator is the browser based editor for building and editing these files. It supports keyframes with easing and interpolation, layers, imported assets, nested scenes, trim path, gradient fills, segments and mattes, animates imported SVG files, and handles kinetic typography for text. Its plugins include Duplicator, AI Prompt to Vector and Motion Copilot. For designers working elsewhere, there are plugins for Figma, After Effects and Canva, with the Figma plugin adding raster to vector conversion and an AI prompt to vector tool. Playback is handled by published runtimes for JavaScript, React, Vue, Svelte, React Native, Flutter, iOS and Android. The core web player is on npm, renders both dotLottie and Lottie JSON, and has dedicated wrapper packages for React, Vue, Svelte and Web Components around a framework agnostic core. The dotLottie runtime APIs are TypeScript first, and the web player exposes control over playback, layout, theming, multi animation files and interactive state machines, with documentation covering web worker and GPU rendering options. dotLottie rendering uses the ThorVG graphics library. One caveat is worth knowing before a complex animation is committed to: Lottie does not support every Adobe After Effects feature, and per platform compatibility tables list the gaps. Expressions, images, text glyphs, masks, interpolation, strokes and fills are among the properties supported across platforms. Four plan tiers are sold: Free, Individual, Team and Enterprise. Individual adds private projects and private uploads for solo users. Team is positioned for commercial work by teams of fewer than ten, with a shared workspace and shared team assets. Enterprise is aimed at teams of ten or more and adds SSO, custom permissions, priority support, custom integrations and audit features. Subscriptions are billed annually and there is no standard monthly payment plan. Adding a team member part way through a term triggers an immediate pro rated charge equal to the monthly rate multiplied by the months remaining, though a seat freed by a departing member can be reassigned to a replacement at no extra charge. Premium animations come only with a paid subscription and cannot be bought one at a time. Students and educators over 13 at institutions in 15 supported countries can apply for the Education Plan, a free workspace that runs for a year and renews by repeating the verification. It excludes premium animations and the file optimiser, and forbids commercial use such as advertising, monetised content and paid client work.
What Penpot is
Penpot is an open-source design and prototyping tool that runs in a browser and can be hosted on your own infrastructure. It is aimed at teams who want their design files on hardware they control, and at designers and developers who would rather work in the same file format than hand work across a wall. The distinguishing decision is that Penpot builds on open web standards rather than a proprietary rendering model. Layouts follow CSS behaviour, so what a designer arranges on the canvas corresponds to how a browser will lay it out. Designs can be expressed directly as HTML, CSS, JSON and SVG, and the tool generates code in those formats, which makes the handoff a matter of reading the file rather than reinterpreting a picture of it. Developers can pull detailed specifications of styles and content from any object. Several people can work on the same file at once, in real time. Projects and files are unlimited on every plan. Custom fonts can be uploaded and managed as a shared team library. Objects export to PDF, SVG, PNG and JPG. Wireframing and prototyping are built in and work on any device, since the whole thing is a web application. It extends through a built-in plugin system, with community plugins available and the option to write your own. There is an open API, webhooks for integrating with external applications, and a GitHub integration for teams keeping design and code alongside each other. Pricing is unusually simple. The Professional plan is free at zero dollars per user per month and is the one most individuals and small teams will use. The Unlimited plan adds 30 days of autosaved version history. Enterprise extends that to 90 days and adds single sign-on. Because the project is open source, the self-hosted route is available at any of these sizes, and a team that outgrows the hosted service or needs its files inside its own network can move without changing tools.
We are not affiliated with either product. Upvote counts come from the published formula and neither position was paid for.