Developers
Back to framer.com
Documentation
Handoff
  • Motion
  • Handshake
  • Guides
  • API Documentation
Developers
  • Motion
  • Handshake
  • Guides
  • API Documentation
Back to framer.com
Getting started
  • Introduction
  • Examples
API
  • Animation
  • Transition
  • Gestures
  • MotionValue
  • Utilities
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Motion resources
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Code in Framer
  • Utilities
  • RenderTarget
  • Property Controls
Community
  • GitHub
  • Discord

Handoff from Framer

How to convert interactive Framer prototypes into production.

Motion is the library driving Framer's animation and gesture capabilities, so converting prototypes into production-level code is usually straightforward.

#Ready to go

Code Components built in Framer are built in the same way you'd build production react components that use `framer-motion`. In Framer, components are isolated as separate files and composed on a canvas, this allows for easy conversion of your code components into your production app where you'll compose them with code.

As for imports from the Framer Library, you can remove usages of Framer-specific helpers such as addPropertyControls and ControlType as they are functions to enhance the use of components only within the Framer canvas.

#Handoff Smart Components to production

We're building a new feature called Handshake, which allows you to use any smart component directly from Framer in your production site. You can try out the alpha on the Handshake page.

NextIntroduction
On this page
  • Ready to go
  • Handoff Smart Components to production

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement