Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Speedruns
    • Starter Kit
    • Sessions
  • Pricing
  • Blog
  • Updates
  • Support
  • 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.

Read more
Best Practices for setting up a Team

Learn the best approaches on setting up your team.

Read more
Dashboard and Projects

How to find your way around Framer's dashboard.

Read more
Importing from Figma

How to import a Figma project to Framer.

Read more
Importing from Framer Desktop

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

Read more
Importing from Sketch

How to import a Sketch project to Framer.

Read more
Teams and Folders

How to use Teams and Folders to organize your projects.

Read more

Editor

Canvas

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

Read more
Keyboard Shortcuts

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

Read more
Layers Panel

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

Read more
Properties Panel

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

Read more
Toolbar

A collection of tools and menus to help you design.

Read more

Layers

Code Component

An advanced component written in code.

Read more
Components

Create reusable building blocks within your project.

Read more
Custom SVG’s

SVG’s are called Graphics in Framer.

Read more
Frame

A container for other layers.

Read more
Graphic

An editable vector graphic.

Read more
Page

A component with paginated content.

Read more
Screens

A layer to function as your device screen.

Read more
Scroll

A component with scrollable content

Read more
Stack

A container that applies a stack layout to its layers.

Read more
Text

An auto-sizing container for styled text.

Read more

Designing

Creating responsive designs

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

Read more
Default Components

A collection of interactive and customizable components.

Read more
Drawing Mode

Create custom vector graphics in Framer's drawing mode.

Read more
Insert Menu

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

Read more
Packages

Collections of components and shared colors.

Read more
Replace With

Replace a layer with a component.

Read more
Rulers and Guides

Position layers exactly where you want them.

Read more
Shared Colors

Create and edit a collection of reusable colors.

Read more
Templates

Start your projects with a template

Read more
Using Custom Fonts

Uploading your local fonts to use in your Framer project

Read more

Prototyping

Animation Editor

Design an animation.

Read more
Automatic time-based transitions

Trigger transitions based on time delays.

Read more
Component Canvas

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

Read more
Interactions

Trigger actions and transitions in your prototype.

Read more
Known limitations for Variants and Variables

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

Read more
Magic Motion

Smoothly animate a transition.

Read more
Page and Scroll Interactions

Find out how to add scroll and page interactions.

Read more
Previewing

View your project's interactive prototype.

Read more
Transitions

Navigate between layers.

Read more
Using Variants and Variables in your components

Create interactive states for components in your prototype

Read more
Variables

Variables are custom property controls created within a component.

Read more
Variants

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

Read more

Collaborating

Comment Mode

How to leave comments, replies, and resolve issues.

Read more
Organizing your team package files

How to keep your team packages organized.

Read more
Real time Collaboration

How to work together in Framer.

Read more
Sharing a Prototype Preview

Share a fully interactive preview of your prototype.

Read more
Team Fonts

How to share custom fonts with your entire team

Read more
Team Permissions

Setting different types of permissions on Framer team projects.

Read more

Sharing

Creating and using Private Links

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

Read more
Exporting Assets

Export your designs as images.

Read more
Handoff Mode

See distances between layers and copy layer properties as code.

Read more
Previewing on a mobile device

How to view your prototype on mobile device.

Read more
User testing

Set your prototypes up for user testing

Read more

Desktop App

Activating your account

How to activate your Framer account.

Read more
Authenticating with a Framer Token

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

Read more
Automated publishing

How to use the Framer CLI to publish automatically.

Read more
Can I embed my prototypes elsewhere?

How to embed a project online.

Read more
Can I put my components on Storybook?

How to use Framer together with Storybook.

Read more
Changes to Framer X

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

Read more
Changing your Framer Library version

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

Read more
Differences between the Framer desktop and web app

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

Read more
Download a prototype to the Framer mobile app.

Learn to download a preview for offline viewing.

Read more
Export Project as an HTML prototype

How to export your project as a bundled HTML prototype.

Read more
Framer Desktop app

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

Read more
Getting existing React components on your canvas

How to include NPM package components in your Code Components.

Read more
Handing off from the desktop app

Best practices to hand off a desktop app project

Read more
Importing Package Components in code

How to include package components in your Code Components.

Read more
Importing a React Design System

How to use an existing React library in Framer.

Read more
Integrating projects with git

How to collaborate on a Framer project with git.

Read more
Moving projects between the desktop and web app

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

Read more
Publishing from the CLI

How to publish packages from the Framer CLI.

Read more
Requesting a new sign-in link

How to get a fresh link to sign into Framer.

Read more
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.

Read more
Setting custom fonts from code

How to use local fonts in a code component.

Read more
Setting permissions to projects

There are different ways to ensure controlled access to projects.

Read more
Technical requirements for the desktop macOS app

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

Read more
Using NPM packages in Framer

How to add and manage a project's dependencies.

Read more
Using an external code editor with the desktop app

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

Read more
Using images in Code Components

How to include an image in your code.

Read more
Why can’t I open old Framer X projects?

An extra step is required to open your older projects.

Read more
Why does Framer ask for permission to record my screen?

How to set up permissions on macOS Catalina.

Read more
Working with folder-backed projects

How to save a Framer project as a folder.

Read more

FAQ

Can I make real apps with Framer?

Learn where Framer fits in a development process.

Read more
Can I still use Framer Classic?

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

Read more
Can I use Framer with a proxy?

Yes, Framer should automatically recognize proxy settings.

Read more
Can I work offline in Framer Web?

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

Read more
Changes to Framer

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

Read more
Does Framer support version control?

How to manage versions in Framer.

Read more
How can I play sounds in my Framer prototype?

How to include audio in your prototype.

Read more
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.

Read more
How do I switch between Day and Night Mode?

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

Read more
How do I update my avatar?

How to change your avatar in Framer Web.

Read more
Masking an Image

How to mask images using the Overflow property.

Read more
What are these common Framer terms?

Learn some of Framer's terminology.

Read more
What happens when I convert a Classic document to Framer?

Learn how documents from Framer Classic are converted to Framer.

Read more
What is FramerTools?

How to install and use the FramerTools application.

Read more
What the new Smart Components mean for legacy Design Components

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

Read more
What’s changing to my existing Framer license?

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

Read more
Where can I request a feature?

Learn where you can request new features.

Read more
Which domains does Framer require?

Framer requires certain domains to be accessible.

Read more
Why am I seeing background blur artifacts?

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

Read more
Why are my Sketch assets copied as a single frame?

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

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

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

Read more

Code

Adding Property Controls to a Code Component

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

Read more
Animating with Overrides

How to animate in your prototype with code.

Read more
Code Editor

Create files and edit your code.

Read more
Communicating between Components

How to use overrides to share data across components.

Read more
Deprecated Code Component Width and Height Props

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

Read more
Enabling Code In Framer

How to enable and work with code in Framer.

Read more
Overriding Code Components

Controlling code components with code overrides.

Read more
Using Code Overrides

How to control your prototype with code.

Read more
Using Events through Overrides

How to make things happen in response to user actions.

Read more
Using Framer animations in production

How to use your animations from Framer in production.

Read more
Using JSON data in Framer

How to bring local data into your prototype.

Read more
Using SVGs in code

How to include an SVG image in your code.

Read more
Working with live data

How to bring live data into your prototype.

Read more
Working with non-React components in Framer

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

Read more
Writing Components without TypeScript

How to use regular JavaScript in Framer.

Read more

Framer

  • Why Framernew
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Speedruns
  • Starter Kit
  • Sessions

Resources

  • Packages
  • API
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement