How to Use Framer: The Beginner's Guide (First Site, Frames and Stacks, and a Live Publish)

CodexFuse Team · 2026-10-29T04:46:40.960Z · 18 min read

Framer turns a design canvas into a live website. This beginner guide walks you from your first project to a published site, with frames, stacks, grids and the CMS explained.

Learning how to use Framer takes about an afternoon, and you do not need to write code to get there. Framer is a website builder that starts as a design canvas and ends as a live website: you arrange pages, sections and content visually, then publish the result to the web from the same tool. This guide walks through the whole path, from creating a free account to publishing your first site, and it covers the two things beginners get wrong most often: mixing up frames, stacks and grids, and assuming the free plan includes a custom domain.

If you have designed screens before, Framer will feel familiar. Its canvas, layers panel and component system borrow heavily from Figma, so the Figma beginner guide is a useful companion if you have never worked with layers at all. The difference is what happens at the end: a Figma file is a design, while a Framer project is a website you can publish, share and update without handing it to a developer.

How Do You Use Framer?

To use Framer, create a free account, start from a template, replace its content with your own, arrange sections with stacks and grids, connect any repeating content through the CMS, check the mobile breakpoint, and publish to a Framer subdomain before connecting a custom domain.

1. Create a free account at framer.com and open a new project from the dashboard.
2. Start from a template that matches your site, instead of a blank canvas, and take it apart to see how it is built.
3. Replace the content section by section: your headline, your images, your links, in your own words.
4. Build layouts with stacks and grids, not free-floating layers, so sections reflow on smaller screens.
5. Turn repeated pieces into components, such as a navigation bar or a button, so one edit updates every page.
6. Add the CMS only for repeating content, such as blog posts or portfolio projects, with one collection and a few fields.
7. Preview, check mobile, then publish to your Framer subdomain first, and connect a custom domain only after the live version looks right.

The rest of this guide takes each step in turn, then explains pricing, the Framer versus Webflow and Figma choice, and the publish checklist in detail.

What Is Framer, and What Can It Build?

Framer is a visual website builder: you design pages on a canvas, and Framer hosts the finished site. Framer's own Academy describes the editor as five views: Canvas, where you create pages and arrange layers; CMS, which holds structured content such as articles and events; localization, which handles languages and regions; Analytics, which shows how visitors use the published site; and Settings, which covers domains, redirects, versions and plans.

The realistic first projects are narrow ones: a portfolio, a freelancer site, a startup landing page, a small business site, or a simple blog. Framer is a strong fit when the site is mostly pages and content, with animation and polish doing real work. It is a weaker fit for a large online store or a complex web application, where a dedicated e-commerce or app platform will serve you better. Knowing that boundary before you start saves you from building the wrong thing beautifully.

One distinction matters from the first minute. Framer is not Figma, even though it looks like it. Figma produces designs that someone else must build; Framer produces the website itself, including hosting. That is why the learning curve feels different: you are learning a design tool and a publishing tool at the same time, and the publish step is part of the skill, not an afterthought.

Should You Start From a Template or a Blank Canvas?

Start from a template, not a blank canvas. A blank canvas forces you to solve design problems and learn the tool at the same time, which is the slowest way to learn Framer. A good template gives you a working structure to explore, reverse-engineer and customise, so you learn how layers are organised, how components work and how CMS collections are set up by seeing them already done.

Pick a template that matches what you want to build, duplicate it, and rebuild it as your own. Change the text first, then the images, then the colours and fonts, and only then start rearranging sections. By the time you have replaced everything, you will understand the structure well enough that starting from scratch becomes a real option. Before that point, it is mostly guessing.

Templates are not cheating. Every experienced Framer user in the beginner guides consulted for this article gives the same advice: the fastest education Framer offers is taking a good template apart. The skill is not starting empty; it is knowing what to keep, what to change and what to delete.

What Are Frames, Stacks and Grids in Framer?

