Handoff Mode

You can use Handoff mode to inspect a design.

While in Handoff mode, the canvas will display distances between layers, and the right panel will show your selected layer’s properties and transitions as code.

To enter Handoff Mode, click the Handoff button on the Toolbar or press the H key.

Note: Collaborators with View access will be limited to Handoff mode and Comment mode.

Distances

To see the distance between one layer and another, click the first layer and then hover your cursor over the second.

Tip: You can see distances when not in Handoff Mode by holding the Option key.

Layers

When you select a layer, the right panel will display the layer’s properties in either CSS or JSX. To switch between languages, use the dropdown at the panel’s top right.

Assets

To export a selected layer as an image, click the Handoff button in the Toolbar, then under the Assets heading, select your desired scale, suffix, and format, then click Export to save the images.

Note: Exporting assets is still under development for Framer Web. To learn more, read our article on asset exporting.

Transitions

If a selected layer includes a transition, the right panel will display the transition’s animation in code as either a Framer Motion transition object or in Swift. To switch between languages, use the dropdown at the panel’s top right.

To learn more, visit our article on Using Framer Animations in Production.

Code Components

When you select a Code Component, the right panel will display the option to view the component’s source code.

To view a Code Component’s code, select the component and click View Code.

Tip: To view layers on the canvas as raw JSX, install FrameSpy, a public package by Steve Ruiz.

Graphics

When you select a Graphic, the right panel will display the Graphic as either SVG code or as a React component. To switch between languages, use the dropdown at the panel’s top right.