Every canvas element that is drawn, coded or installed from packages can now be distilled into code and extracted from Framer. Currently the supported types are CSS, JSX and SVG. To view the code, simply select one or multiple elements in the canvas. On the property panel to the right you’ll now see a tab called
When a Frame is selected, the default code is set to CSS. You can change this to be JSX from the dropdown menu on the top right. The code will be neatly wrapped, ready to be copied and pasted to work in production. Select portions of it, or click the button below to copy all of it in one go.
If a Graphic element is selected instead, Framer will display its SVG code automatically. Similar to CSS, you can quickly switch from SVG to JSX code using the dropdown.
There are several ways of inspecting code from code components. If the component lives within the file, selecting it on the canvas will display a
Show Code button in the Handoff panel. Click it to see its code displayed in real-time in the integrated code editor. If you select a component installed from a Package, the button will display
Copy Code instead, since the source code of Package components cannot be edited.
To inspect how code components props have been configured, you can install the FrameSpy Package by Steve Ruiz. This is especially useful when working with Design Systems, as developers can see how designers configured the component and do the same in code.
You can also inspect distances right on the canvas using the guides tool. Select any Frame, hold option and hover over any other Frame to see the distances between Frames.
Inspecting the Web Preview
Because every Framer project is ultimately a web project, you can use your browser’s inspector to obtain colors and styles from Framer X projects.
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 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. For developers to use the Web Inspector on Framer projects, they will also need a copy of Framer Included with Team Accounts, or you can give them a web export.
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 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.