Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Speedruns
    • Starter Kit
    • Sessions
  • Pricing
  • Blog
  • Updates
  • Support

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
Gradient

Interaction at the forefront.

Start designing in Framer and get to production faster with prototypes that mirror the real deal. From pixels to wireframes to prototypes, interaction is at the core of everything you create.

Start prototyping for freeView Examples
Gradient

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.

Tools
Add screens, buttons, toggles, gifs, avatars & so much more
Find components and packages…
Insert Menu
Insert Menu
Insert Menu
Player
Insert Menu
Album
Insert Menu

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

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
Gradient

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.

SettingsToolsShare
Gradient

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 using code in Framer
Photo
Map
Lottie
Video
Input
Time

16:31

Get Framer for teams.

Equip your team with a collaborative prototyping tool that empowers everyone to launch better products, faster.

Learn more about teamsView upgrade options

Framer

  • Why Framernew
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Speedruns
  • Starter Kit
  • Sessions

Resources

  • Packages
  • API
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement