Ryan Hayward (Flux Academy) – Framer Masterclass

 

 

What You Get:

 

Introduction

 

• Welcome & Course Overview
• Framer vs Webflow
• Framer vs Figma
• Overview of the Framer Dashboard
• Creating Your First Site

 

 

 

Fundamentals

 

• Key Concepts for Mastering Framer
• Intro to the Framer Editor
• Understanding Sizing
• Positioning: Relative vs Absolute vs Sticky vs Fixed
• Using Layout
• Demo: Creating a Hero Section
• Styling
• Overlays
• Breakpoints
• Navigation & Links
• Using Icons
• Slideshow & Carousels
• Using Video
• Understanding Site Settings
• Publishing Your Site

 

 

Components

 

• Overview of Components
• Variables
• Variants
• Hover and Pressed States
• Interactions
• Logic With Components
• Demo: Building a Custom Navbar

 

 

Content Management System

 

• Understanding the CMS
• Sorting & Filtering
• Search component

 

 

Animations

 

• Understanding Effects & Animations
• Effect Options (Appear, Hover, Etc.)
• Component vs Regular Effects
• Creating a Parallax Effect
• Demo: Adding Effects to a Landing Page

 

 

Advanced Use Cases

 

• Using the Ticker
• Working With Remixes
• Embeds
• Override Code
• Custom Search Bar

 

 

Putting It All Together: Building a Full Site

 

• Exporting From Figma
• Setting Up the Framer Project
• Creating The Hero Section
• Building The Navbar
• Building The Site Content
• Testimonial Section
• Creating The Call-To-Action
• Creating The Footer
• Fixing Common Site Issues
• Adding Effects
• Making The Site Mobile Responsive
• Publishing The Site

 

 

 

Bonus: Making Money with Framer

 

• Selling Framer To Clients
• Client Handover Checklist
• Pricing Framer Sites
• Framer Partner Program
• Selling Templates
• Getting Your Template Approved
• Building Products For Framer