You can use Handoff mode to inspect a design.
To enter Handoff Mode, click the Handoff button on the Toolbar or press the H key.
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
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.
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.
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.
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.
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.