Learn about Framer's tools, features, and best practices.
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 your Figma project into Framer.
Importing from Sketch
How to import a Sketch project to Framer.
Teams and Folders
How to use Teams and Folders to organize your projects.
An infinite area where you can create and organize your design.
All of the commands for tools, panels, and functions.
A tree view of every Frame, Component and other layer on your canvas.
Inspect and edit a layer's layout, styling, and other properties.
A collection of tools and menus to help you design.
An advanced component written in code.
Create reusable building blocks within your project.
SVG’s are called Graphics in Framer.
A container for other layers.
An editable vector graphic.
A component with paginated content.
A layer to function as your device screen.
A component with scrollable content
A container that applies a stack layout to its layers.
An auto-sizing container for styled text.
For dynamic designs that adapt to changes in content.
Creating responsive designs
Find out how to make your prototypes respond to different screens.
A collection of interactive and customizable components.
Create custom vector graphics in Framer's drawing mode.
Use the Insert Menu to find components, patterns, packages and more.
Collections of components and shared colors.
Replace a layer with a component.
Rulers and Guides
Position layers exactly where you want them.
Create and edit a collection of reusable colors.
Smart Component size limits
Learn more about reducing component size.
Start your projects with a template
Using Custom Fonts
Uploading your local fonts to use in your Framer project
Design an animation.
Automatic time-based transitions
Trigger transitions based on time delays.
The Component Canvas is where you can customize the Variants and Variables of your components
Learn to add events to elements within components
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
Smoothly animate a transition.
Page and Scroll Interactions
Find out how to add scroll and page interactions.
View your project's interactive prototype.
Navigate between Screens.
Using Variants and Variables in your components
Create interactive states for components in your prototype
Variables are custom (property) controls created for components
Variants are used to specify the different interactive states for a component
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.
How to share custom fonts with your entire team
Start managing your components with the Team Library.
Setting different types of permissions on Framer team projects.
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.
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.
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.
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.
Create files and edit your code.
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.
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
Writing Components without TypeScript