Canvas Pages

There are two types of pages you can create: Web and Canvas Pages. Every project comes with a Web Page, called “Home”. If you open existing prototypes in Framer Sites, you’ll also see your Canvas Pages within the Pages section. Canvas Pages can also be created from scratch by going to the File Menu, and clicking “New Canvas Page”.

On Canvas Pages, you get access to Framer’s prototyping features. On selection, you’ll notice the Prototype Connector is back, allowing you to design interactions, such as custom Magic Motion transitions. Plus, if you go to the Insert Menu, you’ll find a Prototyping category there with a few prototyping-specific components.

Adding Prototypes

You can add prototypes to any web page via the Prototype component that is available from the Insert Menu. The Prototype Component allows you to customize your prototype’s presentation—from sizing to device to background colors—via the property panel.

Once you’ve inserted your prototype onto your webpage, you’ll want to set the Content property first. The Content property allows you to pick an entry point for your prototype. For example, if you have 3 Canvas Pages with 3 variations of a prototype flow, you will see 3 options. Within each canvas page, there’s a Home Frame—this Home Frame is also the entry point for your prototype when you’re previewing. In the Content property dropdown you’ll see the names of these Home Frames (plus, the name of the Canvas Pages appended in parentheses as well).

Prototype Properties

You can customize the presentation of your prototype with the following properties.

• Content: pick the entry point of your prototype (home frames).

• Preset: size / device preset, like iPhone 13.

• Orientation: preview in portrait or landscape orientation.

• Device: pick between a realistic or a clay-like device bezel.

• Theme: for realistic devices, set the color of the bezel.

• Hand: an optional hand holding the device, for mobile phones.

• Background: customize the background color of your prototype.

Packages

Packages are not supported in Framer Sites. However, if you have components that rely on external packages, you can try our Instant NPM Beta to import external NPM packages directly from your code components. Join our Community to learn more, or ask questions to the team. We’re happy to help you.