How to Use Framer: Build and Publish Your First Site (2026)

What you can build in Framer

Framer is a website builder you use like a design tool: you lay pages out on a freeform canvas, then publish them as a live, hosted site without writing code. It's at its best for marketing sites, landing pages, portfolios, and startup sites — the kind of project where the design and the motion matter and the content stays manageable.

It's the wrong tool for a few things, and it's worth knowing before you start so you don't build into a wall. There's no native store, so it isn't for ecommerce. The CMS strains under a large blog or a heavy content hub. And it isn't an app platform — no backend, no custom logic. If that's what you're building, stop here; for everything else, the rest of this guide gets you from a blank canvas to a published site.

Before you start: what you need

You need a free Framer account, and that's enough to build the entire site and preview it. The catch is publishing: on the free plan your site goes live on a `yoursite.framer.website` subdomain (Framer also offers `.photos`, `.media`, and `.wiki`) and carries a non-removable “Made in Framer” badge. You cannot connect your own domain on Free.

A tour of the interface

Framer's editor is a canvas with a few panels around it. Here's what each one does.

• The canvas. The middle of the screen, where your pages live. You drag elements onto it, move them, and resize them directly — the same way you'd work in Figma.
• The Insert panel. Where you add things to the page: pre-made sections, navigations, and menus, plus the element library — icons, media, and forms. Most of a first build is opening the Insert panel and dropping pieces onto the canvas.
• The layers panel. The structured list of everything on the page — sections, frames, text, images. It's how you select and reorder elements when clicking on the canvas gets fiddly.
• Breakpoints. Framer builds responsive sites, but you set it up. Select your desktop page, then click the + to add a tablet and a phone breakpoint. Each new breakpoint inherits the desktop layout, and you override it per screen size from there.

Building your first site, step by step

You have two ways to start a new project: Start with AI, or a blank canvas. For a first build, starting from AI gives you something to react to instead of an empty page — but either works.

1. Open a new project

Choose Start with AI or the blank canvas.

2. Lay out your first section

Open the Insert panel and drop in a pre-made section — a hero, a nav, a footer. Adjust the text and images directly on the canvas.

3. Add the rest of the page

Do it the same way: pull sections, navigations, and menus from the Insert panel, and add icons, media, or a form from the element library.

4. Make it responsive

Select the desktop page, click + to add tablet and phone breakpoints, then check each one and fix anything that overflows or stacks badly.

5. Preview it

See the live behavior — animations, hover states, and how it reflows on each breakpoint — before you publish.

Using Framer's AI: Wireframer and Workshop

Framer leans hard on AI, and there are two pieces worth knowing on a first build.

Wireframer drafts a layout from a prompt. Open it from the Insert panel → Wireframer, or just press W, then describe what you want in the left sidebar. Treat the result as a starting point you edit, not a finished design.

Workshop is a free plugin from Framer that turns an idea into a custom AI component — useful once you need something the built-in elements don't cover. Both are a head start; neither replaces the editing pass.

The SEO basics, before you publish

Framer covers the SEO fundamentals out of the box: it auto-generates your `sitemap.xml` and `robots.txt`, handles SSL, and serves fast pages — none of which you have to set up. What's on you is the per-page meta: a unique title and description for each page, set in Page Settings.

One thing to know now: 301 redirects, which preserve your rankings when a URL changes, are a Pro-plan feature — they aren't on Free or Basic. That only bites if you're migrating an existing site. Our Framer SEO guide walks through meta, redirects, and Search Console properly.

Publishing your site

1. Click Publish

Use the Publish button (top-right of the editor). Framer hosts your site instantly on a default `yoursite.framer.website` subdomain.

2. That's it for a free or test site

It's live.

To connect a custom domain (Basic plan and up):

1. Open the domain settings

Go to Site Settings → Domains → “Connect a domain you own.”

2. Enter your domain

Framer shows you the DNS records to add.

3. Add those records at your registrar

Do this wherever your domain lives (Cloudflare, GoDaddy, and the like).

4. Wait for “Connected”

Wait for the status to read “Connected.” DNS changes can take up to 48 hours, though it's usually faster.

5. Publish to the domain

Click Publish again and choose your custom domain.

Inviting people to your project

To bring in a teammate or a client, use the members button in the top-right, enter their email, and set their role to Editor or Viewer. Editors can change the site; viewers can only look.

If you're moving a design over from Figma, you can copy it in Figma (⌘/Ctrl+C) and paste it straight into Framer (⌘/Ctrl+V), or use the official “Figma to HTML with Framer” plugin. Bring it in one section at a time and use Auto Layout — that's what keeps the conversion clean.

Tips and the mistakes beginners actually make

A few things that trip people up on a first site:

• Forgetting to republish. Edits don't go live on their own. Hit Publish again after changes — this catches almost everyone once.
• Skipping breakpoints. If you only design the desktop view, your site overflows and breaks on phones. Add the tablet and phone breakpoints and check each one.
• Building the whole thing on Free. You can build everything on the free plan, but you can't launch it on a custom domain or remove the badge — that needs Basic. Decide on the plan before you're attached to the build.
• Leaving meta blank. Give every page a unique title and description in Page Settings; don't let Framer ship the defaults.

For the full keyboard shortcut list, open the project menu → Help → Keyboard Shortcuts — that's the source of truth in-app. The one worth memorizing on day one is W for Wireframer.

What to learn next