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

Community

Meetups

Awards

Customers

Enterprise

Pricing

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

start

scroll

Navigation

Desktop Menu

Mobile Menu

Mobile Menu: Fade-In

Horizontal Side Scroller

Scroll Direction

Relative Overlays

Responsive Dropdown Menu

start

navigation

Effects

Page Effects

Component Effects

Creative Effects

Rotating Grid on Scroll

Wave Animation

Apple Zoom Scroll Effect

Canvas-like website

Overlays

start

effects

CMS

Overview

Import

Filtering

Date Filtering

Conditionals & Transforms

Scroll Sections

Localization

Bold & Italic

Code Blocks

Reference Collections

start

cms

Insert Menu

Carousel

Cookie Banner

Input

Search

Slideshow

Ticker

start

insert

Settings

Metadata

Password Protection

Custom Code

Custom Domains

Redirects

Staging & Versions

Analytics

Version History

start

management

Code

Progress Feature Section

start

code

Courses

Fundamentals

Documentation Site

Mastering Code Overrides

start

courses

Academy

Get Started

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

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.

An SVG icon of the Framer Logo.
An SVG icon of the Framer Logo.
An SVG icon of the Framer Logo.

The internet is your canvas

Get Started for Free

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.
An SVG icon of the Framer Logo.
An SVG icon of the Framer Logo.

The internet is your canvas

Get Started for Free

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.
An SVG icon of the Framer Logo.
An SVG icon of the Framer Logo.

The internet is your canvas

Get Started for Free

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