Framer
  • Support
  • Using Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support
  • Support
  • Using Framer

Related Articles

  • 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?
  • What are these common Framer terms?

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.

Helpful?Was this article helpful?

0

0

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement