Using Framer

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

An advanced component written in code.

Components

Create reusable building blocks within your project.

Custom SVG’s

SVG’s are called Graphics in Framer.

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.

Auto Size

For dynamic designs that adapt to changes in content.

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.

Importing from Figma

How to import your Figma project into Framer.

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.

Smart Component size limits

Learn more about reducing component size.

Templates

Start your projects with a template

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

Event Variables

Learn to add events to elements within 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 Screens.

Using Variants and Variables in your components

Create interactive states for components in your prototype

Variables

Variables are custom (property) controls created for components

Variants

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

Comment Mode

How to leave comments, replies, and resolve issues.

Inviting teammates to join your team via link

How to invite teammates to join your team with the link option.

Mass inviting users to your team

There are two ways to mass invite users to your team

Moving Projects to and Between Teams

Organizing your team package files

How to keep your team packages organized.

Real time Collaboration

How to work together in Framer.

Recommending teammates to join your team

Enable the recommended team option to allow teammates to join your team.

Sharing a Prototype Preview

Share a fully interactive preview of your prototype.

Team Fonts

How to share custom fonts with your entire team

Team Library

Start managing your components with the Team Library.

Team Permissions

Setting different types of permissions on Framer team projects.

Creating and using Private Links

If your project is in a Pro or Enterprise team, you can set the project link to be private.

Export to HTML

How to export your project as an HTML file

Exporting Assets

Export your designs as images.

Handoff

See distances between layers and copy layer properties as code.

Password Protected Prototypes

Password-protected prototypes for enterprise teams.

Previewing on a mobile device

How to view your prototype on mobile device.

Setting permissions to projects

There are different ways to ensure controlled access to projects.

User testing

Set your prototypes up for user testing

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.

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.

Download a prototype to the Framer mobile app.

Learn to download a preview for offline viewing.

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.

New desktop apps for Windows and Mac

Framer app for Windows and Mac

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.

Technical requirements for the desktop macOS app

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

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.

Framer Products

What is the difference between all the Framer products?

How can I play sounds in my Framer prototype?

How to include audio in your prototype.

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.

Legacy Team Packages

Team Packages are being deprecated—here's what you need to know.

Making the most out of your Pro account

Take advantage of Pro features in Framer.

Masking an Image

How to mask images using the Overflow property.

Performance Mode

Learn what Performance Mode does.

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 the new Smart Components mean for legacy Design Components

Find out how your existing projects are affected by the new components

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 are my animations in iOS not smooth?

Learn how to ensure smooth animations in iOS.

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.

Can I put my components on Storybook?

How to use Framer together with Storybook.

Code Editor

Create files and edit your code.

Code Overrides

How to control your prototype with code.

Communicating between Components

How to use overrides to share data across components.

Deprecated Code Component Width and Height Props

Using width and height props in code components will no longer be available.

Differences between Preview and Export in code

Understand the differences between how canvas elements are rendered in the built-in preview

Enabling Code In Framer

How to enable and work with code in Framer.

Legacy Code

Learn about the new model for code in Framer.

Overriding Code Components

Controlling code components with code overrides.

Setting custom fonts from code

How to use local fonts in a code component.

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 NPM packages in Framer

How use packages from NPM in Framer.

Using SVGs in code

How to include an SVG image in your code.

Working with Arduino

Connect your prototypes to your Arduino.

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.