Framer Tutorial: Build & Publish Your First Site

Most Framer tutorials either move too fast, assuming you already know the interface, or spend too long on theory before you've actually built anything. This one is a straight checklist: the concrete steps to get from a new account to a published, structured, reasonably SEO-sound site, using Framer's own current interface and documentation as the source of truth. If you want the conceptual background first, what Framer actually is is a good companion read; if you want a broader strategic walkthrough instead of a step list, see our guides on how to build and how to make a website with Framer. This post is the hands-on version.

Step 1: Create your account and start a project

Sign up at Framer's site with an email or a social login, then create a new project from your dashboard. You'll be asked to choose a starting point almost immediately — this decision matters more than it seems, so don't rush past it.

Step 2: Choose your starting point — blank, template, or Agent

You have three real options, and each suits a different situation:

1. Blank canvas — the right choice if you already have a clear design direction in mind, or you're following along with your own layout rather than adapting an existing one. It's the steepest learning curve of the three but gives you full control from the first pixel.
2. A Marketplace template — the right choice if a proven, polished layout already closely matches what you're building. Browse the [official Framer Marketplace](https://www.framer.com/marketplace/) and remix a template into your workspace as a fully editable copy.
3. A Framer Agent prompt — the right choice if you have specific content and sections in mind but no existing design to adapt. Open the Agent tab in your project's sidebar and describe your site in plain language: what it's for, the sections you want, and a style direction. Per [Framer's own Agent documentation](https://www.framer.com/help/articles/how-to-build-a-website-from-scratch-with-framer-agents/), the agent builds a first draft directly on the canvas — a real, editable part of your project, not a static mockup.

For a genuine first project, starting with either a template or an Agent prompt is usually the less discouraging path, since you're editing something rather than staring at empty space. You can always strip a template down or override an Agent's choices heavily once you're more comfortable in the editor.

Step 3: Learn the canvas basics

Before building further, get comfortable with four things: selecting and moving elements, the layers panel for navigating your page structure, the style panel for typography, color, and spacing, and the difference between a "frame" (a layout container) and other element types. You don't need to master everything — just enough to move confidently before styling decisions start piling up.

Step 4: Set your styles first, before building sections

Set your color palette, font choices, and base type scale (heading sizes, body text size, line height) before you start building individual sections. Framer supports reusable style tokens, and defining them early means every section you build afterward pulls from the same consistent system instead of drifting slightly with each new page you add. Skipping this step is the single most common reason a first Framer site ends up feeling visually inconsistent page to page.

Step 5: Build or edit your homepage sections

Whether you started blank, from a template, or from an Agent draft, work through your homepage section by section: hero, core value proposition, proof or features, and a clear call to action. A few habits that matter regardless of starting point:

• Write real copy before judging layout. Placeholder text makes every layout look fine; real content is what actually reveals whether a section works.
• Keep one clear call to action per section, rather than competing buttons pulling attention in different directions.
• Use Framer's built-in animation and interaction tools for entrance effects and hover states rather than skipping motion entirely — it's one of the platform's genuine strengths, and a static-feeling page under-uses it.

Step 6: Add additional pages

Beyond your homepage, most first sites need at minimum an about or company page, a pricing or product page if relevant, and a contact page. Create each as a new page from your project's page panel, and reuse your established styles rather than starting each page's design decisions from scratch — consistency across pages is what makes a site feel like one coherent product instead of several disconnected ones.

Step 7: Set up your CMS if you're building a blog or content section

If your site includes a blog, case studies, or any repeating content type, set up a CMS collection rather than building each entry as a one-off page. Define your fields (title, slug, cover image, body content, publish date, and any categories or tags you need), then build one template page that pulls from the collection — every new entry then reuses that same template automatically. This is dramatically faster than duplicating pages manually, and it scales cleanly as your content grows.

Step 8: Set your SEO basics before publishing

Per Framer's own guide to SEO features and tools, a lot of the technical foundation is automatic — sitemap and robots.txt generation, CDN-backed delivery — but a few things still need your direct attention on every page:

• Set a unique page title and meta description for every page, not just the homepage. Generic or duplicated titles across pages waste an easy ranking signal.
• Add real, descriptive alt text to every image, not filenames or blank fields.
• Set Open Graph settings so social shares show the right title, description, and preview image instead of defaults.
• Confirm your page hierarchy makes sense — clear navigation and a logical URL structure help both visitors and search engines understand your site.

For the deeper strategy behind these basics, see our full SEO guide and our honest breakdown of whether Framer is actually good for SEO.

Step 9: Check responsiveness at every breakpoint

Before publishing, preview your site at desktop, tablet, and mobile widths — not just a quick glance, but an actual click-through of every page. This is the single most skipped step by beginners, and it's the fastest way for a site to look unfinished the moment someone opens it on their phone, which is where a meaningful share of your first visitors will land.

Step 10: Publish to your free Framer subdomain

Once you've reviewed content, links, and responsiveness, publish directly from the editor — there's no separate export or deployment step. Your site goes live on a free Framer subdomain immediately, which is exactly the right setup for testing, sharing with early feedback, and confirming everything works in the real world before you commit to a custom domain.

Step 11: Connect a custom domain when you're ready

When you're ready to go live publicly under your own name, connect a custom domain through your project's settings — either a domain you already own or one purchased through Framer directly. This is a settings change, not a rebuild: your pages, content, and design carry over exactly as they were on the subdomain. Custom domains require at least the Basic plan; see our pricing breakdown and what the Free plan does and doesn't include if you're still deciding when to upgrade.

Step 12: Plan for scale before you need it

If you expect meaningful growth — more pages, more CMS content, more traffic — read Framer's own guide to setting up your site for scale and Framer's guidance on which plan fits which use case before you hit a limit mid-build. Restructuring a CMS or navigation system after a site has grown is meaningfully more work than planning for it a little earlier.

What real, published Framer sites look like

Every step above is aimed at getting you to something that looks intentional, not just technically published. For a sense of what that looks like at different scales, AR Rahman's site shows tight, brand-specific execution on a smaller structure, while Flighty and Relay.app show how a first Framer site's basic structure — hero, features, proof, CTA — scales into a fully realized product marketing site with real design range. None of these started more complicated than the steps above; they got there through iteration on the same fundamentals.

Common beginner mistakes to avoid

• Publishing without a mobile check. Covered above, but it's worth repeating — this is the most common and most avoidable mistake.
• Skipping the style-token setup. Building sections before locking in colors and type leads to visible drift page to page.
• Treating an Agent's first draft as finished. Review content, links, and responsiveness the same way you would for anything built manually.
• Forgetting meta titles and descriptions on secondary pages. The homepage usually gets attention; every other page needs the same care.
• Adding CMS content as one-off pages instead of a real collection. This works for two entries and becomes painful by the tenth.

Key takeaways

• Choosing between a blank canvas, a template, or an Agent prompt is the first real decision, and each fits a different situation.
• Set your styles (colors, type, spacing) before building individual sections to avoid visual drift across pages.
• Framer handles sitemap and robots.txt automatically, but page titles, descriptions, alt text, and Open Graph settings still need your direct attention.
• Publish to a free subdomain first to test everything, then connect a custom domain once you're ready to go live publicly.
• Real sites like [AR Rahman](/websites/ar-rahman), [Flighty](/websites/flighty), and [Relay.app](/websites/relay-app) started from the same fundamentals covered in this tutorial.

Once your site is live, check it against the categories and companies in the gallery for inspiration on where to take it next, browse SaaS and fintech examples if you're in those spaces, and submit your own site once it's published. If you'd rather bring in a specialist for the parts that need more polish than a first build delivers, our services page is the place to start.