Tutorials
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 ›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 ›Layout Tools
Learn how automated grouping, responsive layouts, and flexible stacks make for a speedy workflow in Framer X.
Watch videoFlexible 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
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 videoScreen 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 videoCode 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 videoDrag 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 videoDesign 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 ›