Frames, stacks and grids are Framer's three layout containers, and mixing them up is the most common beginner mistake. Frames are free-form containers: you position children manually with X and Y coordinates, which is good for fixed layouts where you need precise control. Stacks arrange children automatically, vertically or horizontally, with consistent spacing — think of them as flexbox — which is good for navbars, button groups and card rows that need to reflow. Grids arrange children in rows and columns automatically, which is good for portfolios, image galleries and any repeating card layout.

Most real Framer layouts combine all three. A page might be a frame containing a stack navbar, with a grid section for project cards. Once you recognise how they nest together, layouts start making sense visually. If a section breaks on mobile, the cause is almost always a free-floating frame where a stack or grid should have been.

Two controls handle almost all spacing inside a stack: padding, which is the space between the stack's edge and its children, and gap, which is the space between children. Set those two numbers and stop pushing elements around by hand. Manual nudging breaks the moment the layout reflows, which is exactly when you need it to hold.

How Do You Learn the Canvas Quickly?

Learn a handful of shortcuts in your first session, and use the layers panel instead of clicking around on the canvas. The shortcuts worth learning first are Space plus drag to pan, Command or Control plus scroll to zoom, F for a frame, T for a text layer, R for a rectangle, and Command or Control plus D to duplicate a layer. Ten minutes with these saves hours of hunting through menus.

The layers panel, on the left of the canvas, shows exactly how every element is nested: which piece is a frame, which is a stack, which is a component. Clicking there selects precisely, without accidentally grabbing a nested element. Name your layers from day one — "Hero Section" and "Card Grid" instead of "Frame 327" — because a complex page is only navigable when its layers read like a table of contents.

Why Does Text Get Cut Off in Framer?

Text gets cut off because its container has a fixed height that is shorter than the text inside it. When you select a text layer, the width and height fields in the right panel each carry a sizing mode, and the fix is usually to set the height to Fit Content, so the box grows to show everything inside it. That matters most with CMS content, where one blog excerpt is short and the next is three lines longer.

Set your colour and font tokens before you design anything serious. In Framer, colour and font tokens live in the right panel under Styles, and changing a token cascades across every element that uses it. Without tokens, changing a brand colour means hunting down every layer that uses it by hand. A typical site needs only a primary colour, a secondary colour, a background, primary and secondary text colours, and one accent.

How Do You Build Your First Framer Site, Step by Step?

Build your first site in this order: sign up, pick a template, replace content, fix the structure, add components, set breakpoints, then publish. Working in that order keeps you from polishing a hero section for an hour before discovering the template's structure does not support the pages you actually need.

First, sign up at framer.com and create a project from a template in the Framer marketplace. Spend twenty minutes clicking through the template's pages and layers before changing anything, so you know which pieces repeat and which are one-offs. Then replace the content section by section, starting with the headline and the main call to action, because those are the parts a visitor reads first.

Next, turn repeated pieces into components. A component is a reusable element — a button, a card, a navbar — that you define once and use everywhere, so editing the master updates every instance at once. The beginner mistake is building the same card on every page without making it a component, which works fine until you need to change it and find yourself updating forty copies by hand. To create one, select the element, right-click, and choose Create Component, then drag copies from the Assets panel onto your pages.

Variants give components their interactive states. A button component might have a Default variant, a Hover variant and a Pressed variant, and Framer handles the transition between them automatically when you connect them to interactions. This is how hover effects and toggle animations happen without code. Keep animation purposeful: a fade-in on scroll that reveals a section as the reader reaches it earns its place, while a button that wiggles for no reason only distracts.

Finally, preview constantly. The preview, from the play button at the top right or Command or Control plus P, shows real scrolling, real hover states and real animations. Design a section, preview it, adjust, and preview again. Treating preview as part of the design loop, not a final check, means far fewer surprises when you go live.

How Does the Framer CMS Work?

The Framer CMS manages repeating content from a structured database instead of duplicated pages. It has three parts: a collection, which is a database of similar items such as "Blog Posts"; fields, which are the data each item contains, such as Title, Date, Thumbnail and Content; and a collection page, which is a template page that displays each item using its fields. One blog template plus fifty CMS items gives you fifty blog pages without building fifty pages.

