A Comprehensive Guide
Cordova’s Comprehensive Guide features a series of videos that walk you through designing and coding in Framer using hands-on projects.
Some of the information in these videos may be outdated. For more details, visit our Help Center.
Code and Animation
This 14 minute video guides you through the basic elements of Framer, including writing your first line of code to create a simple but cool animation.
Auto-Code and Sound Effects
In this video, you’ll learn more about some important features in Framer: Auto-code and sound effects. You’ll also learn how to practice writing code manually to create better prototypes.
Using simple syntax and helpful analogies, this video shows you how much of the code in Framer is based on simple logic. You’ll learn the basics of Coffeescript and discover how to bring your designs to life.
In this video you’re going to add animations to your designs and understand how to use them to create intuitive prototypes in Framer.
Learn how to use a premade component to connect and segue between multiple screens, each with their own unique animation.
In this video you’ll create a mini-game using the FlowComponent, multiple screens, states and animations.
In Part 2, you’ll explore more code variants and algorithms. You’ll also bring together everything learned in previous tutorials to create one working prototype.
Learn about the ScrollComponent, intervals, loops and more. Once you’re ready, you’ll combine everything you learned to build a Health Monitor prototype.
Health Monitor II
In this video, you’ll continue with the Health Monitor project from the previous video and dive deeper into ScrollComponent, intervals and loops.
Discover how simple it is to create an Uber-style prototype featuring a map with moving elements. You’ll also be re-using techniques learned in previous tutorials.
Heart Rate Monitor
In this intermediate video you’ll learn how to use simple math to power your code and prototype a realistic heart rate monitor.
Always wanted to prototype the 'Like' button? Learn how to recreate this popular social media UI interaction in Framer.
One of today’s most popular social networking features is Instagram Stories. Learn how to recreate it in Framer, along with some additional features.
Moments are curated stories showcasing the best of what’s happening on Twitter. In this video you'll learn how to recreate it in Framer.
Everyone’s favorite Q&A platform, Quora, gets an app redesign. This video is recommended for advanced users.
One of the best ways to get better at prototyping is by recreating existing apps. In this intermediate-level video, you’ll design a dark mode version of Instagram.