Surprisingly simple.

Add animation with one click. Customize with simple slider controls and direct manipulation. Insert pre-made native interactions and multi-screen app flows. Framer makes interactive design simple.

Bring your designs to life with pre-made interactions and animations.

  • Visual code editing

  • Reusable code snippets

  • Smart auto-complete

Auto-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.

  • Insert layers, animations, events and snippets

  • Full-featured code editor

  • Smart auto-complete

  • In-app documentation

  • Error inspector

Preview Window

Preview your work in real time.

Get visual feedback on every tweak you make in Design or Code. It’s a window that calibrates to every device type and syncs in real time with your canvas. Detach for dual-screen or snap to chrome for a tighter workspace.

  • Position layers directly on the canvas

  • Visual property editing

  • Device picker

  • Detachable canvas

  • Real-time canvas syncing

Simple Flows

Design multi-screen app flows—fast.

Create artboards in Design, then insert the FlowComponent in Code to connect the screens. We even incorporated real physics and history management.

  • Push
  • Scroll
  • Overlays

Interactive Components

The most popular interactions, bundled.

Just one click to insert blocks of code, then customize elements to perfection. Design everything from scrolling, pagination, and sliders to an entire virtual reality environment. Components are simple building blocks for powering your next design—and now you have a whole library to choose from.

Design

Use the smartest graphics tool for designing across multiple devices.

Read More

Collaborate

Share your designs with teammates and easily preview work on native devices.

Read More