Framer
brings you
closer to real.

Most design and prototyping tools today are just systems to paint your ideas on a canvas. Framer is the only tool built on web technologies and gives you a truly interactive and realistic output in less time.

See Framer for teams

Flexible layouts at the forefront.

Framer helps you iterate and animate interface ideas for your next app, website, or product—starting with powerful layouts.

Learn more about layout

Thousands of building blocks at your fingertips.

Don’t want to build something yourself? The Insert Menu is your free library full of components for easy prototypes in minutes. Just search, browse, and drag and drop into your project.

Smart components, no code required.

Real production components display different visual states when you interact with them, so the components you prototype with should too.

Get started—it’s free

Infinite
visual
Variants.

Easily add hover and pressed states to your components, then tailor them even further by adding infinite visual Variants to express every scenario.

Control
every
Variable.

Unlock infinite permutations for each of your components by adding Variables. Variables can be any property from color to border radius.

Combine
and compose.

Nest Smart Components to create larger more complex interactions such as image galleries or music players. Compose them all together for endless possibilities.

Motion that
works like mag
c.

Customize how the elements you design animate across screen transitions. Be as creative as you want. It’s all the same to your developer because they can just copy and paste the exact animation values from Framer to use in production.

Get started—it’s free

Library

Player

Share polished work every time.

With custom backgrounds, device frames, and device hands, Framer has every presentation setting you need to ensure your work is always ready for display.

And the best part—all you have to do is send a link to share your prototype with the world.

User testing with high fidelity prototypes means users fully experience your designs, no need to explain how interactions will look when they’re built—they’re seeing it all now.

Learn more about user testing

Elevate anything with code.

Framer is the only tool that allows you to leverage code to enhance workflows and prototypes. While there is a full set of visual tools to create advanced prototypes in the canvas, you can push the boundaries by creating unique custom components and functions with code.

Learn more about code in Framer

Photo