This Framer tutorial for beginners walks through the core moves you need to ship your first site: setting up a project, working with frames and stacks, configuring breakpoints, building reusable components, adding a CMS, applying animations, setting SEO meta, and publishing. Plan for 4-8 hours of focused work. By the end you will have a real, live website on a custom domain.
Before You Start: What You Need
You need three things to follow this tutorial: a free Framer account (sign up at framer.com), a domain name if you want a custom URL (skip this if you are happy with a framer.website subdomain), and a working sample of content (text, images, links). Do not start with a blank canvas and try to invent content as you go. Write a couple paragraphs, gather 3-5 images, and decide on a single primary call-to-action before you open Framer.
This tutorial assumes zero Framer experience. If you have used Figma, Webflow, or Notion, you will pick up the canvas faster. If you have never used a design tool, you will be slower for the first hour and then catch up. For broader context on what Framer is and where it fits, see our complete Framer website design guide.
Step 1: Create Your First Project
Open Framer.com and click “New Project.” Pick a starting template (“Blank” works fine for this tutorial) and name your project. The project opens in the canvas. The canvas is the main work area; the left panel shows pages and assets; the right panel shows properties of whatever you have selected.
If you are completely new, take 5 minutes to click around. Hover over panel icons to see what they do. Press “P” to insert text, “F” to insert a frame, “I” to insert an image. These shortcuts save hours over the next few months.
Step 2: Understand Frames and Stacks
Everything in Framer lives inside a frame. Frames are containers, similar to divs in HTML or auto-layout frames in Figma. The desktop page is a frame. A button is a frame. A pricing card is a frame. Frames stack inside other frames.
Stacks are frames with built-in spacing and direction. A vertical stack arranges children top-to-bottom with consistent gaps. A horizontal stack arranges children left-to-right. Use stacks for any group of elements that should sit at consistent intervals: feature lists, navbar items, pricing cards in a row.
Build a quick hero section
To get a feel for stacks, build a simple hero:
- Insert a frame and set it to full width
- Inside the frame, add a vertical stack
- Add an H1 text, a paragraph text, and a button to the stack
- Set the stack gap to 24 pixels
- Center-align the stack horizontally
You now have a hero section. Notice that adjusting the stack gap moves all three elements at once. That is the value of stacks.
Step 3: Configure Breakpoints
Framer ships with three default breakpoints: desktop, tablet, and mobile. Each breakpoint is its own canvas where you can adjust layout for that screen size. Click “Phone” or “Tablet” in the breakpoint switcher to see how your design renders on each.
The basics:
- Edits made on a smaller breakpoint do not affect larger breakpoints, but edits to larger breakpoints do cascade down by default
- Most adjustments needed on mobile are font sizes, gaps, and stack direction (vertical instead of horizontal)
- Test every page at every breakpoint before publishing
Beginners usually get stuck on responsive behavior because they design only on desktop. Resist that habit: design at mobile first, then expand to tablet and desktop. Your sites will be sturdier.
Step 4: Build a Reusable Component
Components are the difference between hand-crafted Framer sites and scalable ones. Right-click any frame and choose “Create Component.” That frame is now a master. Every place you use it is an instance. Edit the master, all instances update.
Build a pricing card component
- Build one pricing card by hand: title, price, feature list, button
- Right-click the card frame, choose “Create Component”
- Add variants for “Featured” and “Default” so you can highlight one tier
- Drag the component into your pricing page three times
- Override the title, price, and features on each instance
Now editing the master changes all three pricing cards at once. This is how design systems work.
Step 5: Add a CMS Collection for a Blog
The CMS lets you publish blog posts (or case studies, products, team members) without rebuilding pages. Open the CMS panel (database icon in the left sidebar) and create a new collection called “Blog.”
Add fields:
- Title (Plain Text)
- Slug (Slug)
- Cover Image (Image)
- Body (Rich Text)
- Published Date (Date)
- Author (Plain Text or Reference to an Author collection)
Add a few sample entries. Then create a dynamic page that pulls from this collection: right-click a page, choose “Connect to CMS,” select your Blog collection. The page now duplicates itself per CMS entry. Each entry gets its own URL based on the slug field. For deeper coverage, see our Framer CMS complete guide.
Step 6: Apply Animations Tastefully
Animations are easy to add and easy to overdo. Open the Effects panel (sparkle icon in the right sidebar) on any element. The most useful effects for beginners:
- Appear effect: fade-in or slide-in on scroll. Apply to hero text and section headers.
- Hover effect: scale or color change on cursor hover. Apply to buttons and cards.
- Stagger: sequential reveal for grid items. Apply to feature lists and pricing cards.
Set durations to 600-800ms. Use one easing curve site-wide (a soft ease-out is a safe default). Resist the urge to put motion on everything. For more on animation, see our Framer animations guide.
Step 7: Set SEO Meta on Every Page
SEO is not optional. Open Page Settings (gear icon next to the page name) on every page and fill in:
- Page Title: under 60 characters, includes the primary keyword
- Meta Description: under 155 characters, written for clicks not stuffed with keywords
- Open Graph Image: 1200×630 pixels, image that represents the page
- Slug: short, descriptive, hyphen-separated
For CMS-driven pages, set up dynamic meta from CMS fields (Page Title pulls from {{Title}}, OG Image pulls from {{Cover Image}}). For more on SEO, see our Framer SEO guide.
Step 8: Test Your Site Before Publishing
Click “Preview” in the top right. The preview shows your site in a browser-like view. Test:
- Every page loads
- Every link works
- Every form submits to a real endpoint
- Every breakpoint renders correctly (desktop, tablet, mobile)
- Every CMS-driven page has its own metadata
- Page speed is acceptable (under 3 seconds on a 4G throttled connection)
Do not skip this step. The number of beginner sites that ship with broken links or unstyled mobile views is depressing.
Step 9: Publish to a Custom Domain
Click “Publish” in the top right. The first time, Framer prompts you to choose a free framer.website subdomain or connect a custom domain. To connect a custom domain:
- Buy a domain from any registrar (Namecheap, Cloudflare, Google Domains)
- In Framer, go to Site Settings > Domain
- Enter your domain
- Update DNS records at your registrar to point to Framer (Framer provides the exact records)
- Wait 5-30 minutes for DNS propagation
Once propagation completes, your site is live on the custom domain with HTTPS provisioned automatically. The free Framer plan supports a framer.website subdomain only; custom domains require a paid plan starting at $5/month per site. For pricing details, see Framer pricing explained.
Step 10: Submit to Search Engines
Once your site is live, submit it to Google Search Console and Bing Webmaster Tools. Add your sitemap URL (yourdomain.com/sitemap.xml). Set up basic analytics with Google Analytics 4 or Plausible. Without analytics you cannot tell what is working.
Common Beginner Mistakes
- Skipping breakpoints: site looks great on desktop, breaks on phone
- Inconsistent typography: 8 different font sizes across the site, all slightly different
- No CMS planning: hand-built blog posts, then panic when post #20 arrives
- Animation overload: motion on every element, the site feels like a Christmas tree
- Skipping SEO meta: every page shares the same title and description
- Heavy hero images: 8 MB hero image, page takes 12 seconds to load
Most of these are fixed by reading more guides and shipping more sites. The first three sites you build will be rough; the fourth and fifth will be solid.
Frequently Asked Questions
How long does it take to build my first Framer site?
Plan for 4-8 hours of focused work for a simple landing page. A full multi-page site with CMS, animations, and SEO setup takes 12-25 hours for a beginner.
Do I need to know HTML or CSS to use Framer?
No. Framer is a visual tool that generates production code under the hood. You can build complete sites without writing code. Code components are available if you want to extend the canvas with React, but they are optional.
Is Framer hard to learn?
Easier than Webflow, harder than Squarespace. Most beginners feel comfortable in 10-20 hours. Framer Academy plus this tutorial covers the foundations.
Can I use Framer for client work as a beginner?
Yes, but ship 2-3 personal projects first to build confidence and a portfolio. The first paid client site should not be your first Framer site. To talk through a build, see framerwebsites.com/contact.
What is the next thing to learn after this tutorial?
Components and CMS in depth. Both are covered in detail in the Framer Academy and in our other guides. Once those click, the rest of Framer is mostly elaborations on those two ideas.