Start with the minimum fields you genuinely need. For a portfolio, that is Title, Slug, Thumbnail, Description, Tags and Date. For a blog, it is Title, Slug, Cover Image, Excerpt, Content, Date and Category. You can always add fields later, but removing them is harder once content is already linked, and a bloated field list makes every new entry slower to write.

One small CMS habit pays off immediately: use field variables in page titles and meta descriptions. In a collection page's settings, setting the title to the Title field plus your site name gives every post its own unique title automatically, instead of every post sharing one generic title. Set it up once on the template and every item inherits it.

On the free plan, Framer's own pricing FAQ lists 10 CMS collections and 1,000 pages, with 5 MB file uploads and one free locale to try. That is generous for learning and for a small site, and it is why the free plan works as a design environment even before you pay anything. The paid line is not the CMS; it is the custom domain, as the pricing section below explains.

How Much Does Framer Cost in 2026?

Framer costs $0 on the free plan, $10 a month for Basic and $30 a month for Pro when billed yearly, with Enterprise priced on request. Framer prices per site, not per account, so three websites mean three site plans, while AI credits are the exception and are shared across your whole workspace. Paying monthly costs roughly a third more, around $15 a month for Basic and $45 a month for Pro, according to pricing guides that read Framer's official pricing page in October 2026.

The free plan's real limits are the ones that matter to a live site: no custom domain, so your site lives on a Framer subdomain with Framer branding, and only 1 GB of bandwidth, which is enough for a test site but not for real traffic. Framer's own FAQ confirms the shape of the free plan and adds that workspaces without a subscription can collaborate with up to three editors, while paid plans include monthly credits that power Agents, Localization and other AI features. The free workspace receives 500 credits to try Agents.

Be careful with older guides. Many still quote a Mini plan at $5 a month or a Scale plan at $100 a month, and pricing guides updated in October 2026 note that both are gone: the current site plans are Free, Basic, Pro and Enterprise, and Pro now extends with usage up to 700 pages, 40,000 CMS items and 2 TB of bandwidth with add-ons. If a guide quotes Mini or Scale, check its date before trusting its numbers. Prices are shown in your local currency at checkout, with taxes added on top.

The practical rule is simple. Stay on Free while you are learning or building a test site where Framer branding and a Framer subdomain do not hurt. Move to Basic at $10 a month when you need a custom domain for a portfolio or small marketing site. Move to Pro at $30 a month when you need staging, deeper CMS collections, longer analytics history and real AI credit volume for client work. Extra editors cost around $20 a month each, so keep the editor list short.

Framer vs Webflow vs Figma: Which Should You Pick?

Pick Framer if you want to design and publish a site in one tool without code. Pick Webflow if you need deeper control over HTML and CSS, a larger e-commerce setup, or a bigger team workflow, and you are willing to accept a steeper learning curve. Pick Figma if you only need designs and prototypes, not a live website, because Figma does not publish or host sites at all.

The comparison guides consulted for this article agree on the shape of the trade-off. Framer undercuts Webflow on price for personal and small projects, and its Figma-like canvas makes it the gentler first step for designers. Webflow offers more control and more scalability for content-heavy and e-commerce sites. Figma remains the better pure design tool, and many Framer users still start a design in Figma and import it, using Framer's Figma import to paste a design onto the canvas and then rebuild its static groups as responsive stacks.

If you are choosing between Framer and the AI app builders, the distinction is just as clean. Tools such as the Lovable beginner guide, the Bolt beginner guide and the v0 beginner guide generate apps from a written prompt, which is fast but leaves you editing generated code. Framer gives you direct visual control over every section, which is slower to start but easier to refine by hand. Choose the prompt-driven builder when you want an app quickly, and Framer when you want a designed site you can tune pixel by pixel.

How Do You Publish Your First Framer Site?

