Watch the following videos chronologically to get a high-level overview of Framer.

Get a basic understanding of how Framer works and learn about the relationship between Design and Code.

Learn how to use our built-in graphics tool to create a simple design, which you can then animate using Code in the next video.

Find out how to animate the screen you designed in the previous tutorial and then create a simple prototype using slider controls, direct manipulation, and Auto-Code’s one-click options.

Be sure to download the Design and Code projects to follow along with the tutorials above.


Once you’re ready for in-depth instructions, follow the tutorials below:

Did this answer your question?