Framer vs Ionic vs Origami

Overview

Framer

Stacks365

Followers502

Votes32

GitHub Stars5.9K

Forks477

Origami

Stacks45

Followers95

Votes11

Ionic

Stacks9.5K

Followers8.6K

Votes1.8K

Framer vs Ionic vs Origami: What are the differences?

Development Framework: Framer is primarily a prototyping tool for designers to create interactive mockups using gestures, animations, and transitions, while Ionic is a complete mobile app development framework focused on building cross-platform native-like apps using web technologies like HTML, CSS, and JavaScript. Origami, on the other hand, is a design prototyping tool specifically tailored for creating interactive interfaces and animations.
Platform Support: Framer is designed for macOS and comes with its own Framer X software for designing and prototyping, while Ionic is platform-agnostic and can be used to develop apps for iOS, Android, and web. Origami is compatible with macOS but integrates well with other design and prototyping tools.
Coding Skills Required: Framer requires some knowledge of coding (primarily in JavaScript) to create complex interactions, while Ionic allows developers with web development skills to easily create mobile apps without extensive coding knowledge. Origami offers a visual interface for designing interactions but also requires a basic understanding of code to utilize its full capabilities.
Target Audience: Framer is more suited for designers looking to create high-fidelity interactive prototypes to showcase app concepts, while Ionic is ideal for web developers aiming to build functional mobile applications with a native feel. Origami caters to designers and design teams working on creating immersive user experiences through interactive design elements.
Feature Focus: Framer emphasizes on creating rich animations and transitions to prototype user interactions, Ionic focuses on providing a consistent UI across different platforms using web technologies, while Origami focuses on intuitive interface design and experimenting with advanced animations for mobile applications.
Community Support: Framer has a strong community of designers and developers who actively share resources, plugins, and tutorials, while Ionic boasts a large community of developers contributing to its open-source framework with plugins and community-driven support. Origami has a smaller but dedicated community of design professionals sharing techniques and resources for creating interactive prototypes.

In Summary, Framer, Ionic, and Origami cater to different segments of designers and developers with varied focuses on interactive prototyping, cross-platform app development, and design experimentation, respectively.

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, Ionic

Anonymous

CEO at ME!

Jun 7, 2020

Decided

While with Ionic it is possible to make mobile applications with only web technologies, Flutter is more performant and is easy to use if you are willing to learn Dart, which is a fun language. Plus, it has awesome documentation and, while its ecosystem isn't near as big as JavaScript's is, it has a good package manager called Pub and its packages are generally high quality.

403k views403k

Comments

Thuan

FE Lead at SOLID ENGINEER

Jun 16, 2020

Decided

Javascripts is the most populated language in the world.
Easy to learn & deployed production
Fast development
Strong community
Completed Documents
Native performance with lower RAM used.
Easy to handle native issues by using native code like Java / Objective C
Powered by Facebook.

666k views666k

Comments

Melly

Dec 19, 2019

Needs advice

Hi, we are an early startup (with an iPOC prototype) but need to get started on our MVP, and our tech developers in India recommended a hybrid, and they use Ionic, then we spoke with a software company in the US and he recommended Flutter or React Native. Any advice or input for us on the differences between these? Our app will need Bluetooth GPS for "near me" and social media sharing reviews capability, and also link on the backend with businesses. Thanks in advance for any help you can give!

540k views540k

Comments

Detailed Comparison

Framer	Origami	Ionic
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.	Free and open source, Ionic offers a library of mobile and desktop-optimized HTML, CSS and JS components for building highly interactive apps. Use with Angular, React, Vue, or plain JavaScript.
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.	Performance obsessed;Utilizes Angular and React;Native focused;Beautifully designed;Based on Web Components;
Statistics
GitHub Stars 5.9K	GitHub Stars -	GitHub Stars -
GitHub Forks 477	GitHub Forks -	GitHub Forks -
Stacks 365	Stacks 45	Stacks 9.5K
Followers 502	Followers 95	Followers 8.6K
Votes 32	Votes 11	Votes 1.8K
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	Pros 248 Allows for rapid prototyping 228 Hybrid mobile 208 It's angularjs 186 Free 179 It's javascript, html, and css Cons 20 Not suitable for high performance or UI intensive apps 15 Not meant for game development 2 Not a native app
Integrations
Figma Android OS macOS Sketch iOS	No integrations available	No integrations available

What are some alternatives to Framer, Origami, Ionic?

Flutter

Flutter is a mobile app SDK to help developers and designers build modern mobile apps for iOS and Android.

React Native

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

Xamarin

Xamarin’s Mono-based products enable .NET developers to use their existing code, libraries and tools (including Visual Studio*), as well as skills in .NET and the C# programming language, to create mobile applications for the industry’s most widely-used mobile devices, including Android-based smartphones and tablets, iPhone, iPad and iPod Touch.

NativeScript

NativeScript enables developers to build native apps for iOS, Android and Windows Universal while sharing the application code across the platforms. When building the application UI, developers use our libraries, which abstract the differences between the native platforms.

Apache Cordova

Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript.

Framework7

It is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS native look and feel. All you need to make it work is a simple HTML layout and attached framework's CSS and JS files.

Qt

Qt, a leading cross-platform application and UI framework. With Qt, you can develop applications once and deploy to leading desktop, embedded & mobile targets.

PhoneGap

PhoneGap is a web platform that exposes native mobile device apis and data to JavaScript. PhoneGap is a distribution of Apache Cordova. PhoneGap allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms' native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's sensors, data, and network status.

Expo

It is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps.

Vue Native

Vue Native is a mobile framework to build truly native mobile app using Vue.js. Its is designed to connect React Native and Vue.js. Vue Native is a wrapper around React Native APIs, which allows you to use Vue.js and compose rich mobile User Interface.

Related Comparisons

Framer vs Ionic vs Origami: What are the differences?

Development Framework: Framer is primarily a prototyping tool for designers to create interactive mockups using gestures, animations, and transitions, while Ionic is a complete mobile app development framework focused on building cross-platform native-like apps using web technologies like HTML, CSS, and JavaScript. Origami, on the other hand, is a design prototyping tool specifically tailored for creating interactive interfaces and animations.
Platform Support: Framer is designed for macOS and comes with its own Framer X software for designing and prototyping, while Ionic is platform-agnostic and can be used to develop apps for iOS, Android, and web. Origami is compatible with macOS but integrates well with other design and prototyping tools.
Coding Skills Required: Framer requires some knowledge of coding (primarily in JavaScript) to create complex interactions, while Ionic allows developers with web development skills to easily create mobile apps without extensive coding knowledge. Origami offers a visual interface for designing interactions but also requires a basic understanding of code to utilize its full capabilities.
Target Audience: Framer is more suited for designers looking to create high-fidelity interactive prototypes to showcase app concepts, while Ionic is ideal for web developers aiming to build functional mobile applications with a native feel. Origami caters to designers and design teams working on creating immersive user experiences through interactive design elements.
Feature Focus: Framer emphasizes on creating rich animations and transitions to prototype user interactions, Ionic focuses on providing a consistent UI across different platforms using web technologies, while Origami focuses on intuitive interface design and experimenting with advanced animations for mobile applications.
Community Support: Framer has a strong community of designers and developers who actively share resources, plugins, and tutorials, while Ionic boasts a large community of developers contributing to its open-source framework with plugins and community-driven support. Origami has a smaller but dedicated community of design professionals sharing techniques and resources for creating interactive prototypes.

Framer vs Ionic vs Origami

Overview