CMS / FRAMER
Framer: Complete Guide to the Website Builder, CMS, Design & Responsive Websites
Framer is a visual website-building platform combining a design-oriented canvas, reusable components, responsive layout, a CMS, interactions, SEO, localisation, publishing and hosting.
This guide uses Framer’s own terminology accurately, with honest comparisons and no invented plan limits or pricing.
- Canvas, components, variants, stacks and breakpoints
- CMS collections, fields, items and dynamic pages
- SEO, localisation, AI workflows, publishing and limits
Layers on the left, canvas on the right. Structure and styling are built visually, and the layer tree becomes the published markup.
THE BASICS
What Is Framer?
Framer is a visual website-building platform with a design-first workflow. You build on a canvas using reusable components and content-aware layout, then publish to Framer’s hosting — with a CMS, SEO controls, localisation and developer extensibility alongside.
Its origin shows in how it works. Framer came from the design-tool world rather than the CMS world, so the editing experience feels closer to a design application than a page builder. Designers tend to find it immediately familiar; people arriving from WordPress often need to adjust expectations about where things live.
That heritage shapes the trade. You get fine-grained visual control and genuinely good interaction tooling, within a platform whose content modelling is lighter than a dedicated CMS and whose infrastructure you do not manage.
It suits marketing sites, SaaS and startup sites, portfolios, agency sites, product pages and content-driven sites where design quality is part of the value.
On plans and limits: Framer’s pricing, CMS limits, localisation availability and feature access vary by plan and change. Check framer.com rather than any article’s figures.
Visual Builder
Design and structure built on a canvas, not in code.
Responsive Design
Breakpoints and content-aware layout across devices.
CMS
Collections, fields and items driving dynamic pages.
Components
Reusable structures with variants for consistency.
Interactions
Hover, click and scroll behaviour built visually.
SEO
Titles, metadata, redirects and indexing controls.
Localisation
Locales, translated content and localised paths.
AI Workflows
Assisted drafting and generation, with human review.
What Framer combines
├── Variables — shared values
│ ├── Colours
│ ├── Typography
│ └── Spacing
├── Components
│ ├── Navigation
│ │ ├── Desktop variant
│ │ └── Mobile variant
│ ├── Button
│ │ ├── Primary
│ │ ├── Secondary
│ │ └── Outline
│ └── Card
│ ├── Default
│ └── Featured
└── Pages — built from components
One button component, four variants. Change the component and every instance across the site follows.
DESIGN SYSTEM
The Canvas, Components, Variants and Variables
The canvas is Framer’s workspace: a visual surface with a layer tree, frames, text, images and components. You build structure and styling directly, and what you arrange becomes the published markup — which means layer structure affects SEO and accessibility just as hand-written markup would.
Visual building does not eliminate code entirely. Custom integrations, specific behaviours and some structural control still benefit from it.
Components are reusable structures — a navigation bar, a button, a card, a testimonial block, a pricing panel. Build one, use it everywhere, and editing the component updates every instance. On a site of any size this is the difference between maintainable and not.
Variants are versions of a component. A button with primary, secondary and outline variants. A card with default and featured states. Navigation with desktop and mobile arrangements. Variants keep related things in one component rather than scattered across near-duplicates, which is exactly how design drift starts.
Variables hold shared values — colours, typography, spacing. Referenced across the site, so changing one updates everywhere it is used. This is the token layer beneath components.
Together these form a design system: variables define values, components define structures, variants define states. Investing in them early is what separates a Framer site that stays coherent from one that becomes forty one-off frames.
LAYOUT
Stacks, Grids, Breakpoints and Responsive Design
Stacks are Framer’s content-aware layout mechanism: elements arranged in a direction with gap, alignment and padding, reflowing as content and container size change. They are the responsive foundation.
The contrast worth understanding is manual positioning versus content-aware layout. Manually placed elements hold their position and break when content length or viewport size changes. Stacked elements adapt. Overusing absolute positioning is the most common cause of Framer layouts that look right at one width and fall apart at another — and it is tempting precisely because the canvas makes manual placement easy.
Layout grids provide column and gutter guides for aligning content consistently. They are design aids rather than visible production elements, and can be configured per breakpoint.
Breakpoints let layouts adapt to viewport size. Framer provides desktop, tablet and mobile breakpoints with the ability to adjust layout at each. These are not separate websites — one site with layout variations.
One thing catches people out: component-level behaviour can need separate configuration. A page-level breakpoint change does not automatically govern how every component arranges itself internally, particularly text sizing inside components. If a component looks wrong on mobile while the page around it is fine, that is usually why.
Test at real viewport sizes on real devices. Canvas previews are close, not identical. See our responsive design guide.
The same content adapting across breakpoints. Content-aware layout handles much of this; the rest is configured per breakpoint.
├── Fields
│ ├── Title — text
│ ├── Slug — becomes the URL
│ ├── Body — rich text
│ ├── Cover — image
│ ├── Published — date
│ ├── Featured — boolean
│ ├── Author — reference
│ └── Categories — reference
├── Items — the individual records
└── Detail page — one design, every item
COLLECTION: AUTHORS
└── Referenced by posts
COLLECTION: CATEGORIES
└── Referenced by posts
CMS
Framer CMS: Collections, Fields, Items and Dynamic Pages
The Framer CMS stores structured content separately from design, so content can change without anyone opening the canvas.
A collection is a structured content type — Blog Posts, Case Studies, Team Members, Projects, Events, FAQs. Fields define what each record holds, with types including text, rich text, image, date, number, boolean, link, colour, file and references to other collections. Items are the individual records.
A CMS detail page is a template designed once, from which Framer generates a page per item at its own URL — /blog/post-name, /projects/project-name. Change the template and every generated page changes with it. That is the point of the CMS: a hundred posts means one design.
Collection lists display items elsewhere, with filtering, sorting and limits — a homepage showing recent posts, a filtered project index, a team grid.
References connect collections: a post pointing at an author, a project at a category. This makes author pages and category listings possible. Framer handles straightforward relational structures well and is not an arbitrary relational database — deeply nested requirements will meet limits.
Filtering through categories, tabs or search makes larger collections navigable rather than an endless list.
Worth noting for teams: content editors can update CMS items without working on the canvas, which keeps content workflows separate from design work.
CMS IN PRACTICE
Where the Framer CMS Earns Its Place
Anything appearing more than a handful of times with the same shape belongs in a collection rather than being built page by page.
Blog
Posts with authors, categories and dates.
Case Studies
Structured project write-ups with consistent presentation.
Portfolio
Projects with galleries, tags and detail pages.
Team Directory
People with roles, photos and biographies.
Documentation
Structured articles with categories and navigation.
News
Dated announcements and updates.
Events
Dates, venues and registration details.
FAQs
Questions grouped by topic, reused across pages.
The combination that makes Framer work at scale is components plus CMS. You design a card component once, connect it to a collection, and every item renders through it. Changing the card changes the whole listing; adding an item adds a card.
This is the same discipline as the design system more generally: structure defined once, content flowing through it. Sites that skip it — hand-building each card, duplicating each layout — become unmaintainable at exactly the point they start succeeding.
MOTION & SPEED
Interactions, Animation and Performance
Interactions are among Framer’s strongest features, which is unsurprising given its origins. Hover states, click behaviour, scroll-driven effects, transitions and component state changes are all built visually, without writing animation code.
Capability invites overuse, so a standard worth holding: good interaction serves purpose, feedback and performance. Motion that clarifies what happened or where attention should go is useful. Motion that exists because it was easy to add is decoration, and it slows pages, distracts readers and makes sites feel sluggish on mid-range phones.
Three specifics matter. Entrance animations on every element make a page feel slow rather than polished. Scroll-driven effects cost main-thread work, which shows up most on the devices with least to spare. And people who have asked their system for reduced motion deserve that respected rather than overridden.
Never make navigation depend on animation. If motion fails, the site should still work.
On performance generally: Framer handles hosting and delivery. Page weight is yours. The usual causes of a slow Framer site are large images, heavy video, many font variations, complex interaction chains and third-party scripts.
Core Web Vitals measure loading, responsiveness and visual stability — LCP, INP and CLS. No platform guarantees a score, and no Framer site is automatically fast. Measure with real-user data rather than assuming. See our Core Web Vitals guide.
SEO & LOCALISATION
SEO, Metadata and Localisation
Framer provides the SEO controls that matter: per-page titles and meta descriptions, slug control, Open Graph settings, indexing controls, redirect management, sitemap generation and the ability to add structured data. It does not make a site rank — content, relevance and implementation do. See our website SEO guides.
The important piece is CMS SEO. On a detail page template you connect SEO fields to collection data, so each generated page gets metadata built from that item’s own content. Getting this wrong means a hundred posts sharing one title — invisible until someone checks, and worth checking on any Framer site you inherit.
A design-first platform carries a specific risk: headings chosen for size rather than structure. A text element styled large is not a heading unless it is set as one. Check the actual heading hierarchy rather than trusting how the page looks.
Localisation handles multilingual and multi-region sites through locales. Framer covers translated page content, CMS content, metadata, alt text, localised URL paths and the language signalling search engines use.
Worth stating clearly: localisation is not translating visible text. URL paths, metadata, alt text, structured content and hreflang relationships all form part of it, and a site with translated headlines but English metadata and identical URLs is not localised in any way search engines will recognise.
AI-assisted translation speeds the first pass and does not end the job. Review by someone who speaks the language is the difference between a localised site and an embarrassing one. Localisation also does not guarantee international rankings — it makes you eligible to compete.
Framer SEO checklist
- Page title and meta description set for every page
- CMS detail page SEO connected to collection fields
- Slugs readable and planned before publishing
- One H1 per page with a logical heading structure
- Alt text on images including CMS image fields
- Open Graph settings for social sharing
- Indexing controls reviewed for staging and utility pages
- Redirects set for any changed URLs
- Internal links placed within content
- Structured data added where genuinely applicable
- Localised pages checked for correct paths and metadata
- Search Console verified and indexing monitored
[ ] Page title and meta description set for every page [ ] CMS detail page SEO connected to collection fields [ ] Slugs readable and planned before publishing [ ] One H1 per page with a logical heading structure [ ] Alt text on images including CMS image fields [ ] Open Graph settings for social sharing [ ] Indexing controls reviewed for staging and utility pages [ ] Redirects set for any changed URLs [ ] Internal links placed within content [ ] Structured data added where genuinely applicable [ ] Localised pages checked for correct paths and metadata [ ] Search Console verified and indexing monitored
EXTENDING FRAMER
Forms, Custom Code, Plugins and AI
Forms
Contact and lead capture built visually, with fields, validation and success states. Submissions can be handled by Framer or passed to external services. Handling and limits depend on your plan — and whichever route you use, test the full submission path before launch. Silent form failures cost enquiries nobody knows were lost.
Custom Code
Framer supports custom CSS, JavaScript and embeds for analytics, marketing tags, third-party widgets and structured data. Useful, and worth restraint — custom code affects performance, introduces dependencies, can break accessibility and is the part nobody documents. If native functionality covers it, use that.
Plugins & Integrations
Framer's plugin ecosystem extends design workflows, CMS operations, localisation, icons and data synchronisation. CMS content can be connected to external sources such as Notion, Airtable or spreadsheets through plugins or APIs — availability varies by plugin and plan, so check rather than assume. See our website APIs guide.
AI Workflows
Framer offers AI-assisted creation — generating page structures, drafting content, assisting CMS work and translation. Genuinely useful for getting past a blank canvas and for repetitive work. Treat output as a draft. AI produces confident inaccuracies, cannot supply first-hand experience, and guarantees nothing about rankings.
PUBLISHING & PLATFORM
Publishing, Hosting, Accessibility and Security
Publishing runs from canvas to preview to live, with a staging URL for review before going live. Before publishing is worth a routine: check mobile at real sizes, verify SEO titles and metadata, test forms, confirm the 404 page and favicon, and check analytics is connected.
Hosting is part of the platform — infrastructure, CDN, SSL and deployment included, with no server to manage or software to update. The corresponding reality: a Framer site cannot be exported and hosted elsewhere as a working site. Content and assets can be extracted; the site itself lives on the platform.
Domains connect by pointing DNS at Framer, with HTTPS provided. Follow Framer’s current documented instructions rather than records quoted elsewhere.
Accessibility deserves particular attention on a design-first platform, because the canvas makes it easy to produce something that looks structured without being structured. Semantic headings rather than large text, real alt text, sufficient contrast, keyboard operability, visible focus states, form labels and correct language attributes are all your decisions. No platform makes a site compliant. See our website accessibility guide.
Security: the platform handles infrastructure, HTTPS and maintenance. Account security and multi-factor authentication where available, team permissions, third-party integrations and any custom code remain yours. A hosted platform reduces risk substantially; it does not eliminate it.
COMPARISONS
Framer Compared With Other Platforms
These describe differences rather than declaring winners. Each platform suits some projects and not others.
Framer vs Webflow
The closest comparison, and the most useful. Both are hosted, design-led platforms with a CMS. Webflow exposes the layout model more directly, which suits people who think in CSS terms. Framer comes from design tooling, with stronger interaction work and a gentler path for designers. Neither is better; they attract different people for understandable reasons.
Framer vs WordPress
Different categories more than competitors. WordPress is a broad CMS ecosystem covering almost any requirement, with ownership, portability and the work of running it. Framer is an integrated design-led platform with no maintenance and real boundaries. A content operation with complex requirements points one way; a design-led marketing site points the other.
Framer vs Wix and Squarespace
All hosted, with different audiences. Wix and Squarespace target people who want a good site without thinking about layout systems, and include more built-in business tooling. Framer assumes you care about design control and offers fewer ready-made business features.
Framer vs Shopify, Joomla and Drupal
These sit in genuinely different territory. Shopify is commerce-first — products, variants, inventory, hosted checkout and a commerce app ecosystem. Framer can present products and support commerce-related sites, and it is not built around catalogue management or checkout operations. A real store should start with Shopify; a design-led brand site that mentions products need not.
Joomla and Drupal are self-hosted CMS platforms modelling arbitrary content with granular permissions on infrastructure you control. They expect technical capacity and reward it with depth Framer does not attempt. Framer offers design quality and no operational burden instead.
The pattern across all of these: Framer competes on design quality and integrated simplicity, not on content modelling depth, commerce machinery or infrastructure control. Knowing what it is competing on makes the choice straightforward.
FIT
When Is Framer a Good Choice?
Framer can be considered when a project’s shape matches what it does well. Fit is the honest question rather than ranking.
SaaS & Startup Sites
Where design quality signals product quality and iteration is constant.
Marketing Sites
Where teams publish and adjust without developer involvement.
Portfolios
Where the site demonstrates the capability it describes.
Agency & Studio Sites
Where the site is the strongest piece in the portfolio.
Product Landing Pages
Where interaction and presentation carry the message.
Multilingual Sites
Where localisation is needed without assembling it from parts.
And where another platform may be more appropriate:
Complex Backend Logic
Server-side processing beyond integrations and APIs.
Deep Content Modelling
Arbitrary structures, granular permissions, editorial workflow at scale.
Real Commerce
Catalogues, inventory, checkout operations.
Large Plugin Needs
Where a vast third-party ecosystem is essential.
Infrastructure Control
Where self-hosting or data residency is required.
Platform Dependency
Where the inability to move the site is unacceptable.
Strengths
- Design-first workflow familiar to designers
- Fine-grained visual control
- Interactions that are genuinely good
- Components and variants supporting real design systems
- A capable CMS with references and dynamic pages
- Localisation built in rather than assembled
- Hosting, SSL and publishing included
- AI-assisted workflows for drafting and repetitive work
Trade-offs
- Platform boundaries you cannot work around
- No infrastructure-level control
- Content modelling lighter than a dedicated CMS
- Commerce is not its focus
- Custom code adds maintenance you own
- Migration away means rebuilding
- A smaller ecosystem than WordPress
The consideration deserving most weight is platform dependency. A Framer site cannot be moved elsewhere and remain a Framer site. For a marketing site that will be redesigned in three years anyway, that is often a sensible trade. For an organisation with long-term infrastructure requirements, it is a decision to make deliberately rather than discover later.
SaaS
Startup
Agency
Portfolio
Personal Brand
Marketing
Landing Page
Blog
Documentation
Case Studies
Creative Studio
Business
OPERATIONS
Migration, Maintenance and Troubleshooting
Migrating to Framer is a rebuild. There is no import that recreates a WordPress or Webflow site on the canvas — design is rebuilt, components recreated, CMS structure modelled and content imported.
The order that works: audit the existing site, map pages and every URL, preserve SEO metadata, rebuild the design, recreate the CMS structure, import content, rebuild forms and integrations, configure redirects, test mobile and SEO, connect the domain, publish, then monitor indexing.
Redirects decide whether a migration succeeds. URL structures differ between platforms, so most URLs change, and without a mapping you lose accumulated search visibility and break every external link.
Migrating away from Framer is worth understanding before committing. Content and assets can be extracted; design must be rebuilt elsewhere, CMS content mapped, URLs planned again and integrations replaced. It is a rebuild in both directions.
On maintenance: a hosted platform removes infrastructure work, not website work. Content ages, SEO metadata needs setting on new pages, forms break silently, localised content drifts out of sync, and components accumulate inconsistency unless someone tends them.
For troubleshooting, the reliable first question is what changed?
These are possible causes rather than diagnoses. The same symptom frequently has several causes.
Overusing Absolute Positioning
The single most common cause of broken responsive layouts.
Ignoring Mobile
Checking only the canvas preview, never a real device.
Inconsistent Components
Near-duplicates instead of variants.
No Design System
Styling element by element until nothing can change.
Excessive Animation
Motion added because it was easy, not because it helps.
Huge Images
Uploading originals on an image-led site.
Headings Chosen for Size
Structure sacrificed to appearance.
Static CMS SEO Fields
A hundred pages sharing one title.
Weak Internal Linking
Links only in navigation, never in content.
Unnecessary Custom Code
Reaching for code when native features cover it.
Unreviewed Translations
Machine output published without a speaker reading it.
Not Testing Forms
Silent failures costing enquiries nobody counts.
Maintenance checklist
- Content and CMS items kept current
- SEO metadata set on new pages and CMS templates
- Forms tested end to end
- Redirects maintained for changed URLs
- Broken links checked
- Analytics and Search Console reviewed
- Performance measured periodically
- Accessibility rechecked after design changes
- Mobile layouts verified after edits
- Component consistency reviewed as the site grows
- Custom code and embeds reviewed
- Localised content kept in sync
- Integrations confirmed still working
[ ] Content and CMS items kept current [ ] SEO metadata set on new pages and CMS templates [ ] Forms tested end to end [ ] Redirects maintained for changed URLs [ ] Broken links checked [ ] Analytics and Search Console reviewed [ ] Performance measured periodically [ ] Accessibility rechecked after design changes [ ] Mobile layouts verified after edits [ ] Component consistency reviewed as the site grows [ ] Custom code and embeds reviewed [ ] Localised content kept in sync [ ] Integrations confirmed still working
FAQ
Framer: Frequently Asked Questions
Short answers to the questions people ask most about Framer as a design platform, CMS and hosted service.
NEXT TOPICS
Related CMS Topics
Compare Framer with WordPress, Webflow, Wix, Squarespace, Shopify, Joomla and Drupal to find the platform that fits your goals.
WordPress
A self-hosted CMS with a very large plugin ecosystem and full ownership.
Joomla
An open-source CMS with hierarchical content and granular access control.
Drupal
An open-source CMS built around arbitrary content modelling.
Webflow
A hosted platform exposing the layout model for precise design control.
Wix
A hosted builder with free-form placement and a large app ecosystem.
Shopify
A commerce-first platform built around catalogue and checkout.
Squarespace
A hosted builder with design templates and integrated hosting.
Website SEO
How SEO principles apply across any platform, including Framer.
Explore More Website Platforms
Compare Framer with WordPress, Webflow, Wix, Squarespace, Shopify, Joomla and Drupal to understand which platform best fits your website, content, design and development requirements.