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.
Editor
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.
Layers
Code Component
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.
Designing
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.
Templates
Start your projects with a template
Using Custom Fonts
Uploading your local fonts to use in your Framer project
Prototyping
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
Collaborating
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.
Sharing
Exporting Assets
Export your designs as images.
Handoff Mode
See distances between layers and copy layer properties as code.
Previewing on a mobile device
How to view your prototype on mobile device.
User testing
Set your prototypes up for user testing
Desktop App
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.
FAQ
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 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 do my exported assets look different than on the canvas?
How to ensure that your computer's color profile is set up correctly.
Code
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.