Explore every idea with Framer
You need the potential to design something completely new. Prototyping shouldn’t limit you. Framer is a prototyping tool that uses code to make anything possible. Pioneer new patterns and make groundbreaking design. Find the best solution, not just the expected one.
Why write code?
Learning to code allows you to explore every creative concept—not just replicate patterns. Code isn’t just for engineers. If you give it a try, we think you’ll agree code is one of the most powerful tools a designer can have.
Learn prototyping with FramerDesign for any device
Prototype for mobile platforms, desktop apps, and websites. When you need to support multiple platforms, Framer has you covered. You can prototype for any device or choose from 8 default devices in every color—even TV's and Android.
Set your creativity loose
Framer does a lot more than transitions or quick animations. Design using real data. Build real interfaces with customizable components. Test and validate all of your creative concepts.
Motion
Fine tune every animation until your layers move in harmony.
Touch
Set up drag, scroll or page gestures with components.
Depth
Respond to orientation changes and tilt layers in 3D space.
Input
Capture keyboard input to test and work with actual user data.
Data
Pull in profile photos or user names–anything with an API.
Adaptive
Make responsive prototypes that adapt to user interaction.
Framer fits your design process
Import graphics directly from Sketch or Photoshop. Need to change something? Simply re-import. And when you’re done, gather feedback by sharing your work on a mobile device.
Import
Turn your static designs into a working prototype.
Preview
Preview on any device with a browser, using Mirror.
Present
Present in full-screen, for a focused experience.
Share
Quickly share a URL for hassle-free user testing.
Video Tutorials
Learn how to turn your Sketch designs into working prototypes, by adding native interactions to your mockup.
View Transitions
Tutorial
Message View
Tutorial
Image Detail
Tutorial
iOS Lockscreen
Tutorial
We help you learn to code
Framer makes the learning curve less steep, with a simple syntax and smart autocomplete. We also provide reusable code examples, clear tutorials, and quality documentation.
Code faster with context-aware suggestions.
Smart Autocomplete
Inspect layers and their code references.
Layer Highlighting
“Using Framer is not just immensely rewarding as a tool to learn code, but it will also allow you to take your work to the next level with virtually no limit.”
See prototype
“I build with Framer so my creativity won’t get hampered by the limitations of the tool I’m using. It lets me focus on the details of every interaction.”
Read on Wired
“For me, prototyping and design are the same thing, so I'm in Framer Studio nearly every day. It's easily one of my most used and beloved design tools.”
See prototype