How to Convert a Prototyping Projects to Sites
Framer allows you to build and ship production websites directly from the canvas. That way you can develop your design from a wireframe, to a prototype all the way to a working web site or project – all from a single interface.
Additionally, Framer allows you to ship prototypes on websites, giving you more presentation options like having multiple prototypes on a site, faster loading and most requested: versioned and immutable links for sharing that make sure your projects never break once you published them.
Adopting the new Framer
While big new changes bring improvements, they can also sometimes be disruptive so we made sure you can switch at your own pace. We’ll offer you the new interface and features on a project basis, so prototyping projects get the current interface but new projects get the new sites interface that supports both prototyping and making web pages.
• Existing prototyping projects will retain the current interface (until you upgrade them).
• New projects will get the new Framer for sites interface (and still support prototyping).
You can upgrade existing prototypes with: File → Duplicate as Site
Upgraded projects get duplicated, so that you’ll never lose any work. After upgrading you’ll likely want to start adding web pages to start adding prototypes and publish.
⚠️ If you need to still create a "legacy" project for some reason you can use a special url: /projects/new and it will create one for you.
Changes for Prototyping
Different Page Types
The obvious biggest change in the new interface is that we now have different types of pages:
Web Pages are pages that represent a page on your site. They have a url, breakpoints and handle scrolling like a browser window will do.
Canvas Pages are pages for general design or prototyping. They can have many multiple Frames that can be linked together to make transitions with magic motion.
Web and canvas pages are the same underlying concept with different options given the prototyping or site context. For example transitions won’t work on web pages because that’s not how linking works and scroll effects won’t work on canvas pages because they don’t handle any scrolling (without an explicit scroll component). You’ll see new features automatically land on both page types if that makes sense for their context.
Sharing (Options)
The share button on prototypes is gone in favor of publishing your prototype to a web page. This way you get faster loading and stable versioned links. You’ll notice that the sharing options have changed, most notably the presentation options (like device, hand, etc.). You can determine the presentation for your published prototypes on web pages with the device component.
Tools
The Screen tool has been replaced for a standard Frame tool (there really never was a difference). The presets for different screens can be found in the properties panel on the right side of the canvas.
Components
Smart and code components will just work like you are used to on both canvas and web pages. You’ll find that the insert menu has an extra collection of prototyping components if you work on a canvas page (like sliders, buttons, etc.). You can still access your team library under Tool → Library.
We will be integrating the library into the new insert menu in the future.
Deprecated
We are leaving some things behind with this new iteration of the product:
Packages are not supported and should be replaced with Modules.
Legacy code files (from before Modules) should be replaced with Modules.
When you upgrade your prototyping to web projects, these will automatically be removed (we will provide you with a warning upfront).