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.
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:
Bring your best ideas to life
Subscribe to get fresh prototyping stories, tips, and resources delivered straight to your inbox.
