Canvas

Design pages and interactions

Adding custom fonts

Learn how to upload and use custom fonts in Framer when the typeface you need isn’t available in the font picker.

Adding videos

Learn how to add, embed, and customize videos in your Framer projects.

Disabling user select on a layer

Prevent users from selecting a specific layer in Framer by adjusting its user select property.

How animations and effects work in Framer

Framer lets you create stunning, high-performance animations and effects without coding. The animation library behind Framer, Motion, powers these animations with smooth, efficient performance.

How do I add clickable email & phone number links

How to add clickable email, phone, and SMS links to elements in Framer.

How to add a scroll-to-top button to your website

How to add a scroll-to-top button in Framer to improve navigation on your website.

How to play a video when it comes into view

Playing a video when it comes into view on your Framer page is a straightforward process that can be achieved without any coding.

How to update components

Learn how to easily and efficiently update your components in Framer.

Overflow: Clip

Learn what the Clip overflow setting does, how it differs from Hidden, and when to use it in your layouts.

Sharing Components

In this guide, we explain how to add components to your library and use them across all projects in your Workspace. You'll learn how to share, insert, update, and import components efficiently.

Unlinking components

To edit components created in another project, you’ll need to unlink them first. This article explains the unlinking options available in Framer and how to use them.

Using event variables

Events in Framer allow actions in components to trigger changes in parent component or on the canvas, such as opening and closing overlays. This guide explains how to add events to create seamless interactions across components.

Using layout templates

Learn how to create reusable page layouts with shared navigations, footers, and sidebars across your site.

Using text styles

Learn how to create, apply, and manage reusable text styles.

Using Triggers

Show overlays and switch component variants based on visitor behavior, conditions, and interactions.

Why aren’t my text style breakpoints working in components?

Learn why text style breakpoints behave differently inside components.