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

Chapter 3 - Framer CMS 101

Chapter 4 - Fixed Overlays

Chapter 5 - Relative Overlays

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 2 - Custom Cursors

Chapter 3 - Page Transitions

Chapter 4 - Text Effects

Chapter 5 - Scroll Animation

Chapter 6 - Scroll Transform

Chapter 7 - Scroll Variants

Chapter 8 - Scroll Speed

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 1 - Meta-data

Chapter 2 - Custom Domains

Chapter 3 - Version History

Chapter 4 - Staging

Chapter 5 - Accessibility 101

Chapter 6 - Performance Optimisation

Chapter 7 - Localisation, Translations

Chapter 8 - Search

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

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

License

How does the licenses work?

Can I use it to create client projects?

Can I use it to create Framer templates?

Pricing

Is there a free version?

Do you have a student discount?

Can I buy components seperately?

Will I get future updates if I purchase now?

Is this a one time payment or a subscription?

What is the difference between Pro and Pro Creator Access?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

License

How does the licenses work?

Can I use it to create client projects?

Can I use it to create Framer templates?

Pricing

Is there a free version?

Do you have a student discount?

Can I buy components seperately?

Will I get future updates if I purchase now?

Is this a one time payment or a subscription?

What is the difference between Pro and Pro Creator Access?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!