The Complete Course of Framer 2025

Master the basics of design in Figma, focusing on frames, grouping, alignment, and positioning. Learn sizing and pinning techniques, plus absolute, relative, fixed, and viewport options for responsive layouts.

Learn to build responsive layouts in Framer with text, stacks, and grids, using absolute elements, auto spacing, space between, space evenly, fit content, and adjustable padding and alignment.

Learn to design web visuals in Framer by creating shapes with frames, styling text with fonts, colors, and gradients, and adding and adjusting images.

Build your first basic design featuring a header with logo and title, a centered hero, image, and gradient button, then use stacks and grids for sections.

Create a static assignment site on a desktop canvas with a header, section one grid (heading and buttons), section two grid of stacks (image, text, subtext), and a footer.

Learn how prototyping in Figma enables highly interactive UI components with animations, scroll-triggered effects, and section linking to navigate between sections and pages, including hover button changes.

Learn to create basic text and button animations in Framer using appear and on scroll triggers, and apply presets, layer view, and transitions like hover, press, loop, and drag.

Learn to link components and pages with images and buttons, enabling on-click scrolling between sections and across pages, including smooth transitions and new tab behavior.

Preview your website using the top-right panel, adjust width to 1000 or test a phone preset, and view in full screen. Share by inviting collaborators or publishing to a domain.

Learn to implement animation and interaction in Framer JS by applying header fade-in effects, button hover and press scales, draggable images with snap back, and footer-triggered animations.

Understand why components matter by creating a single button component that updates across pages; explore variants and hover/press states, and reuse the component to keep styling consistent site-wide.

Create dynamic, overridable button components in Framer by using state and props, variants, and inheritance to build primary and secondary buttons with hover and press interactions.

Explore how components encapsulate functionality for reusable, maintainable user interfaces, and learn to use variants, variables, and interactions to build dynamic, customizable elements like buttons and inputs.

Learn to build a reusable design system in Framer by creating a dynamic image slider with components and variants that pass image names and highlight the active image.

Build a practical Framer assignment by creating a dynamic button with text, background color, and auto-expanding width, plus a two-variant toggle with active and inactive states that switches on click.

Explore advanced interactions in Framer by using animation on scroll, transform, scroll speed, and variant animations, then apply a parallax effect and sticky elements in real-world layouts.

Master scroll animation in Framer to trigger fade-in effects as each section comes into view, using section in view, viewport center, and smooth transitions with ease.

Explore motion and scroll components to create a parallax effect by adjusting speed between frames. See text move differently than a background image with blend mode lighten to enhance scrolling.

Explore how to apply scroll transform in framer to trigger animations, control start and end states, and combine opacity, scale, rotate, skew, and offset for parallax and underline effects.

Learn to create scroll variants in Framer using motion components to switch component variants as sections come into view, applying sticky positioning and section-based tagging for dynamic visuals.

Design a responsive website in Framer using score variants and scroll animation. Implement a built-in components set for banner, navigation, sections, image containers, and a team gallery with synchronized transitions.

Apply advanced animation and interaction techniques to build a banner with a linear gradient, images, and text that respond to scroll. Animate astronaut and planet with scroll transform and offset.

Apply interaction knowledge to build a page with parallax text, navigation, section two with a left image, right text, a composite button with primary and secondary variants, and scroll variants.

Learn the basics of framer motion API by creating components, editing in the coding area, styling with Figma options, and building interactive animations and hover gestures.

Learn to code in the Framer environment with the Framer Motion API, building motion components and buttons, using initial, animate, transitions, and gesture-based animations like while hover.

Create dynamic components in framer motion by using add property controls to pass text and color props, organize them with a properties object, and bind values via props.

Explore React basics, a JavaScript library for building user interfaces, and see state management with useState and useEffect, plus event handling and list rendering with map.

Explore how Framer code overrides dynamically change design properties with props from the design tool. Use create store and use store for state, and apply animations like rotate and hover.

Connect components to real data in React using async await and the fetch API, with try/catch error handling, and explore Kanye and Pokemon API data examples.

Explore Framer assignments using normal and code components with code overrides, featuring variant buttons and a code-driven Pokemon list with pagination and total count.

Create teams in a project by inviting members, joining via email invites, and assigning roles like can edit or can view, with a request access option for editing.

Learn how to share Framer projects with others using invite links for view or edit access, and create remix copies via the remix link to collaborate across accounts.

Access the version history from the file menu to view past project states, copy a previous version into the latest, and create new layers or replace existing ones.

Master feedback and iterative design within a collaborative framework. Leave comments, update components like color changes, and resolve tasks to drive iterative improvements.

Use version history to restore deleted layers in your Framer project. Open a previous project, go back to a date like 15 days ago, and recover the layers.

Design a responsive banner and navigation in Framer for web and mobile, using frames, components, variants, and breakpoints to adapt to tablet and phone screens.

Learn to convert an existing design into a mobile-friendly layout using breakpoints and mobile prototyping, adjusting headers, grids to one column, and content to 100% width with fit content.

Optimize Framer JS projects by managing static assets, auto-resolved images and fonts, hosting videos on YouTube or Vimeo with autoplay off, and loading data via conditional rendering and use effect.

Open your design prototype from module two, convert it to tablet and mobile breakpoints, fix cropping and UI issues, and verify full mobile and tablet readability.

Apply all learned Framer skills to build a comprehensive pricing website prototype with reusable components, animations, API data via code components and code overrides, ensuring accessibility and responsive design.

Convert a desktop site into a mobile-friendly Framer prototype by adding a phone breakpoint, using auto fit grid with minmax, and implementing a hamburger menu with toggle variants.

Master setting up the Framer environment, manage workspace and projects, build layouts with frames, stacks, and grids, prototype with motion and code via Framer Motion and React basics.