Interaction design, made easy.

Just one-click to insert animation with Auto-Code. Customize further with simple slider controls and direct manipulation. Use our library of components to add premade native interactions and multi-screen app flows. It’s the simplicity of WYSIWYG, backed by the power of code.

One-click code, simple logic.

Auto-Code makes bringing your designs to life as simple as inserting an animation or event. Style using the slider controls or by editing directly in the canvas. No matter how you like to work, Framer always keeps your code intact for you.

  • Insert layers, animations, events and snippets.

  • Full-featured code editor.

  • Smart auto-complete.

  • In-app documentation.

  • Error inspector.

Real-time, device agnostic.

Detach for dual-screen or snap to chrome for a tighter workspace. It’s a smart preview that recalibrates to every device type, giving you visual feedback on every tweak made in Code or Design mode. The perfect environment for responsive design.

  • Position layers directly on the canvas.

  • Visual property editing.

  • Device picker.

  • Detachable canvas.

  • Real-time canvas syncing.

From static to motion, real quick.

Connect layers from our Design tab or import artboards from Sketch, Figma and Photoshop. Then, add logic using code. Full integration makes it easy to toggle back and forth as you work. It’s iteration at its finest — go from static design to high-fidelity prototype in no time.

See how Uber leverages Framer for their user testing.

Read the story