While the primary focus of GUI Weeks 2 and 3 will be on Origami Studio (3 sessions), we are also providing you with an opportunity to learn about Framer Web in one session.
Why might you choose Framer over Origami?
<aside> 💡 Prerequisite for this session Please spend 1 hour before this class going through the Framer video tutorials. We will not be covering the "No code" features of Framer in this session.
</aside>
Framer is a Javascript-based prototyping tool targeted at designers who want to prototype interfaces. It was invented at Facebook around the same time as Origami, and the founders left Facebook to pursue it as its own company. The original implementation was a "code-first" open-source Coffeescript library with imperative animation and interaction functions (framer.js) that was meant to be used with exported assets from Photoshop.
Framer Classic, completely Coffeescript-based prototyping
Over time, it grew in functionality, and the team built a macOS-only IDE around it called Framer Studio (now referred to as Framer Classic) and started charging for its product. A few years ago, they announced a reboot, called Framer X, where they re-implemented Framer in a declarative way using React, which also added more visual tools, like the ability to draw with your cursor instead of using code.
Framer X, more visual tooling like a layer property inspector and basic drawing tools.
The latest version, Framer Web, came out a few months ago and co-exists with Framer X (now called Framer Desktop). Framer Web is targeted at folks who don't know how to code at all, and represents a huge shift in Framer's strategy (historically "code-first"), and is free to use on any platform.
Framer Web, which we'll be using.
Importing from Figma is pretty straightforward using the Import button, but as you can see from the documentation, not everything in Figma will be preserved when importing.
This is because it's converting everything from Framer into a native Framer component, and there isn't a 1:1 support for every feature Figma layers has in Framer's core components.
When you run into a layer that doesn't import properly, you may need to resort to exporting image assets from Figma, and dragging them into Framer.
It's important to understand the history of Framer because it explains a lot of the choices the team made and why certain features behave a certain way. For example, knowing that Framer is now React-based will help you understand why the Framer API is designed the way it is.