Framer Studio is a new creative tool to build interaction and animation prototypes. It allows you to connect pixels to behavior and discover exciting new ways of interaction design.
Design everything with Framer
You need the potential to design something completely new. Framer is a design tool that uses code to make anything possible. Pioneer new patterns and groundbreaking designs. 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.
Design for any device
Design for iOS, Android, Mac OS, Windows and Web. Framer has you covered for any platform you need. Choose from over 18 devices in a ton of colors from Apple, Google and HTC, Microsoft and Samsung.
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.
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.
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.
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.
Whats new in v72?
animation.finish() to directly jump to a layer’s final state.
Support for inline base64 images with Utils.isLocalAssetUrl().
The default animation options of PageComponents.
Layer names of "0" to correctly show up in the layer panel.
stateCycle() to keep using the set animation options.
State animations to correctly listen to options.start.
Animations to not be executed when no properties were changed.
Requirements: OS X version: 10.10 or higher