Framer
  • Support
  • Using Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support
  • Support
  • Using Framer

Related Articles

  • Deprecated Code Component Width and Height Props
  • Using an external code editor with the desktop app
  • Code Editor
  • Using Code Overrides
  • Why do my exported assets look different than on the canvas?

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

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

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

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.

Download the desktop app here

Helpful?Was this article helpful?

0

0

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • Input Kitnew
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement