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 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 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.
Designing
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.
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
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
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
Collaborating
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.
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.
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
Desktop App
Activating your account
How to activate your Framer account.
Can I embed my prototypes elsewhere?
How to embed a project online.
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.
Importing Package Components in code
How to include package components in your Code Components.
New desktop apps for Windows and Mac
Framer app for Windows and Mac
Requesting a new sign-in link
How to get a fresh link to sign into Framer.
Technical requirements for the desktop macOS app
Learn about the hardware and software requirements for Framer’s desktop app.
Using images in Code Components
How to include an image in your code.
Why does Framer ask for permission to record my screen?
How to set up permissions on macOS Catalina.
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.
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 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.
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.
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.