Using Framer | Framer

Dashboard

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 Sketch

How to import a Sketch project to Framer.

Importing from Framer Desktop

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

Teams and Folders

How to use Teams and Folders to organize your projects.

Archiving a Project

How to archive a project.

Best Practices for setting up a Team

Learn the best approaches on setting up your team.

Editor

Toolbar

A collection of tools and menus to help you design.

Canvas

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

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.

Keyboard Shortcuts

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

Layers

Frame

A container for other layers.

Text

An auto-sizing container for styled text.

Stack

A container that applies a stack layout to its layers.

Scroll

A component with scrollable content

Page

A component with paginated content.

Icon

A static vector image.

Graphic

An editable vector graphic.

Design Component

A reusable Frame with a primary and instances.

Code Component

An advanced component written in code.

Designing

Creating responsive designs

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

Using Custom Fonts

Uploading your local fonts to use in your Framer prototypes.

Insert Menu

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

Packages

Collections of components and shared colors.

Default Components

A collection of interactive and customizable components.

Shared Colors

Create and edit a collection of reusable colors.

Rulers and Guides

Position layers exactly where you want them.

Replace With

Replace a layer with a component.

Drawing Mode

Create custom vector graphics in Framer's drawing mode.

Prototyping

Page and Scroll Interactions

Find out how to add scroll and page interactions.

Preview Window

View your project's interactive prototype.

Transitions

Navigate between layers.

Interactions

Trigger actions and transitions in your prototype.

Magic Motion

Smoothly animate a transition.

Animation Editor

Design an animation.

Collaborating

Real time Collaboration

How to work together in Framer.

Comment Mode

How to leave comments, replies, and resolve issues.

Organizing your team package files

How to keep your team packages organized.

Sharing

Prototype view

Create a link to share your prototype online.

Previewing on a mobile device

How to view your prototype on mobile device.

Adding a Device Frame to your prototype

Learn to use the Device component.

Handoff Mode

See distances between layers and copy layer properties as code.

Exporting Assets

Export your designs as images.

Desktop App

Moving projects between the desktop and web app

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

Setting permissions to projects

There are different ways to ensure controlled access to projects.

Automated publishing

How to use the Framer CLI to publish automatically.

Publishing from the CLI

How to publish packages from the Framer CLI.

Integrating projects with git

How to collaborate on a Framer project with git.

Working with folder-backed projects

How to save a Framer project as a folder.

Handing off from the desktop app

Best practices to hand off a desktop app project

Importing a React Design System

How to use an existing React library in Framer.

Export Project as an HTML prototype

How to export your project as a bundled HTML prototype.

Using NPM packages in Framer

How to add and manage a project's dependencies.

Changing your Framer Library version

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

Using images in Code Components

How to include an image in your code.

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.

Using an external code editor with the desktop app

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

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.

Technical requirements for the desktop macOS app

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

Download a prototype to the Framer mobile app.

Learn to download a preview for offline viewing.

Importing Package Components in code

How to include package components in your Code Components.

Getting existing React components on your canvas

How to include NPM package components in your Code Components.

Why does Framer ask for permission to record my screen?

How to set up permissions on macOS Catalina.

Authenticating with a Framer Token

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

Setting custom fonts from code

How to use local fonts in a code component.

Differences between the Framer desktop and web app

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

Framer Desktop app

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

Changes to Framer X

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

Requesting a new sign-in link

How to get a fresh link to sign into Framer.

Activating your account

How to activate your Framer account.

FAQ

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.

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.

Changes to Framer

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

Can I work offline in Framer Web?

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

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.

Can I make real apps with Framer?

Learn where Framer fits in a development process.

How can I play sounds in my Framer prototype?

How to include audio in your prototype.

Can I use Framer with a proxy?

Yes, Framer should automatically recognize proxy settings.

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

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

Why are my Sketch assets copied as a single frame?

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

How do I switch between Day and Night Mode?

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

Why am I seeing background blur artifacts?

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

Masking an Image

How to mask images using the Overflow property.

How do I update my Avatar?

How to change your avatar in Framer Web.

What is FramerTools?

How to install and use the FramerTools application.

Does Framer support version control?

How to manage versions in Framer.

What’s changing to my existing Framer license?

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

Code

Overriding Code Components

Controlling code components with code overrides.

Using Overrides

How to control your prototype with code.

Communicating between Components

How to use overrides to share data across components.

Animating with Overrides

How to animate in your prototype with code.