Invent, design and experiment with interaction

Free Trial

Available on Mac

  • Innovative Prototyping

    Framer is a new creative tool to build interaction and animation prototypes.

    Learn Framer
  • Rapid Experimentation

    Connect pixels to behavior and discover exciting new ways of interaction design.

    Read Docs
  • Code

    Built on Framer.js, an open source prototyping framework. Low learning curve with CoffeeScript.

    Preview

    Instant visual feedback while you're working. Runs great on iOS and Android with WebKit.

    Interaction

    Use state machines to define properties and set up complex interactions. Full gesture support.

    Animation

    Animate any object in 3D space with spring physics. Hardware accelerated for 60 FPS.

    High Fidelity Prototypes

    Prototyping helps designers, developers and many others effectively communicate concepts, ranging from micro-interactions to entire onboarding flows.

    See all examples

    Design for Any Device

    Explore interactions for desktop apps, websites or mobile platforms. Choose from 8 pre-installed devices in multiple colors or quickly modify your exact setup.

    Design with Framer

    Watch an hour-long presentation about prototyping, design tools and the the basic building blocks on which Framer was built.

    Watch Video

    Complete your design workflow

    Finished designing mockups? Import them into Framer with a single click. Start adding interactions and animations to bring your designs to life.

    Learn About Import

    Build and experience your designs

    When designing for mobile, the best way to validate concepts is to experience them on the actual device. Preview your prototypes in realtime with Mirror.

    Learn About Mirror

    Inspect your prototypes

    Prototyping is all about getting the details just right. And with Framer Studio’s built in Layer Inspector, you have the right tool for the job. Import a file from Sketch or Photoshop and your layer structure is right there. Ready to inspect and bring to life. Hover over any layer, to get detailed information about its position and size.

    Download example file
    • Editor
    • CoffeeScript

      A more legible and minimal way to write JavaScript.

    • Snippets

      Small re-usable codeblocks to speed up your workflow.

    • Inline Errors

      Discover errors and inspect them with Web Inspector.

    • Auto-Complete

      Including functions, properties and variables you define.

    • Viewer
    • Visual Feedback

      Changes are rendered in the viewer and on mobile devices.

    • Present

      Use the full-screen mode for immersive demos.

    • Preview Modes

      Create prototypes for Desktop, Tablet and Mobile.

    • Zoom & Rotate

      Work in any orientation, pixel-density or zoom-to-fit.

    • Effects
    • Filters

      Blur, brightness, contrast, hue, saturation and more.

    • Animation Curves

      Linear, easing and three different spring physic engines.

    • 3D Effects

      Transform and animate any layer in 3D space.

    • State Machine

      Create complex interactions with sets of animatable properties.

    • Workflow
    • Sharing

      Upload and share your prototypes with a single click.

    • Mirror

      Preview your prototypes on any iOS or Android device.

    • Webkit 2.0

      Built on the latest, fastest web technology.

    • Drag & Drop

      Drop images from anywhere directly on the viewer.