Framer vs Origami

Overview

Framer

Stacks365

Followers502

Votes32

GitHub Stars5.9K

Forks477

Origami

Stacks45

Followers95

Votes11

Framer vs Origami: What are the differences?

Introduction

Framer and Origami are both prototyping tools used for designing user interfaces. While they have similarities in terms of their purpose and functionality, there are several key differences that set them apart.

Integration with Design Tools: Framer allows designers to import their design files directly from tools like Sketch or Figma, enabling a seamless transition from design to prototyping. On the other hand, Origami is primarily built as a plugin for the design software, Quartz Composer. This means that designers need to use Quartz Composer to create their designs before using Origami for prototyping.
Programming Language: Framer uses JavaScript as its programming language, which is a widely-used and versatile language for web and app development. Origami, on the other hand, uses its own custom visual programming language called "Origami Patch Language" (OPL). This makes Framer more accessible to designers who already have some knowledge of web development.
Community and Documentation: Framer has a vibrant and active community of designers and developers, offering a wide range of resources, tutorials, and plugins. The Framer Docs provide extensive documentation and examples, making it easier for newcomers to get started. On the other hand, the Origami community and documentation are not as extensive as Framer's, which might make it slightly more challenging for beginners.
Platforms and Export Options: Framer is designed to work seamlessly across multiple platforms, including web, iOS, and Android. It offers various export options, allowing designers to share their prototypes easily with stakeholders. Origami, on the other hand, is primarily focused on iOS app prototyping and does not offer as many export options as Framer.
Animation and Interaction Capabilities: Framer provides more advanced animation and interaction capabilities compared to Origami. It offers a wide range of pre-built animation curves, physics simulation, and gesture recognition out-of-the-box. Origami focuses more on basic interaction components and animations, making it suitable for simpler prototypes.
Pricing and Licensing: Framer has a subscription-based pricing model, offering different pricing tiers for individual designers and teams. It also has a free trial option. Origami, on the other hand, is completely free to use, which makes it more accessible to designers who are looking for a budget-friendly option.

In Summary, Framer is more integrated with popular design tools, uses JavaScript as its programming language, has a larger community and documentation, supports multiple platforms, offers advanced animation capabilities, and comes with a subscription-based pricing model. Origami, on the other hand, is primarily designed for iOS prototyping, uses its own visual programming language, has a smaller community and documentation, has limited export options, provides basic interaction components, and is completely free to use.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on Framer, Origami

Joey

Design & Growth Engineer at Joey van Gessel Design

Feb 12, 2021

Needs advice

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

6.67k views6.67k

Comments

Detailed Comparison

Framer	Origami
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.	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.
Generate assets out of Photoshop to set up new projects.;Animate any layer in 3D space with spring physics and bezier curves.;Hardware accelerated for high frame rates, based on CSS transforms.;Works on desktop, mobile and tablets. Plays well with WebKit.	Switch- Toggles between on and off and remembers its current state.;Scroll- Lets you allow the user to scroll an image.;Bouncy Animation- Animate a changing value with a bouncy spring.;Classic Animation- Animate a changing number with a specified duration and easing curve.;Transition- Takes a number in the range of 0 to 1 and converts it to a range starting with Start Value and ending in End Value.;Color Transition- Fades between two colors.
Statistics
GitHub Stars 5.9K	GitHub Stars -
GitHub Forks 477	GitHub Forks -
Stacks 365	Stacks 45
Followers 502	Followers 95
Votes 32	Votes 11
Pros & Cons
Pros 18 Great for prototyping 6 Free 5 Fast idea validation 3 Integrates right with Photoshop	Pros 6 Free 3 Visualize animations and transitions 2 The Awesomeness
Integrations
Figma Android OS macOS Sketch iOS	No integrations available

What are some alternatives to Framer, Origami?

ProtoPie

It is the easiest tool used to turn your UI/UX design ideas into highly interactive prototypes for mobile, desktop, web, all the way to IoT. ProtoPie runs on macOS & Windows and the player app is on iOS and Android.

Supernova

Supernova converts any mobile design to full-fledged native applications, giving the developers extra time to do actual coding. No need to export resources, write navigation, connect it to components created by hand, read styles, apply styles, copy-paste information..

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!

Material

Express your creativity with Material, an animation and graphics framework for Google's Material Design and Apple's Flat UI in Swift.

Principle

It makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a multi-screen app, or new interactions and animations, it helps you create designs that look and feel amazing.

Fuse

It is a set of user experience development tools that unify design, prototyping and implementation of high quality, native apps for iOS and Android.

Flinto

It is a Mac app used by designers around the world to create interactive and animated prototypes of their app designs. It lets designers quickly make interactive prototypes of their mobile, desktop, or web apps.

Fiber

Fiber UI Kit is the perfect starting place for your next project. Each element has been designed to work independently or as one seamless flow. It’s a full-fledged prototype with customizable components.

Pop

Pop is an extensible animation engine for iOS and OS X. In addition to basic static animations, it supports spring and decay dynamic animations, making it useful for building realistic, physics-based interactions. The API allows quick integration with existing Objective-C codebases and enables the animation of any property on any object. It's a mature and well-tested framework that drives all the animations and transitions in Paper.

Avocado

Avocado is an open source interaction design toolbox built by IDEO. It enables designers to make quick interactive prototypes without writing a line of code. Built on top of Facebook's Origami framework, Avocado provides ready-to-use patches that can be easily combined to create fully-customized prototypes. Official announcement: http://labs.ideo.com/2014/05/27/avocado/

Related Comparisons

Framer vs Origami: What are the differences?

Introduction

Integration with Design Tools: Framer allows designers to import their design files directly from tools like Sketch or Figma, enabling a seamless transition from design to prototyping. On the other hand, Origami is primarily built as a plugin for the design software, Quartz Composer. This means that designers need to use Quartz Composer to create their designs before using Origami for prototyping.
Programming Language: Framer uses JavaScript as its programming language, which is a widely-used and versatile language for web and app development. Origami, on the other hand, uses its own custom visual programming language called "Origami Patch Language" (OPL). This makes Framer more accessible to designers who already have some knowledge of web development.
Community and Documentation: Framer has a vibrant and active community of designers and developers, offering a wide range of resources, tutorials, and plugins. The Framer Docs provide extensive documentation and examples, making it easier for newcomers to get started. On the other hand, the Origami community and documentation are not as extensive as Framer's, which might make it slightly more challenging for beginners.
Platforms and Export Options: Framer is designed to work seamlessly across multiple platforms, including web, iOS, and Android. It offers various export options, allowing designers to share their prototypes easily with stakeholders. Origami, on the other hand, is primarily focused on iOS app prototyping and does not offer as many export options as Framer.
Animation and Interaction Capabilities: Framer provides more advanced animation and interaction capabilities compared to Origami. It offers a wide range of pre-built animation curves, physics simulation, and gesture recognition out-of-the-box. Origami focuses more on basic interaction components and animations, making it suitable for simpler prototypes.
Pricing and Licensing: Framer has a subscription-based pricing model, offering different pricing tiers for individual designers and teams. It also has a free trial option. Origami, on the other hand, is completely free to use, which makes it more accessible to designers who are looking for a budget-friendly option.

Framer vs Origami

Overview