Made in Framer

Learn.

Tutorials, videos, examples, and articles to get started with Framer.

In-App Tour

An interactive overview of the basics within Framer.

Follow along and learn the basics of Framer.

3 Hour Course

Build a 3D site without code with Framer.

Videos

Browse all 30+ videos on YouTube.

Examples

Demos to remix into your site.

Get started

Use

⌘+F

or

CTRL+F

to search.

Create a landing page

15m

Start from Figma

10m

Create a blog with the CMS

5m

What is Framer?

Importing from Figma

Importing from Sketch

Publishing your Site

Previewing your Site

Collaborating in Framer

Managing Content (CMS)

Configuring Site Settings

How to use templates

Layout

Layout and Sizing

15m

Breakpoints

10m

Make A Responsive Topbar

11m

How to hide the navigation & status bar on mobile (iOS)

How to use Fixed and Absolute positioning in Stacks

How to use Viewport Height (100vh)

How to make my component responsive

How to make my site responsive

How to set min and max sizes for elements

How to add breakpoints for text styles

Sticky Scroll

Using Overlays

Layout Pinning

Layout Tool

How to use Grids

How to use Breakpoints

Auto Sizing Basics

Elements

Smooth Scrolling Links with Scroll Targets

How to add icons

How to add a carousel

How to add inputs and forms

How to draw a line

How to create a download button

How to add an iframe or embed script

How to make an autoplaying video

How to make a video overlay

Using Scroll Effects

Using 3D Effects

Adding Videos

Using Text Styles

Text Tool Basics

Linking to Pages or URLs

Drawing Graphics

SEO

Intro to SEO in Framer

Structured Data using JSON-LD for SEO

Titles for SEO

Semantic Elements for SEO

Page Performance for SEO

Links for SEO

Keywords for SEO

Descriptions for SEO

How to setup redirects to maintain SEO ranking

Components

Component Creation

Component Variants

Component Variables

Component Transitions

How can I share components?

Create Carousels and Animated Tickers

How To

How to report an issue

How to make your site fast

How to create a video background

How to let others remix your site

How to add copy to clipboard

How to manage charges

How to use Font Awesome

How to make a robots.txt file

How to set aspect ratio

How to setup Google Analytics

How to use background blur

How to set the z-index for an element

How to translate to multiple languages & localize your site

How to share components with my team

How to disable pointer events

How to make my screen fill the sides on mobile

How to create a mobile hamburger navigation

Hosting

Versions, Staging and Testing

How to self host using reverse proxy

Hosting with CloudFlare

Hosting with Amazon CloudFront

Rollback to a previous publish

About Site Pre-rendering

Domains and Subdomains

Custom Hosting

Using Built-In Analytics

Code

How to add a scroll scrub effect

How to work with real dynamic data

How to create a custom integration

Creating Custom Forms

Custom Code

Using Handshake Code

Using Code Overrides

Using Code Components

How to add a custom class to an element

Advanced

How to make a sitemap.xml file

How to configure SSO for your organization

How to track user events or metrics

How to whitelist Framer domains

How to use url query variables for dynamic content

How to use legacy packages on your site

How to integrate with your current site

How to export your site to HTML

How to add a CDN to my site

How to Convert a Prototyping Projects to Sites

Optimizing for Accessibility

GDPR and Cookies

Publishing Prototypes

Adding Custom Fonts

Browser Compatibility

Prototyping Plans

Private Sites

Debugging

How to debug CSS optimization errors

How to fix nested links

How to replace missing fonts

How to view your site offline

How to use the Web Inspector for errors

How to see if your site is fast with Lighthouse

How to debug your site performance

How to debug network / SSL / certificate

How to debug links that don't work

How to debug canvas performance

How to debug a publish or optimization warning

Common Issues

Get started

Use

⌘+F

or

CTRL+F

to search.

Create a landing page

15m

Start from Figma

10m

Create a blog

5m

What is Framer?

Importing from Figma

Importing from Sketch

Publishing your Site

Previewing your Site

Collaborating in Framer

Managing Content (CMS)

Configuring Site Settings

How to use templates

Layout

Layout and Sizing

15m

Breakpoints

10m

Make A Responsive Topbar

11m

How to hide the navigation & status bar on mobile (iOS)

How to use Fixed and Absolute positioning in Stacks

How to use Viewport Height (100vh)

How to make my component responsive

How to make my site responsive

How to set min and max sizes for elements

How to add breakpoints for text styles

Sticky Scroll

Using Overlays

Layout Pinning

Layout Tool

How to use Grids

How to use Breakpoints

Auto Sizing Basics

Elements

Smooth Scrolling Links with Scroll Targets

How to add icons

How to add a carousel

How to add inputs and forms

How to draw a line

How to create a download button

How to add an iframe or embed script

How to make an autoplaying video

How to make a video overlay

Using Scroll Effects

Using 3D Effects

Adding Videos

Using Text Styles

Text Tool Basics

Linking to Pages or URLs

Drawing Graphics

SEO

Intro to SEO in Framer

Structured Data using JSON-LD for SEO

Titles for SEO

Semantic Elements for SEO

Page Performance for SEO

Links for SEO

Keywords for SEO

Descriptions for SEO

How to setup redirects to maintain SEO ranking

Components

Component Creation

Component Variants

Component Variables

Component Transitions

How can I share components?

Create Carousels and Animated Tickers

How To

How to report an issue

How to make your site fast

How to create a video background

How to let others remix your site

How to add copy to clipboard

How to manage charges

How to use Font Awesome

How to make a robots.txt file

How to set aspect ratio

How to setup Google Analytics

How to use background blur

How to set the z-index for an element

How to translate to multiple languages & localize your site

How to share components with my team

How to disable pointer events

How to make my screen fill the sides on mobile

How to create a mobile hamburger navigation

Hosting

Versions, Staging and Testing

How to self host using reverse proxy

Hosting with CloudFlare

Hosting with Amazon CloudFront

Rollback to a previous publish

About Site Pre-rendering

Domains and Subdomains

Custom Hosting

Using Built-In Analytics

Code

How to add a scroll scrub effect

How to work with real dynamic data

How to create a custom integration

Creating Custom Forms

Custom Code

Using Handshake Code

Using Code Overrides

Using Code Components

How to add a custom class to an element

Advanced

How to make a sitemap.xml file

How to configure SSO for your organization

How to track user events or metrics

How to whitelist Framer domains

How to use url query variables for dynamic content

How to use legacy packages on your site

How to integrate with your current site

How to export your site to HTML

How to add a CDN to my site

How to Convert a Prototyping Projects to Sites

Optimizing for Accessibility

GDPR and Cookies

Publishing Prototypes

Adding Custom Fonts

Browser Compatibility

Prototyping Plans

Private Sites

Debugging

How to debug CSS optimization errors

How to fix nested links

How to replace missing fonts

How to view your site offline

How to use the Web Inspector for errors

How to see if your site is fast with Lighthouse

How to debug your site performance

How to debug network / SSL / certificate

How to debug links that don't work

How to debug canvas performance

How to debug a publish or optimization warning

Common Issues

Get started

Use

⌘+F

or

CTRL+F

to search.

Create a landing page

15m

Start from Figma

10m

Create a blog with the CMS

5m

What is Framer?

Importing from Figma

Importing from Sketch

Publishing your Site

Previewing your Site

Collaborating in Framer

Managing Content (CMS)

Configuring Site Settings

How to use templates

Layout

Layout and Sizing

15m