Learn Framer

Learn Framer

Learn Framer

Browse video tutorials, examples, and articles.

Browse video tutorials, examples, and articles.

Browse tutorials, examples, and articles.

In-App Tutorial

Follow along and learn all the app basics right from within the Framer app.

Follow along and learn the basics from within Framer.

Follow along and learn the basics from within Framer.

Examples

Helpful demos you can play with and remix.

Videos

Follow us on YouTube for 20+ more helpful videos.

Get Started

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

Elements

How to create a download button

How to add a form to my site

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

Layout

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

How to absolute position inside a stack

How to set VW and VW for full viewport layout

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

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 Variants

Component Variables

Component Transitions

How to share Components?

Component Creation

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 for editors

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 / 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 Code Handshake

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 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

Use

⌘

F

or

CTRL

F

to Search