What you’ll learn
- How Framer works and how to find your way around the canvas and panels
- How to build clean, responsive layouts with stacks, grids and breakpoints
- How to create reusable components with variants and hover states
- How to add scroll, appear, hover and page effects without code
- How to bring designs from Figma, manage content with the CMS and collect leads with forms
- How to set up SEO, publish, connect a domain and launch an animated landing page
Who this course is for
- Designers who want to publish their own sites without handing off to a developer
- Freelancers who want to offer fast, modern landing pages and portfolios
- Figma users curious about turning designs into live websites
Before you start
Do I need to know how to code?
No. Framer is visual. Knowing basic CSS ideas like padding, flexbox and breakpoints helps, and the free CSS course on this site covers them.
Is Framer free?
You can design and publish on a free plan with a Framer subdomain and branding. Paid site plans add a custom domain, more CMS items and other features. Check framer.com/pricing for current plans.
Do I need Figma?
No. Framer has its own design tools. Lesson 7 shows how to bring in Figma designs if you already use Figma.
What will I build?
An animated, responsive landing page with a hero, features, testimonials, pricing, FAQ and a lead form, published on your own domain.
