Back
The Ultimate FREE Framer Course (Beginner to Expert)
Nabeel
Founder @ SegmentUI
There are a bunch of videos and free courses for Framer. But where do your start? Which one's relevant and which one's outdated? In this post, I've compiled a FREE step-by-step course & curriculum from various creators to walk you through the process of becoming a Framer expert from the beginning to the end.
Module 1 - Introduction
This is where it all begins! You'll get a bird's-eye view of what Framer is all about. It will lay the foundation of the next levels and cover the basics of the interface, project structure, some basic terminologies & general concepts
Chapter 1 - Basics of Framer Interface
Chapter 2 - The Anatomy of a Framer Project
Module 2 - Beginner
This section is all about getting your hands dirty with the fundamentals. You'll learn how to layout your designs, make them responsive, and play with text and colors. It's like learning to walk before you run, but in the design world. By the end, you'll be building your own simple sites!
Chapter 1 - Everything about Layout and Sizing
Chapter 2 - Responsive Design 101
Chapter 3 - Text Styles & Color Styles in 5 mins / Part 2
Chapter 4 - Native Framer Forms
Chapter 5 - Finale - Build your own site
Module 3 - Intermediate
You'll dive into components (the building blocks of your designs), add some life with animations, and even start working with data through CMS basics. It's like levelling up from Lego to Minecraft - more complex, but way more fun! You should be able to build 90% of the websites out there after this module. After this module you're an expert at static website design.
Chapter 1 - Everything you need to know about Components
Chapter 2 - Building Responsive Navigation
Module 4 - Advanced
This is where you start to add those "wow" factors to your designs. You'll create cool effects, master scroll animations, and even tackle light and dark modes. After this, you've mastered the visual design part of Framer. You will be able to make anything from simple sites to complex sites with scroll animations and transforms.
Chapter 1 - Drag, Hover, Press, Loop Effects
Chapter 9 - Combining Everything
Chapter 10 - Combining Everything Part 2
Chapter 11 - Theming - Dark & Light Modes
Module 5 - Expert
This section covers the nitty-gritty of making your site not just pretty, but functional and accessible. You'll learn about analytics, localization, and search.
Chapter 6 - Performance Optimisation
Chapter 7 - Localisation, Translations
Module 6 - Master
Welcome to the big leagues! Here you'll be working with code components, integrating APIs, and even dipping your toes into AI and WebGL. You'll also learn how to build e-commerce and membership sites. It's like becoming a design wizard, pulling off tricks that'll make others go "How did they do that?"
Chapter 1 - Mastering Code Components
Chapter 2 - Mastering Code Overrides
Chapter 3 - AI Assisted Code Component, Override Creation
Chapter 4 - Fetch & Integration with external APIs
Chapter 5 - Spline Integration for Framer / Part 2
Chapter 6 - Rive Integration for Framer
Chapter 7 - WebGL basics in Framer
Chapter 8 - Membership Sites for Framer
Chapter 9 - E-commerce Sites for Framer
Bonus
Remix freebies, deconstruct and reconstruct them from the freebie library
Level up your component and websites with custom code components
Learn all the ways you can make money with Framer
Remember to follow the checklist before launching any website.
Keep in touch with the Framer community and events
Looking for paid courses? Check out our compilation of top paid Framer courses
