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

Framer

341
484
+ 1
32
Origami

45
94
+ 1
11
Add tool

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.

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

Advice on Framer and Origami
Joey van Gessel
Design & Growth Engineer at Joey van Gessel Design · | 4 upvotes · 6K 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 · 4.1K 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