Handoff

DA
Last updated last month

Overview

The best definition of handoff is how developers will extract things from your design to use in their production code”. These things can be sizes, locations, colors and images.

Typically the output of the tools designers use nowadays is a static picture of an interface, so there is a need to “translate” these picture into a meaningful format that developers can work with it. That’s why most teams currently need a different tool for designing and handoff. This is one of the reasons there is such a big disconnect between design & development.

Framer X

Framer X is different than other design tools, because:

  • Everything you draw in Framer is code under the hood.

  • Framer can use code based interactive components right from the canvas.

Basing everything you do on code has the advantages to automatically inherit the same properties and constraints as developers have, but with the freedom that designers require in the ideation phase.

Because Framer uses web technologies to render, everything you see will be what you get in production. There are no steps to translate what your design tool uses to an end state. A great example is SVG drawing, where other tools convert to SVG on export, all artwork you draw in Framer is SVG. Just like all styling is CSS and all code is JavaScript.

So while with most tools handoff is about translation, in Framer X it's about extraction.

Visual Specifications

Because Framer uses the web to render, 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.

Web Inspector

Apple Safari Web Inspector Tutorial (5:33)

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…".

You can organize the Web Inspector for an efficient workflow. It can live docked to the Preview Window or in a separate window.

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'll have to supply them with a Web Export.

Layout and Styles

One of the most typical things to inspect is layout and styles:

  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.

From the left to the right, you can see the button is selected with it's dimensions printed. In the Elements structure you can see the current highlighted element, and in the Styles panel at the top 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 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.

Exporting

CSS

You can select any Frame on the canvas and choose "Copy CSS" to copy the CSS for the specific Frame to your clipboard. From here you can use it in any application. This also works for advanced layout, for example the Stack Component generates Flexbox css.

SVG

With Framer X’s graphic tools, you can work with SVGs directly in the canvas. As Framer X is based in Web technologies, the rendering engine is also the same as the browser, so there is no need for translation - you get the cleanest SVG code straightaway.

  1. Right click the Icon / Illustration you created with your Graphics tool. Select Copy > Copy SVG.

  2. Then paste perfectly formatted SVG code directly in your favorite editor to speed up your development workflow.

Alternatively, you can use the export options below.

Bitmaps

Exporting works exactly as you’d expect. You can create multiple exports for a single frame or shape to cater to multiple resolutions. Simply select a layer and hit export in the bottom right corner of Framer. Select one of the pre-made presets or add your own. Adding a suffix to the preset will append this to your file name. Clicking the suffix dropdown allows you to save assets to organized folders.

Formats

Sizes

Export Formats

JPG, PNG, WEBP, PDF, SVG

Export Sizes

0.5x, 1x, 1.5x, 2x, 3x, 4x

Project

Select a Frame and choose File → Export Web Preview… to export a web project. Just open the generated index.html file from the folder in Safari or Chrome. You can share the folder with anyone or host it online with a service like Zeit Now or Netlify Drop.

We currently don't offer hosting services for Framer X (Framer Cloud) while we are working on a better online sharing and collaboration experience for teams, coming soon.

Code

Because everything you draw in Framer is code, you can inspect all code under the hood.

  • To see the raw html, you can either export the project or use the web inspector.

  • To see the React (JSX) code, you can install FrameSpy from the store.

You can theoretically also directly use your design (and obviously code component) in any React project, but you need to think if this is really what you want. Code generated by tools is not always the code you want to use in production. Framer is very much optimized to use production code, but not so much for generating production code.

To try it anyway do the following:

  1. Create a new Framer project and create some components on the canvas.

  2. Name the components so that you can import them nicely in code.

  3. While holding the option button click File → Save As... and select "Framer X (Folder)".

  4. Move your new .framerfx folder inside your React project.

Inside your React project now simply import any component from the canvas and use it like you would use any other React component.

import { MyComponent } from "project.framerfx/canvas"
function App() {
return <MyComponent />
}

This is a beta feature, might not work on all components and will likely change in the future.

Animations

The Framer animation library will allow you to export animation curves to any major platform: iOS (native, pop), Android (Rebound) and Web (Motion, Velocity).

This feature is coming soon.