Handoff
You can use the Handoff section in the properties panel to inspect any design created in Framer, from CSS, to distances, to animations.
Where can I see handoff details?
If you are a Viewer in a project, the right panel of the Framer interface will display the Export and Handoff panel.
If you are an Editor in a project, the Export and Handoff panel will be at the bottom of the properties panel to the right side of the Framer interface.
What can I inspect from a Framer project?
Framer enables you to inspect the following specifications of a project:
- Distances between layers
- Visual specs from layers in CSS and JSX
- Graphic layers in SVG and JSX
- Props of Code Components
- Motion specs for transitions in Framer Motion and Swift
- Assets in PNG and JPEG
Distances
To see the distance between one layer and another, click the first layer and then hover your cursor over the second while pressing the Option or Alt key.
Hover over elements to see distances when Handoff is enabled
Visual specifications from layers
When you select a layer, the right panel will display the layer’s properties in either CSS or JSX. To switch between languages, select your preferred lanauge from the dropdown.
Graphic layers / SVG’s
When you select a Graphic, the right panel will display the Graphic as either SVG code or as a React component.
Selecting a Graphic element will display its SVG code within the Handoff panel
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.
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.
The handoff panel showing CSS and Framer Motion props
Asset exporting
To export a selected layer as an image, click the Export panel in the properties panel. Select your desired scale, suffix, and format, then click Export to save the image as either PNG or JPEG.
Note: Asset exporting is currently only available in the Windows and macOS desktop beta apps.