What the Free plan lets you do in week one
Framer's own Academy lesson on the free plan says you can use it to learn the canvas, build pages, work with Components and publish a project on a Framer subdomain. It tells you to check plan limits when you need a custom domain, more traffic, additional CMS capacity or team features. That is the right scope for a first week: build and publish, then decide whether to pay. [1]
On the pricing page Framer lists the Free plan at $0 with a free Framer domain, 1 GB of bandwidth and 500 AI credits to try. Basic is shown at $10 a month (the page says prices are monthly and billed according to the cycle chosen at checkout, with a Yearly billing toggle) and adds a custom domain, 2 CMS collections, 1,000 CMS items, 30 pages and 50 GB of bandwidth. Pro is shown at $30 a month with 150 pages, 10 CMS collections, 2,500 CMS items, 100 GB of bandwidth, staging and site redirects. Framer's plan comparison article adds that Free sites display a Made in Framer banner, and the pricing FAQ says Free projects include 10 CMS collections and 1,000 pages for building. [8][9]
| Plan | Displayed price | Domain | CMS | Bandwidth |
|---|---|---|---|---|
| Free | $0 | Free Framer domain (framer.app) | 10 collections per the pricing FAQ (items not stated) | 1 GB |
| Basic | $10 a month as displayed | Custom domain | 2 collections, 1,000 items | 50 GB |
| Pro | $30 a month as displayed | Custom domain | 10 collections, 2,500 items | 100 GB |
The seven-day order
The order is layout first, then responsiveness, then reuse, then content, then publishing, because each step depends on the one before it. Breakpoints are hard to fix if the layout underneath them uses fixed positions instead of Stacks, and Components are easier to make once the layout is clean. [2][3][4][5][6]
| Day | Focus | You are done when |
|---|---|---|
| 1 | Pick a template or blank project, learn the canvas and layers panel | You can select, rename and reorder every layer on one page |
| 2 | Stacks and grids | The hero, a feature row and the footer each sit in a Stack or grid, not at fixed positions |
| 3 | Breakpoints | Tablet and phone breakpoints exist and only override what changes |
| 4 | Components | Navigation, footer and buttons are Components with instances on each page |
| 5 | CMS basics (only if content repeats) | One collection, a collection list and a detail page work for two test items |
| 6 | Forms and page details | A native form sends to a destination you have checked |
| 7 | Publish and review | The framer.app address loads on a phone and a laptop and the optimization status has finished |
Days 2 to 4: Stacks, breakpoints and Components
Stacks and grids are Framer's two layout tools. The Academy's rule of thumb is to choose a Stack when items follow one main direction and should respond to content size, and a grid when rows and columns need shared tracks or two-dimensional alignment. A grid's gap and minimum column width are set on the parent. In practice most beginner pages are Stacks inside Stacks, with one grid for a card or logo wall. [2]
Breakpoints come next. You add them from the breakpoint bar and choose tablet, phone or a custom width. Framer creates a layout that inherits from the primary breakpoint, and each breakpoint overrides only the properties it needs. The Academy suggests changing only what the narrower layout needs, such as type size, Stack direction, gap, padding, width or visibility. The width shown on the canvas is the minimum viewport width at which that breakpoint becomes active, which explains most 'why does my phone layout show on a small laptop' surprises. [3]
Components give repeated elements one shared definition. Select a layer, choose Create Component (Option-Command-K on macOS), and name it. Instances stay connected to the source, so editing the Component updates every copy. Variants handle different states and variables let each instance use its own label, icon, colour or link. The Academy names buttons, cards and navigation as typical candidates. [4]
- Test check for day 2: drag the browser preview narrower; anything that overlaps is probably not in a Stack.
- Test check for day 3: change one font size on the phone breakpoint and confirm desktop did not change.
- Test check for day 4: edit the nav Component once and confirm every page updated.
Day 5: CMS basics, and when to skip them
The Framer CMS separates content from design. A collection groups related content such as articles, projects or team members. Fields define the text, images, dates and links each record holds, and each item is one record. A collection list shows several items in an index, grid or featured section. A CMS detail page reuses one layout for every item, and the slug sets each item's URL segment. [5]
If your site is five fixed pages with no blog, case studies or listings, skip the CMS this week. Basic includes only 2 CMS collections, while the pricing FAQ gives Free projects 10, so a beginner who spreads content across many small collections while learning on Free can end up with more collections than Basic allows. A useful test is whether you expect to add the same kind of page more than three or four times. [5][8]
Days 6 and 7: forms, then publish
Framer's native form component is inserted from the Insert menu under Forms. Submissions can go to email, Google Sheets or a custom webhook, and native forms include built-in spam protection and rate limiting. Pick the destination before you publish and send a test entry from the live address, because a configured destination is not proof that the entry arrived. Our Framer forms guide covers each destination in detail. [10]
To publish, click Publish in the top-right corner. The site gets a generated framer.app address that you can open from the publish panel. Wait for the optimization status to finish before checking features that depend on the published site. Staging, which lets you publish to a separate version and then use Deploy Latest, is listed for Pro plans and above. [6][7][8]
- Open the framer.app address on a real phone, not only the canvas preview.
- Click every navigation link and button once.
- Submit the form with a test address and find the entry at its destination.
- Check the browser tab title on each page and fix anything still named after the template.
What to leave until after launch
Beginners lose time on features that only matter once a site has visitors. The items below are real features, but none of them stop a first site from going live on framer.app, and several cost money.
- Who Framer suits after week one: people who want visual control and are comfortable with layout concepts like Stacks and breakpoints.
- Who should consider skipping it: someone who needs a single page live today with no layout learning; a simpler builder will be faster.
| Feature | Why wait | Plan where Framer lists it |
|---|---|---|
| Custom domain | Costs a paid plan; easy to add later without rebuilding | Basic and Pro |
| Staging environment | Only useful once a live site has traffic you must protect | Pro |
| Site redirects | Needed when URLs change, not before they exist | Pro |
| A/B testing | Needs traffic to produce meaningful results | Pro add-on |
| Localization | Translate once the source copy is stable | Add-on on Basic and Pro, $20 per locale |
Questions before you decide
Can I publish a Framer site for free?
Yes. Clicking Publish gives the site a generated framer.app address, and Framer's free-plan lesson says you can publish a project on a Framer subdomain. Free sites show a Made in Framer banner and the Free plan lists 1 GB of bandwidth.
Should I learn Stacks or grids first in Framer?
Stacks. Framer Academy recommends a Stack when items follow one main direction and respond to content size, which covers most page sections; use a grid when you need shared rows and columns.
How do Framer breakpoints decide which layout to show?
Each breakpoint inherits from the primary breakpoint and overrides only what you change. The width shown on the canvas is the minimum viewport width at which that breakpoint becomes active.
When do I need a paid Framer plan?
Framer's free-plan lesson points to a custom domain, more traffic, additional CMS capacity or team features. Basic is the lowest plan on the pricing page with a custom domain, shown at $10 a month on the pricing page.
Sources & verification
Product details and prices can change. Check the linked provider before buying.
- Framer Academy: Get more from the free Framer plan Accessed 30 Oct 2026
- Framer Academy: Choose between Stacks and grids Accessed 30 Oct 2026
- Framer Academy: Create responsive breakpoints Accessed 30 Oct 2026
- Framer Academy: Components and instances Accessed 30 Oct 2026
- Framer Academy: Getting started with the Framer CMS Accessed 30 Oct 2026
- Framer Academy: Publish and connect a custom domain Accessed 30 Oct 2026
- Framer Help: Publishing your Framer website Accessed 30 Oct 2026
- Framer pricing Accessed 30 Oct 2026
- Framer Help: Comparing Framer pricing plans Accessed 30 Oct 2026
- Framer Help: Adding a contact form Accessed 30 Oct 2026
Sources link directly to providers. Product buttons may use separately labeled affiliate links. Read our disclosure.