Framer Web Design Course

Lesson 1 • Creating and Managing Projects

Teaches project creation, file organisation, and version history. Connects workspace habits to efficient long-term project management.

Lesson 2 • Basic Design Tools and Shapes

Covers rectangle, ellipse, line, and pen tools for building UI primitives. Grounds students in the drawing tools used throughout every project.

Lesson 3 • Frames, Layers, and Hierarchy

Introduces frames as the primary container and explains layer stacking and nesting. Provides the structural logic needed for all subsequent design work.

Lesson 4 • Typography and Text Styling

Teaches text insertion, font selection, and typographic properties. Ensures students can style readable, brand-consistent text from the start.

Lesson 1 • Constraints and Pinning

Explains how constraints pin elements relative to their parent frame. Enables designs that resize predictably across different screen dimensions.

Lesson 2 • Spacing and Visual Rhythm

Covers spacing tokens, consistent margins, and visual rhythm principles. Reinforces layout discipline that elevates design quality and consistency.

Lesson 3 • Breakpoints and Responsive Frames

Teaches breakpoint creation and frame resizing for mobile, tablet, and desktop. Produces layouts that adapt fluidly to any viewport width.

Lesson 4 • Grids and Columns

Covers column grids, row grids, and custom grid overlays for structured layouts. Teaches alignment discipline essential for professional design output.

Lesson 1 • Building a Color and Style System

Covers creating color tokens, text styles, and effect styles for system-wide consistency. Connects style management to scalable, maintainable design systems.

Lesson 2 • Component Properties and Overrides

Explains exposing text, image, and boolean properties for instance-level overrides. Gives teams flexible components that adapt without breaking the master.

Lesson 3 • Organising and Sharing Components

Teaches component library organisation, search, and team sharing workflows. Prepares students to collaborate on shared design systems at scale.

Lesson 4 • Component Variants and States

Teaches variant creation for hover, active, disabled, and other UI states. Enables interactive, state-aware components without writing code.

Lesson 1 • Linking Frames and Navigation

Covers creating links between frames to simulate screen navigation. Builds the foundational prototype flow used in all subsequent interaction work.

Lesson 2 • Scroll and Overflow Interactions

Teaches scroll direction, overflow clipping, and sticky element behaviour. Enables realistic scrollable content areas and fixed navigation patterns.

Lesson 3 • Hover and Click Animations

Explains configuring hover, click, and tap triggers with easing and duration. Produces micro-interactions that make prototypes feel polished and realistic.

Lesson 4 • Smart Animate and Transitions

Covers smart animate for seamless layer-matched transitions between frames. Elevates prototype fidelity to near-production quality motion design.

Lesson 1 • Connecting External Data Sources

Teaches fetching data from REST APIs inside code components using useEffect. Enables prototypes that display real or realistic dynamic content.

Lesson 2 • Building Custom Code Components

Teaches writing React functional components that appear in the Framer canvas. Enables creation of UI elements beyond what the visual editor provides.

Lesson 3 • Introduction to Framer's Code Editor

Covers the built-in code editor, file structure, and TypeScript basics in Framer. Prepares students with the minimum coding knowledge needed for custom components.

Lesson 4 • Framer Motion Animations in Code

Covers using Framer Motion's animate, variants, and gesture APIs inside code components. Produces fluid, physics-based animations not achievable in the visual editor.

Lesson 1 • CMS Filtering and Search

Covers adding filter controls and search inputs that query CMS collections. Gives users interactive content discovery without custom backend logic.

Lesson 2 • Framer CMS Fundamentals

Introduces CMS collections, fields, and content entry workflows. Establishes the data model foundation required for all dynamic page design.

Lesson 3 • Collection Lists and Grids

Teaches building collection list components that repeat per CMS entry. Produces blog feeds, product grids, and portfolio galleries from live data.

Lesson 4 • Binding CMS Data to Design

Covers connecting collection fields to text, image, and link layers on the canvas. Transforms static designs into data-driven templates automatically.

Lesson 1 • Site Settings and Metadata

Covers site name, favicon, global fonts, and Open Graph metadata configuration. Ensures every published site has correct branding and social sharing data.

Lesson 2 • Custom Domain Configuration

Teaches connecting a custom domain, configuring DNS records, and enabling HTTPS. Prepares students to launch professional sites on their own domain.

Lesson 3 • SEO and Page Optimisation

Covers per-page SEO titles, descriptions, canonical URLs, and sitemap generation. Maximises organic discoverability for every published Framer site.

Lesson 4 • Publishing Workflows and Staging

Teaches using preview links, staging environments, and publish controls. Enables safe, iterative deployment without disrupting the live production site.

Lesson 1 • Design Handoff and Developer Collaboration

Explains using Framer's inspect panel, export settings, and share links for developer handoff. Streamlines the transition from design to production development.

Lesson 2 • Third-Party Integrations

Teaches embedding analytics, form services, chat widgets, and payment tools via custom code. Extends Framer sites with production-grade third-party functionality.

Lesson 3 • Workflow Optimisation and Plugins

Covers keyboard shortcuts, plugin installation, and batch operations for speed. Reduces repetitive tasks and maximises output quality per hour of design work.

Lesson 4 • Accessibility Best Practices

Covers ARIA labels, keyboard navigation, colour contrast, and focus management. Ensures published sites meet inclusive design standards for all users.