Framer is a visual website builder that lets designers and non-developers ship production-grade sites without writing code. This beginner tutorial walks you through the workspace, canvas, layouts, components, CMS, and publishing, so you can launch your first Framer site in one afternoon and feel confident editing it on your own.
What is Framer?
Framer started as a prototyping tool sitting next to Figma in the designer toolbox. It has grown into a full website builder that exports real, fast, indexable sites without ever touching a code editor. You design on a visual canvas, drop in components, connect a CMS, and click Publish. The result is a hosted site on a global CDN with built-in SEO controls, analytics, and forms.
The closest comparison most people reach for is Figma. Both share a similar canvas, similar shortcuts (V for select, T for text, F for frame), and a similar layer panel. The difference is what happens when you press Publish: in Figma you get a shareable mockup, in Framer you get a live website at your own domain.
Compared to traditional builders like WordPress, Wix, or Squarespace, Framer feels less like filling in a template and more like designing in Figma. You start from a blank canvas (or a starter), add Stacks for layout, drop in components, and the responsive system follows your decisions. For freelancers, founders, and in-house designers who want full creative control without learning React, Framer hits a sweet spot.
Setting Up Your First Project
Head to framer.com and sign up with email or Google. The free plan gives you a Framer subdomain (yoursite.framer.website), unlimited projects, and the full editor. Paid plans (Mini, Basic, Pro) unlock a custom domain, more CMS items, password protection, and team features. For your first project, the free plan is enough.
After signing in you land in your workspace dashboard, a container for all your projects, sites, and team members. Click New Project. You can start blank or pick a template; for a tutorial run, start blank so you actually learn where each piece lives.
Once the editor opens, take 30 seconds to look around. The left panel shows Pages and Layers. The center is the Canvas. The right panel is the Properties inspector (size, position, fill, typography, effects). Along the top sits the toolbar with Insert, Assets, CMS, and Publish. At the bottom right are your breakpoint switchers: Desktop, Tablet, Phone. Framer is responsive by default, and you will design for all three breakpoints from the start.
Understanding the Canvas
The Canvas is where everything happens. Unlike Figma, where each Frame is a self-contained artboard, in Framer each Page is a real route on your website. The Home page is your root URL. Add a page called About and Framer creates the /about route automatically. This one-to-one mapping between Pages and URLs is the mental model to internalize early.
Inside a page you build with Sections and Frames. A Section is a full-width horizontal band, like a hero, a feature row, a testimonial strip, or a footer. Sections stack vertically down the page and define the natural scroll structure. Inside each Section you place Frames, Text, Images, and Components.
Scroll behavior is page-level. By default a page scrolls vertically through its sections. You can pin a section so it stays fixed while content scrolls past it, or trigger scroll-linked animations once you are comfortable with the basics. For your first build, stack Sections top to bottom and trust the defaults.
Building Your First Layout
The single most important concept in Framer layout is the Stack. A Stack is a container that arranges its children in a row or column with a defined gap and padding. If you have used Auto Layout in Figma or Flexbox in CSS, Stacks will feel familiar; they are the engine that makes Framer sites responsive without absolute coordinates.
To create a Stack, select two or more layers and press Shift+A, or click the Stack icon in the toolbar. Choose horizontal or vertical, set a gap, and set padding. When the viewport changes, the Stack reflows its children gracefully instead of breaking.
Framer supports three positioning modes: Stack (children flow with gap and padding), Fixed (absolute coordinates inside the parent), and Sticky (pins on scroll). For 90% of beginner work you want Stacks everywhere; reserve Fixed for decorative shapes, badges, or overlays where exact placement matters. The Framer Stacks layout guide walks through gap, padding, and distribution in detail.
A practical first layout: create a Section, drop a vertical Stack inside, add a Text layer for your headline, a Text layer for your subhead, and a Button. Set the Stack gap to 16 pixels and padding to 80 pixels. Your hero is done.
Working with Components
Framer ships with primitives (Text, Frame, Image, Stack, Button) and a growing library of pre-built components in the Insert menu: navigation bars, accordions, marquees, testimonials, pricing tables, and more.
The real power shows up when you make your own components. Select any group of layers (say, a feature card with icon, headline, and description), right-click, and choose Create Component. Now you can reuse that card across the site, and editing the master updates every instance. Same mental model as Figma components, done visually.
Components support Variants, which are different states of the same component. A Button might have Default, Hover, and Pressed variants. A Navigation might have Desktop and Mobile variants. You define each variant once and Framer handles the transitions. For a deeper walkthrough, see the Framer components guide.
Styling and Typography
Good styling in Framer starts with tokens. Click the color swatch on any layer, then click the plus icon to save it as a Color Style. That color now lives in your project library and updates everywhere when you change it. Do the same for type: set a heading style once, save it as a Text Style, then apply it across the site.
Tokens are the difference between a site you can update in one click and a site where you hunt for stray colors. Set up a small palette (primary, neutral, background, accent) and a type scale (display, H1, H2, H3, body, small) before you build the second page. The Framer variables and tokens guide covers the full system including modes for dark and light themes.
For responsive typography, use Framer’s fluid sizing. Set min and max sizes and let the type scale smoothly with the viewport. A 64px desktop hero that shrinks to 36px on mobile feels natural and avoids overflow on small screens.
Adding Interactions and Animations
Framer makes basic interactions trivial. Select any layer, open the Interactions tab, and choose a trigger (Hover, Press, Tap, Click, Scroll). Pick what changes (opacity, scale, position, color, rotation) and Framer animates between the states. No keyframes, no timeline, no code.
Three interactions cover most beginner needs. Hover scale on buttons (scale to 1.05 on hover with a 200ms transition) adds polish. Press feedback (scale to 0.97 on press) makes buttons feel tactile. Scroll-in animation on sections (start at opacity 0 and translate Y 40, animate to opacity 1 when in view) gives the page life without being noisy. Resist the urge to animate everything; the fastest Framer sites use motion sparingly.
Connecting the CMS
The CMS turns Framer from a website builder into a publishing platform. Open the CMS tab and click New Collection. A Collection is like a database table: a name (Blog Posts, Case Studies, Team Members) and Fields (title, slug, cover image, body, author, date).
For a blog you might use Title (plain text), Slug, Cover (image), Excerpt, Body (rich text), Author, and Date. Add a couple of test entries so you have something to design against.
Back on the canvas, create a new page and set it as a CMS template linked to your collection. Framer auto-generates dynamic routes (yoursite.com/blog/your-post-slug) for every entry. Design the template once with content bound to the fields, and Framer renders every entry against that design. Add a Collection List on your blog index page to display all entries as cards.
Publishing Your Site
When you are ready to go live, click Publish in the top right. Framer publishes to a free yoursite.framer.website subdomain first. Visit it, click around, fix what you see, and republish. The cycle is fast (usually under 10 seconds).
To go live on your own domain, upgrade to a paid plan and open Site Settings, then Domains. Add your custom domain and Framer shows you the DNS records to add at your registrar (Cloudflare, GoDaddy, Namecheap, etc). Once DNS propagates, Framer issues an SSL certificate automatically. The how to publish on Framer guide walks through the full domain and SSL flow with screenshots.
Before you publish, set per-page SEO in the right panel of each page: page title (under 60 characters), meta description (under 155 characters), Open Graph image (1200×630). Framer auto-generates a sitemap.xml and submits it to search engines if you connect Google Search Console. For performance, Framer ships images in modern formats (AVIF, WebP), lazy-loads media below the fold, and serves from a global CDN by default. You do not have to think about performance the way you would on WordPress.
Next Steps and Common Mistakes
Five pitfalls catch nearly every beginner. Avoiding them will save you hours.
1. Skipping breakpoints until the end. Design Desktop, Tablet, and Phone in parallel from the first section. Fixing a 60-section site that was never checked on mobile is brutal. Switch breakpoints often as you build.
2. Using Fixed positioning instead of Stacks. Fixed coordinates do not adapt to content changes. If your headline grows by one line, everything below it breaks. Default to Stacks; reach for Fixed only when a layer genuinely needs to overlap or anchor.
3. Inline styles instead of tokens. Picking a fresh hex value for every layer guarantees a redesign nightmare. Define color and text styles once and apply them everywhere.
4. Over-animating. Three good animations beat 20 mediocre ones. If a visitor notices the motion before the message, the motion is too loud.
5. Forgetting SEO basics. A blank page title and missing meta description will tank your search visibility no matter how good the design is. Set the SEO fields on every page before you publish.
Once the basics feel comfortable, your natural next moves are: build a second page with a CMS collection, set up a custom domain, add a contact form with Framer Forms, and connect Google Analytics. If you would rather have a professional build the site for you while you focus on the business, see the Framer Websites pricing page for done-for-you build options.
Frequently Asked Questions
Do I need to know how to code to use Framer?
No. Framer is fully visual. You can build, publish, and maintain a professional site without writing a single line of code. Developers can drop in custom React code overrides for advanced behavior, but it is optional and most users never touch it.
How long does it take a beginner to build a first Framer site?
A simple one-page site with a hero, three feature sections, and a footer takes most beginners 2 to 4 hours from blank canvas to live URL. A small multi-page marketing site (5 to 8 pages with a blog CMS) typically takes 15 to 25 hours spread over a week or two of evenings.
Is Framer SEO-friendly?
Yes. Framer renders server-side HTML, generates a sitemap.xml automatically, supports per-page meta titles and descriptions, Open Graph images, canonical URLs, and structured data. Pages serve from a global CDN with strong Core Web Vitals out of the box. Connect Google Search Console and your pages get indexed normally.
Can I move a Framer site to another platform later?
You can export your HTML and CSS as static files from Framer (on paid plans), which gives you a portable version of the site. CMS data exports as JSON. If you build with semantic structure and avoid platform-specific gimmicks, moving to another host or rebuilding on a different platform is straightforward.
What is the difference between a Frame and a Stack in Framer?
A Frame is a generic container with manual sizing and positioning. A Stack is a Frame with layout rules attached: it arranges its children in a row or column with a defined gap and padding, and reflows them when the viewport changes. Use Stacks for almost all layout work; use plain Frames mostly for decorative wrappers.