Handing off from the desktop app

Note: This article refers to the Framer desktop app. Learn more about the differences between the Framer web and desktop app here.

To hand off a Framer project made with the desktop app, the quickest way is to upload it to Framer on the web and invite others to your project to view your project specifications.

However, it is also possible to hand off your project offline by exporting your project as a web preview and sharing the compiled version of your project.

Inspecting a project

Because every Framer project is ultimately a web-based project, you can use your browser’s inspector to obtain colors and styles from Framer projects.

If you export your project, Framer compiles your project into a folder ready to be shared. Anyone with a modern browser will be able to open the folder’s index.html file and inspect every part of it with a web inspector.

Web preview of a prototype created

To learn how the web inspector works, for instance with Safari, watch this Apple Safari Web Inspector Tutorial. You can find the Web Inspector in the Framer Desktop app by opening the preview and:

• Right-clicking the element you’d like to inspect (select Inspect Element).
• Select the Preview hamburger menu and click Inspect.

For developers inspecting your project, you can give them the web export.

1. Select the Frame you want to inspect on the canvas
2. Bring up the Web Inspector
3. Select the Elements tab and open the Styles drawer

Inspecting your project with the Web Inspector

From the left to the right, you can see the frame is selected with its dimensions listed. In the Elements structure you can see the current highlighted element, and in the Styles panel on the right, you can see all the styles that this element is using, from colors to fonts to position to background.

You can edit any CSS or HTML properties directly in the Inspector and immediately see the result in the preview window.