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 master and instances.

Code Component

An advanced component written in code.

Designing

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.

Deleting a package from your Team

How to safely delete a team package.

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

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.

Previewing in the browser

How to preview your prototype in a separate browser.

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 Framer Tools?

How to install and use the Framer Tools 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

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.

Using Events through Overrides

How to make things happen in response to user actions.

Code Editor

Create files and edit your code.

Using Code In Framer

Read how to enable Code within Framer.

Working with live data

How to bring live data into your prototype.

Using JSON data in Framer

How to bring local data into your prototype.

Adding Property Controls to a Code Component

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

Writing Components without TypeScript

How to use regular JavaScript in Framer.

Working with non-React components in Framer

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

Using SVGs in code

How to include an SVG image in your code.

Using Framer animations in production

How to use your animations from Framer in production.