Dashboard
Editor
Layers
Designing
Prototyping
Collaborating
Sharing
Desktop App
FAQ
Code

Using Framer

Learn about Framer's tools, features, and best practices.

Dashboard

Archiving a Project

How to archive a project.

Best Practices for setting up a Team

Learn the best approaches on setting up your team.

Dashboard and Projects

How to find your way around Framer's dashboard.

Importing from Figma

How to import a Figma project to Framer.

Importing from Framer Desktop

How to get your desktop projects to Framer on the web.

Importing from Sketch

How to import a Sketch project to Framer.

Teams and Folders

How to use Teams and Folders to organize your projects.

Canvas

An infinite area where you can create and organize your design.

Keyboard Shortcuts

All of the commands for tools, panels, and functions.

Layers Panel

A tree view of every Frame, Component and other layer on your canvas.

Properties Panel

Inspect and edit a layer's layout, styling, and other properties.

Toolbar

A collection of tools and menus to help you design.

Code Component

An advanced component written in code.

Custom SVG’s

SVG’s are called Graphics in Framer.

Design Component

A reusable Frame with a primary and instances.

Frame

A container for other layers.

Graphic

An editable vector graphic.

Page

A component with paginated content.

Screens

A layer to function as your device screen.

Scroll

A component with scrollable content

Stack

A container that applies a stack layout to its layers.

Text

An auto-sizing container for styled text.

Creating responsive designs

Find out how to make your prototypes respond to different screens.

Default Components

A collection of interactive and customizable components.

Drawing Mode

Create custom vector graphics in Framer's drawing mode.

Insert Menu

Use the Insert Menu to find components, patterns, packages and more.

Packages

Collections of components and shared colors.

Replace With

Replace a layer with a component.

Rulers and Guides

Position layers exactly where you want them.

Shared Colors

Create and edit a collection of reusable colors.

Using Custom Fonts

Uploading your local fonts to use in your Framer project

Animation Editor

Design an animation.

Automatic time-based transitions

Trigger transitions based on time delays.

Component Canvas

The Component Canvas is where you can customize the Variants and Variables of your components

Interactions

Trigger actions and transitions in your prototype.

Known limitations for Variants and Variables

While in Beta, be aware of certain limitations to Variants and Variables

Magic Motion

Smoothly animate a transition.

Page and Scroll Interactions

Find out how to add scroll and page interactions.

Previewing

View your project's interactive prototype.

Transitions

Navigate between layers.

Using Variants and Variables in your components

Create interactive states for components in your prototype

Variables

Variables are custom property controls created within a component.

Variants

Variants are used to specify the different interactive states for a component

Comment Mode

How to leave comments, replies, and resolve issues.

Organizing your team package files

How to keep your team packages organized.

Real time Collaboration

How to work together in Framer.

Sharing a Prototype Preview

Share a fully interactive preview of your prototype.

Team Fonts

How to share custom fonts with your entire team

Team Permissions

Setting different types of permissions on Framer team projects.

Activating your account

How to activate your Framer account.

Authenticating with a Framer Token

How to set up a Framer Token to installing NPM packages.

Automated publishing

How to use the Framer CLI to publish automatically.

Can I embed my prototypes elsewhere?

How to embed a project online.

Can I put my components on Storybook?

How to use Framer together with Storybook.

Changes to Framer X

Framer X will continue to exist, only under a different name.

Changing your Framer Library version

How to downgrade or upgrade your version of the Framer Library.

Differences between the Framer desktop and web app

See the differences between the web and desktop versions of Framer.

Download a prototype to the Framer mobile app.

Learn to download a preview for offline viewing.

Export Project as an HTML prototype

How to export your project as a bundled HTML prototype.

Framer Desktop app

Framer also has a macOS desktop app, learn what it does.

Getting existing React components on your canvas

How to include NPM package components in your Code Components.

Handing off from the desktop app

Best practices to hand off a desktop app project

Importing Package Components in code

How to include package components in your Code Components.

Importing a React Design System

How to use an existing React library in Framer.

Integrating projects with git

How to collaborate on a Framer project with git.

Moving projects between the desktop and web app

How to download and open a project on the desktop app.

Publishing from the CLI

How to publish packages from the Framer CLI.

Requesting a new sign-in link

How to get a fresh link to sign into Framer.

Restoring from a project backup

For projects created with the desktop app, it is possible to jump back in time to an earlier version of your project.

Setting custom fonts from code

How to use local fonts in a code component.

Setting permissions to projects

There are different ways to ensure controlled access to projects.

Technical requirements for the desktop macOS app

Learn about the hardware and software requirements for Framer’s desktop app.

Using NPM packages in Framer

How to add and manage a project's dependencies.

Using an external code editor with the desktop app

How to use your own text editor to edit your project's code.

Using images in Code Components

How to include an image in your code.

Why can’t I open old Framer X projects?

An extra step is required to open your older projects.

Why does Framer ask for permission to record my screen?

How to set up permissions on macOS Catalina.

Working with folder-backed projects

How to save a Framer project as a folder.

Can I make real apps with Framer?

Learn where Framer fits in a development process.

Can I still use Framer Classic?

Framer Classic, previously known as Framer Studio, can still be used but does not receive any more updates.

Can I use Framer with a proxy?

Yes, Framer should automatically recognize proxy settings.

Can I work offline in Framer Web?

Learn about how Framer for the web works online and offline.

Changes to Framer

With our web release, we’ve changed a lot. Learn what’s new.

Does Framer support version control?

How to manage versions in Framer.

How can I play sounds in my Framer prototype?

How to include audio in your prototype.

How do I import my Sketch and Figma projects?

To easily turn your designs into prototypes, Framer allows you to import from Figma and Sketch.

How do I switch between Day and Night Mode?

Learn how to set Framer's theme through the application menu.

How do I update my avatar?

How to change your avatar in Framer Web.

Masking an Image

How to mask images using the Overflow property.

What are these common Framer terms?

Learn some of Framer's terminology.

What happens when I convert a Classic document to Framer?

Learn how documents from Framer Classic are converted to Framer.

What is FramerTools?

How to install and use the FramerTools application.

What’s changing to my existing Framer license?

With Framer Web, some changes will happen to your license.

Where can I request a feature?

Learn where you can request new features.

Which domains does Framer require?

Framer requires certain domains to be accessible.

Why am I seeing background blur artifacts?

The background blur property is still in beta and not fully supported by all browsers.

Why are my Sketch assets copied as a single frame?

How to make sure that your Sketch imports are working correctly.

Why do my exported assets look different than on the canvas?

How to ensure that your computer's color profile is set up correctly.

Adding Property Controls to a Code Component

How to create a custom user interface for your component's properties.

Animating with Overrides

How to animate in your prototype with code.

Code Editor

Create files and edit your code.

Communicating between Components

How to use overrides to share data across components.

Enabling Code In Framer

How to enable and work with code in Framer.

Overriding Code Components

Controlling code components with code overrides.

Using Code Overrides

How to control your prototype with code.

Using Events through Overrides

How to make things happen in response to user actions.

Using Framer animations in production

How to use your animations from Framer in production.

Using JSON data in Framer

How to bring local data into your prototype.

Using SVGs in code

How to include an SVG image in your code.

Working with live data

How to bring live data into your prototype.

Working with non-React components in Framer

To to write a generic React wrapper for any JavaScript component.

Writing Components without TypeScript

How to use regular JavaScript in Framer.