Why Framer X
A collection of courses, articles and videos.
Over 30,000 designers have viewed Meng To’s 10-part video course that covers layout, code components and animations in Framer X.
Dive into Linton Ye’s Framer X and React with this extensive 27-lesson plan and video course.
Phillip Davis built this course to introduce designers to React, within the context of interface design.
Zach Johnston put together a handy 3-step guide to lead designers to the best resources for learning React.
Learn how automated grouping, responsive layouts, and flexible stacks make for a speedy workflow in Framer X.
Jay Stakelon shows you how to make reusable design component, nested list, and photo grid using Framer X’s popular layout design feature.
Design + Code shows you how to design everything from custom icons to intricate illustrations using an advanced path editor, graphics container and SVG export.
From simple reusable visual elements to entire design systems, learn how to speed up your workflow with design components in Framer X.
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.
An overview of the canvas tools that allow you to design high-fidelity scrolling, paging, and screen-to-screen transitions in Framer X.
In this Design + Code course, you’ll learn how to use the Link tool to create screen-to-screen 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.
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.
Learn the fundamentals of code components and how they power everything from buttons and sliders to your entire design system.
Start building reusable code components with custom UI that exposes property controls to edit images, text, numbers and more.
In this tutorial, Pavel Laptev shows you how to harness the power of code components by incorporating real data using JSON data.
Pavel Laptev explains how to create inputs with real logic using code overrides.
In this walkthrough, John Traver offers a guided tutorial on how to build an animatable burger menu.
Jay Stakelon shows you just how easy it is animate a button using code overrides.
Jay Stakelon demonstrates a few nifty tricks to get better at Framer X and teaches you how to make a prototype with draggable cards.
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.
Ivan Cruz shares a detailed tutorial that shows you how to import React production components into Framer X.