Search

Get started

Build your first site

Layout & Sizing

Breakpoints

Import from Figma

Components

Copy from HTML

Scroll

Scroll Targets

Sticky Scrolling

Scroll Animations

Scroll Transforms

Scroll Variant

scroll

Navigation

How to Link Pages

Desktop Menu

Mobile Menu

Mobile Menu: Fade-In

Horizontal Side Scroller

Scroll Direction

Relative Overlays

Responsive Dropdown Menu

navigation

Effects

Page Effects

Component Effects

Creative Effects

Rotating Grid on Scroll

Wave Animation

Apple Zoom Scroll Effect

Canvas-like website

Overlays

effects

CMS

Overview

CSV import

Filtering

Date Filtering

Conditionals & Transforms

Scroll Sections

Bold & Italic

Code Blocks

Reference Collections

cms

Localization

AI Style

Localization

localization

Insert Menu

Carousel

Cookie Banner

Input

Search

Slideshow

Ticker

insert

Templates

Prepare your Template

Sell on Lemon Squeezy

templates

Settings

Metadata

Password Protection

Custom Code

Custom Domains

Redirects

Staging & Versions

Analytics

Version History

management

Integrations

Shopify Integration

Membership Sites

integrations

Code

Progress Feature Section

code

Courses

Fundamentals

Documentation Site

Mastering Code Overrides

courses

Get started

Start fresh and quickly get up and running.

Build your first site

How to create a simple landing page in Framer—completely from scratch, and in just about 15 minutes.

Layout & Sizing

We’ll cover the differences between Frames, Stacks and Grids, and when to use which.

Breakpoints

Learn best practices for structuring your layouts for optimal responsiveness.

Import from Figma

With the Figma plugin installed, you can copy over layers from Figma to Framer.

Components

A Framer Tutorial about Components, covering Variants, Variables and Interactions.

Copy from HTML

Effortlessly copy and paste web elements from any of your own sites and paste them directly onto the Framer canvas.

Build your first site

Subtitle

Layout & Sizing

Subtitle

Breakpoints

Subtitle

Import from Figma

Subtitle

Scroll

Make your site react to scroll events.

Scroll Targets

Learn how create links that animate to specific sections of your web page.

Sticky Scrolling

Make elements stick and unstick to the top while scrolling their parent.

Scroll Animations

Add high-fidelity effects and animate variants within specific sections.

Scroll Transforms

Design expressive landing pages with complete control over the scroll position.

Scroll Variant

Learn how to create engaging and dynamic phone content that adapts as you scroll through different sections.

Scroll Targets

Subtitle

Sticky Scrolling

Subtitle

Scroll Animations

Subtitle

Scroll Transforms

Subtitle

Navigation

A site without navigation is just a page, learn how to build it in Framer.

How to Link Pages

Learn how to add links to any page, or set up a link to anchor to a specific section of a page.

Desktop Menu

Build a beautiful desktop navigation bar.

Mobile Menu

Creating a mobile menu that animates to the viewport height when opened is easy with the right properties.

Mobile Menu: Fade-In

Make your mobile menu animations more interesting by adding custom transitions.

Horizontal Side Scroller

This release brings new properties that unlock new types of navigation patterns.

Scroll Direction

Kickstart custom animations whenever you scroll up or down, like fading out a navigation bar when people scroll down.

Relative Overlays

Add dropdowns to any layer with Appear Effects, a Dynamic Safe Area, custom positioning, and more.

Responsive Dropdown Menu

Learn how to create a responsive navigation with dropdowns in Framer—completely from scratch.

How to Link Pages

Subtitle

Desktop Menu

Subtitle

Mobile Menu

Subtitle

Mobile Menu: Fade-In

Subtitle

Effects

Spice up your designs with stunning effects and animations.

Page Effects

Built on top of the View Transitions API, Framer is the first tool in which you can explore page to page animations visually.

Component Effects

In this video, we introduce effects in components. This is a major update that will make it easier to create reusable and animated components.

Creative Effects

Light effects make it incredibly easy to add high-fidelity interactions and animations to your site.

Rotating Grid on Scroll

In this video, you’ll learn how to create a rotating grid of videos as you start scrolling down the page.

Wave Animation

Get ready to make a splash with this wave-tastic tutorial.

Apple Zoom Scroll Effect

Go from a full-screen video to a slideshow of videos by scrolling down the page.

Canvas-like website

Create a canvas-like website by making the entire website draggable and include elements you can drag around.

Overlays

Learn how to create video overlays in the following tutorial.

Page Effects

Subtitle

Component Effects

Subtitle

Creative Effects

Subtitle

Rotating Grid on Scroll

Subtitle

CMS

Generate dynamic content with the built-in content management system.

Overview

The CMS has everything you need to manage blog posts, job listings, or marketing pages.

CSV import

Bring content from any source and add it to your Framer site.

Filtering

You can easily filter your CMS collection lists, enabling you to customize the presentation of your content.

Date Filtering

In this video you’ll learn how to build a component that allows your visitors to filter your content by date.

Conditionals & Transforms

With the Is Set conditional for Formatted Text fields, you can adapt your layout based on when your CMS Content exists.

Scroll Sections

Learn how to define Scroll Sections within CMS Collection Lists.

Bold & Italic

With the bold and italic options in Text Styles, you can emphasize your text with granular control of the fonts.

Code Blocks

Document and present your code in Framer with Code Blocks & Inline Code.

Reference Collections

Combine CMS collections to build a dynamic blog with author pages.

Overview

