Framer
Blog
  • Latest
  • Product
  • Editorial
  • Customers
  • Guides
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support
Blog
  • Latest
  • Product
  • Editorial
  • Customers
  • Guides

Developer Handoff in Framer

Canvas, code, or components—no matter how you design, the new Handoff mode now allows you to extract clean code for production.

Edoardo Mercati

EM

by Edoardo Mercati

Edoardo Mercati

EM

Twitter

Edoardo Mercati

Designer at Framer.

Let’s face it—interface design handoff has never been easy. But as the lines between design and development begin to blur, we’ve become more committed that ever to build a tool that helps facilitate that workflow. And today, we began the first step toward launching a frictionless developer experience in Framer. Whether you prefer to design entirely on the canvas, build code components, use pre-built Store packages or any combination of the above, everything is now automatically distilled and exposed as clean code in a new Handoff mode, right within the app.

At this stage, Handoff generates CSS, JSX and SVG, though we plan to support more codebases in the future, including mobile specific ones like Android and iOS.

Getting started

To enable the new Handoff mode, simply select one or more elements on the canvas. In your right hand panel, you’ll now be able to toggle between your properties panel and Handoff mode. Click on Handoff and you’ll notice that we’ve also moved the Export panel here and renamed it to Assets. This brings your entire handoff workflow into one convenient place.

When a Frame is selected, the code automatically defaults to CSS, though you can use the dropdown to adjust to JSX. If a graphic element is selected instead, Framer will show a preview of its SVG code, which you can change to JSX. The displayed code is neatly wrapped and ready to be copied to your developer and pasted to production.

There’s more to come

This is just the first step we’ve taken toward ensuring a more streamlined developer workflow in Framer. So while this version doesn’t include handoff for animations, we do plan to add support for Framer Motion, alongside many other improvements. And that’s where you come in—tell us about your ideal developer handoff experience by taking this 2-minute survey, which will influence the future of our product. For more resources, check out:

  • Advanced documentation on Developer Handoff
  • Everything else we updated in X44
  • A roundup of recently launched Framer features

Share this article

TwitterFacebookLinkedIn

Bring your best ideas to life

Subscribe to get fresh prototyping stories, tips, and resources delivered straight to your inbox.

Visual

Guides

Framer Team Handbook

December 22, 2020

Visual

Customers

Replai Cuts Product Development Time from Weeks to Days

December 10, 2020

Visual

Guides

Switching from Sketch to Framer

November 19, 2020

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