Overview

To get a better understanding of Framer, watch the following videos chronologically. These walkthrough videos will give you a high-level overview on workflow as well as deep dives into the Design and Code interfaces.

In this video, you’ll gain a conceptual understanding of how Framer works, as well as the relationship between Design and Code. Next, we’ll show you how to create a simple design using our built-in graphics tool.

Design

Our powerful graphics tool has been built specifically for interaction design work. Learn how to harness its functionalities for a fast and efficient workflow.

In this tutorial video, we walk you through the workflow of creating designs in Framer. We’ll also show you a little more about the tool’s unique functionalities, like layer hierarchy, align tools and relative positioning. By the end, you’ll be able to create a basic screen that you can animate using Code in the next video.

Open the example project Read more about Design

Code

Code is a powerful asset when it comes to design. In Framer, we do much of the heavy lifting with handy code snippets and insertable components.

This tutorial details how to animate the screen you just designed in the previous video. We’ll show you how easy it is to use slider controls, direct manipulation and Auto-Code’s one-click options to create a simple prototype. Code, now powerfully simple.

Open the example project Read more about Code