Subtitle

CSV import

Subtitle

Filtering

Subtitle

Date Filtering

Subtitle

Localization

Tailor your entire website to many languages and regions.

AI Style

Add a custom AI Style within your Locale Options to gain full control over how your content is translated. Define your brand tone, add key context, specify ignored words, and more—then let AI Translation handle the rest.

Localization

Localization in Framer is a feature that allows you to easily customize your website for different languages and regions.

AI Style

Subtitle

Localization

Subtitle

Insert Menu

Improve your website with integrations and ready-made layouts.

Carousel

Design smooth CSS-based carousels that can be scrolled, swiped, and navigated between using either arrows or dots.

Cookie Banner

Use the Cookie Banner Component, powered by Google’s Consent Mode.

Input

The Input Component allows you to easily capture email signups on your sites.

Search

Easily add Search functionality into your site by dragging the Search component from the Insert Panel into your project.

Slideshow

Design your own slideshows with custom spring transitions with ease.

Ticker

Create infinitely scrolling sections that connect seamlessly powered by Motion.

Carousel

Subtitle

Cookie Banner

Subtitle

Input

Subtitle

Search

Subtitle

Templates

Learn how to create, use and sell Framer Templates.

Prepare your Template

In this video, you’ll learn how to prepare your Framer template for submission and increase your chances of being accepted on the Framer website.

Sell on Lemon Squeezy

This is a tutorial on how to add your Framer template to Lemon Squeezy and start selling it.

Prepare your Template

Subtitle

Sell on Lemon Squeezy

Subtitle

Settings

Keep your site healthy.

Metadata

Learn how to set your site’s title, description and image for search and socials.

Password Protection

Learn how to add password protection to your Framer website using simple steps.

Custom Code

In this tutorial, you’ll learn how to add Custom Code to your Framer website.

Custom Domains

Learn how to set up a free subdomain or seamlessly integrate your own domain.

Redirects

Learn how to set up redirects to efficiently direct users from one page to another.

Staging & Versions

Learn how to effectively manage staging and versions for your Framer website.

Analytics

Gain valuable insights into how your site and pages are performing.

Version History

Go back in time and copy paste layers into the present.

Metadata

Subtitle

Password Protection

Subtitle

Custom Code

Subtitle

Custom Domains

Subtitle

Integrations

Integrate with third party services to go beyond Framer's built-in features.

Shopify Integration

Turn any Framer site into a functioning Shopify store.

Membership Sites

A third-party tool called FramerAuth now makes it possible to add authentication to your Framer website, which allows you to lock your content to members only.

Shopify Integration

Subtitle

Membership Sites

Subtitle

Code

Learn everything about using code through Custom Code, Code Components and Code Overrides.

Progress Feature Section

Learn how to create an interactive component with a dynamic slide image and progress bar.

Progress Feature Section

Subtitle

Courses

Multi-lesson courses on a single topic.

Mastering Framer Code Overrides

Learn all about code overrides and how to effectively utilize them in your projects.

Full Documentation Site Build

Build a documentation website with search and code blocks from scratch.

Framer Fundamentals

A comprehensive beginner’s course that teaches you everything you need to know to become productive.

An SVG icon of the Framer Logo.

The internet is your canvas

Start for free today

Features

Layout

CMS

Localization

Effects

SEO & Performance

Site Navigation

Site Management

Enterprise

Developers

Resources

Templates

Academy

Updates

New

Hype Feed

Customers

Partners

Become an Expert

Desktop Apps

Figma to Framer

HTML to Framer

Company

Careers

Hiring

Security

Privacy

Abuse

Charges

Terms

Cookies

Community

Community

Meetups

Site Awards

Support

Contact

FAQ

Link to YouTube channel
Link to Instagram feed
An SVG icon of the Framer Logo.

The internet is your canvas

Start for free today

Features

Layout

CMS

Localization

Effects

SEO & Performance

Site Navigation

Site Management

Enterprise

Developers

Resources

Templates

Academy

Updates

New

Hype Feed

Customers

Partners

Become an Expert

Desktop Apps

Figma to Framer

HTML to Framer

Company

Careers

Hiring

Security

Privacy

Abuse

Charges

Terms

Cookies

Community

Community

Meetups

Site Awards

Support

Contact

FAQ

Link to YouTube channel
Link to Instagram feed
An SVG icon of the Framer Logo.

The internet is your canvas

Start for free today

Features

Layout

CMS

Localization

Effects

SEO & Performance

Site Navigation

Site Management

Enterprise

Developers

Resources

Templates

Academy

Updates

New

Hype Feed

Customers

Partners

Become an Expert

Desktop Apps

Figma to Framer

HTML to Framer

Company

Careers

Hiring

Security

Privacy

Abuse

Charges

Terms

Cookies

Community

Community

Meetups

Site Awards

Support

Contact

FAQ

Link to YouTube channel
Link to Instagram feed
An SVG icon of the Framer Logo.

Framer

Features

Resources

Community

Customers

Enterprise

Pricing

Log in

Start for free

An SVG icon of the Framer Logo.

Framer

Start for free

Layout

CMS

Localization

Effects

SEO

Navigation

Management

Resources

Features

Community

Templates

Academy

Updates

Feed

Partners

Experts

Community

Meetups

Awards

Customers

Enterprise

Pricing

An SVG icon of the Framer Logo.

Framer

Start for free

Layout

CMS

Localization

Effects

SEO

Navigation

Management

Resources

Features

Community

Templates

Academy

Updates

Feed

Partners

Experts