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.

Coding Basics

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.

Animation Logic

In this video you’re going to add animations to your designs and understand how to use them to create intuitive prototypes in Framer.

FlowComponent

Learn how to use a premade component to connect and segue between multiple screens, each with their own unique animation.

Minigames

In this video you’ll create a mini-game using the FlowComponent, multiple screens, states and animations.

Minigames II

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.

Health Monitor

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.

Uber's Navigation

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.

Like Button

Always wanted to prototype the 'Like' button? Learn how to recreate this popular social media UI interaction in Framer.

Instagram Stories

One of today’s most popular social networking features is Instagram Stories. Learn how to recreate it in Framer, along with some additional features.

Twitter Moments

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.

Prototyping Quora

Everyone’s favorite Q&A platform, Quora, gets an app redesign. This video is recommended for advanced users.

Instagram Feed

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.

Facebook Messenger

Dive deeper into Framer with this intermediate level video that teaches you how to implement symbol modules by recreating Facebook Messenger.

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.