Publish to your Framer subdomain first, then connect your custom domain. First, set the SEO basics, which take about ten minutes: a favicon in Site Settings, a social preview image at 1200 by 630 pixels, and a unique meta description under 160 characters for every page. Without a favicon, browsers show a generic globe icon in the tab, and without a social image, shared links show a blank preview.

Next, check the mobile breakpoint before you publish anything. Switch to the mobile view, at around 390 pixels wide, and scroll through every page. The most common mobile problems for beginners are text overflowing its container, images not scaling correctly, and absolutely positioned elements breaking on mobile. All of them are fixable in minutes if you catch them before launch, and embarrassing to discover after.

Then publish to your free Framer subdomain and check the live site thoroughly in a real browser, not just in the canvas preview. Real browser rendering occasionally differs from the Framer preview, especially with custom fonts, third-party scripts and animations. Once the subdomain version looks right, connect your custom domain in Site Settings, under Domains. This two-step approach means your custom domain always points to a version you have already verified.

Finally, ship before it is perfect. A site that is live and ninety percent right is far more valuable than a site that is one hundred percent right and still sitting in your workspace. Framer makes iterating fast: publish, share, get feedback, and improve. The best Framer sites are built in public, not perfected in private.

Sources

Every price, limit and feature claim in this article was checked against a source fetched on 2026-10-29, or against a pricing guide that states it read Framer's official pricing page in October 2026. Older Mini and Scale prices were deliberately excluded as outdated.

• Framer pricing FAQ — free plan contents (10 CMS collections, 1,000 pages, 5 MB uploads, one free locale, 500 Agent credits, up to three editors without a subscription), custom domain requires a paid plan, credits shared across the workspace.
• Framer Academy: Learn the Framer interface — the five views (Canvas, CMS, localization, Analytics, Settings), canvas layout, layers and assets panels, Agent, branches, preview before publishing.
• UIhub: Framer Tips for Beginners — start from a template, canvas shortcuts, frames versus stacks versus grids, layers panel, sizing modes, components and variants, CMS structure, preview, mobile check, SEO basics, publish to the subdomain first.
• Newoffset: Framer Pricing 2026 (updated October 15, 2026) — Free, Basic $10 a month and Pro $30 a month billed yearly, per-site pricing, free-plan limits, Mini and Scale plans removed.
• Goodspeed: Framer Pricing Explained (updated October 28, 2026) — Basic and Pro yearly prices, Pro extension ceilings (700 pages, 40,000 CMS items, 2 TB bandwidth), editor seats at $20 a month.
• LanderLab: Framer Pricing 2026 — prices read from Framer's official pricing page on September 22, 2026, per-site billing, bandwidth metering, Scale plan removed.
• Daily Company News: How to Use Framer, Step by Step Guide for Beginners — beginner step order (account, canvas, stacks, Figma import, components, CMS, breakpoints).

Frequently Asked Questions

Is Framer free?

Yes, Framer has a free plan that includes the full visual editor, 1,000 pages, 10 CMS collections and 500 Agent credits. The free plan publishes to a Framer subdomain with Framer branding, and you need a paid plan to connect a custom domain.

Do I need to know code to use Framer?

No. A standard Framer site — pages, sections, components, animations and CMS content — needs no code at all. Code helps only if you want custom embeds or advanced interactions, and it is never required for a first site.

What is the difference between Framer and Figma?

Figma produces designs and prototypes that someone else must build into a website. Framer produces the live website itself, including hosting and publishing. Many designers start in Figma and import into Framer, then rebuild static groups as responsive stacks.

Can I use my own domain on the free plan?

No. Framer's own pricing FAQ states that connecting a custom domain requires a paid plan. Publish to your free Framer subdomain first, check the live site, then upgrade to Basic and connect your domain.

How does the Framer CMS work for a blog?

Create one "Blog Posts" collection with fields for Title, Slug, Cover Image, Excerpt, Content, Date and Category, then design one collection page template. Every item you add to the collection automatically gets its own page from that template, so one template plus fifty items gives you fifty blog pages.