Extracting visual specs for Handoff
Because Framer uses web technology to render your designs, you can use the advanced tools available to inspect any part of it. The most ideal tool for inspecting web projects is the Web Inspector. It also happens to be the tool most developers use every day, and comes built in with Framer as well as every browser out there.
Third Party Tools
Because every Framer project is ultimately a web project, you can use many tools for redlining. These are two of our favorite Chrome extensions:
To use these, you can open your project in Chrome using the Live Preview function, or Exporting your project, and uploading it. Anyone with a Chrome browser and these plugins will be able to inspect every part of it.
To learn how the web inspector works watch this Apple Safari Web Inspector Tutorial.
You can find the Web Inspector in Framer by opening the preview and:
- Right-clicking the element in the Preview you’d like to inspect (select Inspect Element).
- Select the Preview hamburger menu and click Inspect.
If you prefer the Chrome Inspector you can enable Live Preview and paste the URL in Chrome.
Layout and Styles
One of the most typical things to inspect is layout and styles and colors like this button:
Select the Frame you want to inspect on the canvas.
Bring up the Web Inspector.
Elements tab and open the
From the left to the right, you can see the button 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.
Guides and Dimensions
You can also inspect dimensions & distance right from the canvas with the guides tool. Select any Frame, hold option and hover over any other Frame to see the distances between Frames.