Tutorials

A collection of courses, articles and videos.

Design + Code

Over 30,000 designers have viewed Meng To’s 10-part video course that covers layout, code components and animations in Framer X.

Visit website ›

Framer X Fundamentals

Dive into Linton Ye’s Framer X and React with this extensive 27-lesson plan and video course.

Visit website ›

React.design

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 ›

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

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

Mapbox Design

320

4068

Fluid Grid

Dmytro Izotov

62

227

Feather Icons

Cole Bemis

216

3240

Desktop Kit

Dropbox

461

4454

Airtable Sync

Davo Galavotti

56

182

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.