Search lessons...
Progress
Module 1: Fundamentals
Module 3: Jazzing it up
Search lessons...
Learn what makes Framer a powerful design and publishing platform. We’ll cover the basics of the interface and how to start your first project.
Learn what makes Framer a powerful design and publishing platform. We’ll cover the basics of the interface and how to start your first project.
Discover how to build a consistent visual foundation with color, typography, and spacing tokens. This lesson shows you how to maintain harmony across every page and component.
Discover how to build a consistent visual foundation with color, typography, and spacing tokens. This lesson shows you how to maintain harmony across every page and component.
Get your project organized from the start. Learn how to structure layers, name elements, and prepare assets for efficient editing.
Get your project organized from the start. Learn how to structure layers, name elements, and prepare assets for efficient editing.
Understand the power of components and how to reuse elements across your site. You’ll learn how to make updates globally and keep your design consistent.
Understand the power of components and how to reuse elements across your site. You’ll learn how to make updates globally and keep your design consistent.
Structure your layouts using sections to keep content organized and easy to navigate. This lesson guides you through building clean, scrollable page designs.
Structure your layouts using sections to keep content organized and easy to navigate. This lesson guides you through building clean, scrollable page designs.
Master stacks to create flexible, responsive layouts with minimal effort. We’ll show you how to adjust alignment, spacing, and direction for any design.
Master stacks to create flexible, responsive layouts with minimal effort. We’ll show you how to adjust alignment, spacing, and direction for any design.
Seamlessly bring your designs from Figma into Framer. You’ll learn how to optimize layers and maintain design fidelity after import.
Seamlessly bring your designs from Figma into Framer. You’ll learn how to optimize layers and maintain design fidelity after import.
Make your designs come alive with motion and user interactions. Learn how to add scroll effects, transitions, and micro-interactions that enhance user experience.
Make your designs come alive with motion and user interactions. Learn how to add scroll effects, transitions, and micro-interactions that enhance user experience.
Explore how overrides and code components can extend Framer’s capabilities. This lesson introduces light coding concepts for deeper customization.
Explore how overrides and code components can extend Framer’s capabilities. This lesson introduces light coding concepts for deeper customization.
Learn how to create dynamic content with Framer’s CMS. We’ll cover connecting collections, displaying posts, and designing templates that update automatically.
Learn how to create dynamic content with Framer’s CMS. We’ll cover connecting collections, displaying posts, and designing templates that update automatically.
Take your project live with Framer’s built-in hosting tools. You’ll learn how to publish, manage domains, and share your finished site with the world.
Take your project live with Framer’s built-in hosting tools. You’ll learn how to publish, manage domains, and share your finished site with the world.