A collection of courses, articles and videos.

Design + Code

Over 200,000 designers have viewed Meng To’s Framer Courses. Take this one to learn how to create complex user interactions and take your code components to the next level with Framer Playground.

Visit Playground website › Visit website ›

Framer X Book

Read Tes Mat's extensive follow-up to the Framer Book, dedicated to Framer X. Learn all about Framer Playground and what it's changed and improved.

Visit website ›

Framer X Videos

Follow web and motion designer Athanasia Lykoudi’s ongoing video course and learn all about Framer X, from visual design to code overrides.

Visit channel ›

Prototyping with React

A course that will teach you how to build real-world prototypes in Framer X and help you pickup JavaScript and React.

Visit website ›


Phillip Davis built this course to introduce designers to React, within the context of interface design.

Visit website ›

React For Designers

Zach Johnston put together a handy 3-step guide to lead designers to the best resources for learning React.

Visit website ›

Layout Tools

Learn how automated grouping, responsive layouts, and flexible stacks make for a speedy workflow in Framer X.

Watch video

Flexible Stacks

Jay Stakelon shows you how to make reusable design component, nested list, and photo grid using Framer X’s popular layout design feature.

Watch video

Graphic Tools

Design + Code shows you how to design everything from custom icons to intricate illustrations using an advanced path editor, graphics container and SVG export.

Visit website ›

Design Components

From simple reusable visual elements to entire design systems, learn how to speed up your workflow with design components in Framer X.

Read blog post ›

Design Resources

Learn about the Framer X Store, the world’s first in-app design store containing thousands of free components to help kickstart your next project.

Watch video

Mapbox Design



Fluid Grid

Dmytro Izotov



Feather Icons

Cole Bemis



Desktop Kit




Airtable Sync

Davo Galavotti



Interactive Tools

An overview of the canvas tools that allow you to design high-fidelity scrolling, paging, and screen-to-screen transitions in Framer X.

Watch video

Screen Flows

In this Design + Code course, you’ll learn how to use the Link tool to create screen-to-screen transitions.

Visit website ›

Page Transitions

Step-by-step tutorials show you how to use the Page tool to design everything from a simple swipe to adding custom effects like 3D effect and momentum.

Read blog post ›

Page Prototype

In this walkthrough video, Jay Stakelon shows you how to use the Page tool and code overrides to design a tap-to-advance stories prototype.

Watch video

Code Components

Learn the fundamentals of code components and how they power everything from buttons and sliders to your entire design system.

Read blog post ›

Property Controls

Start building reusable code components with custom UI that exposes property controls to edit images, text, numbers and more.

Read on Medium ›

Real Data Components

In this tutorial, Pavel Laptev shows you how to harness the power of code components by incorporating real data using JSON data.

Read on Medium ›

Validating Inputs

Pavel Laptev explains how to create inputs with real logic using code overrides.

Read on Medium ›

Custom Animations

In this walkthrough, John Traver offers a guided tutorial on how to build an animatable burger menu.

Watch video

Button Animations

Jay Stakelon shows you just how easy it is animate a button using code overrides.

Watch video

Drag Animations

Jay Stakelon demonstrates a few nifty tricks to get better at Framer X and teaches you how to make a prototype with draggable cards.

Watch video

Design Systems

Find out how to use the Framer X Team Store to create, build and scale a design system that works for both designers and developers.

Read blog post ›

Production Components

Ivan Cruz shares a detailed tutorial that shows you how to import React production components into Framer X.

Read on Medium ›

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.