Get help with everything related to the app, tools and troubleshooting.
Your Canvas is ground zero for experimenting with concepts and designing flows.Read more ›
Framer X includes a powerful code editor to help you explore interactive ideas.Read more ›
The components panel contains all of your created design and code components aswel as downloaded components from packages.Read more ›
Export code to facilitate the transition from design to development.Read more ›
Automatic hierarchy keeps your Layers Panel tidy yet allows for complete freedom.Read more ›
Style elements of your layers like size, radius, fill, multiple shadows, gradients and effects.Read more ›
Rulers and Guides
Position layers exactly where you want them.Read more ›
Speed up your workflow with these keyboard shortcuts for tools, layout and more.Read more ›
Design adaptive interfaces, draw detailed icons and illustrations or build simple multi-screen prototypes.Read more ›
To start using the Path tool, first use the Graphics tool to draw a container on the canvas.Read more ›
Use the interactive tools to quickly add interactions to your designs.Read more ›
Create better layouts with tools specifically made for interface design.Read more ›
There are two types of Frames in Framer X. Canvas-level frames and nested frames.Read more ›
Create, edit, and share colors. Publish colors in a package, and use across elementsRead more ›
To view the styling properties of your layers, you can select one or more layers in the layer list or highlight.Read more ›
In Framer, text is added as a layer with some smart properties of its own.Read more ›
Adding property controls to a code component
The propertyControls static defines what will be rendered within the interface.Read more ›
All components, animations, and gestures are powered by the Framer Library.Read more ›
Design Components are reusable, building blocks that you can compose into larger ones to make up entire interfaces.Read more ›
Getting existing React components on your canvas
You can install existing packages with NPM and expose components within your project.Read more ›
How to organize the Components Panel
Learn how to organize your components inside of Framer XRead more ›
Importing an existing React Design System.
Examples of using your existing React Design System in Framer.Read more ›
Importing Package Components in code
Components from packages can imported into your own components or overrides. Follow these steps to figure out how.Read more ›
Easily replace layers with components.Read more ›
Changing your Framer Library version
When you’re installing a package, you may need to use a different version of the Framer LibraryRead more ›
Click on a package thumbnail to navigate to its detail page. From here, you can install the package.Read more ›
Learn how to publish your packages of design components, code components and shared colors.Read more ›
Learn how to fetch package updates or update your published packages.Read more ›
Preview your projects in any browser, share with others and open on mobile with real-time updates.Read more ›
Aside from previewing your project directly in the browser you can also preview your projects on your mobile device.Read more ›
Learn all about the standalone Preview window that allows you to see an accurate live representation.Read more ›
Framer X can export your project as a web-ready bundle.Read more ›
Animating through Overrides
The Framer Library comes with a set of advanced animation functions. These also work well with overrides.Read more ›
How to include an SVG in code
The easiest way to include an SVG through code is by directly including it in your component.Read more ›
Sharing data between components using Overrides
You can communicate between components by sharing data. The Framer Library includes a Data object that holds your data.Read more ›
Use images from a folder inside your project
You can use url() from the Framer Library to include extra assets.Read more ›
Using Events through Overrides
Use events to make anything in Framer interactive. Events are things that happen, such as click, tap, and swipe.Read more ›
Using Framer animations in production
Learn how to use your animations from Framer X in productionRead more ›
Using images in code components
You'll need to reference a URL where the image lives.Read more ›
Using JSON data in Framer X
Framer X fully supports JSON data.Read more ›
Using NPM packages in Framer X
Framer X uses NPM with Yarn to manage all dependencies.Read more ›
Use overrides to add animations and interactions to Frames and establish communication between components.Read more ›
View your Preview in a separate browser
You can open your preview in Chrome or Firefox, too.Read more ›
Working with live data
You can use code in Framer X to work with live data.Read more ›
Writing components without TypeScript
While Framer X does use TypeScript, you're free to choose.Read more ›
Sharing your Framer X prototype
You can share your projects with Live Preview and Web Preview.Read more ›
When an individual’s changes get merged, an automated CI process can be kicked off using the Framer CLI.Read more ›
Advanced usage such as adding to Git and folder-backed projects.Read more ›
Integrating projects with Git
Collaboration via Git on Framer project should work well, as most files are mergeable.Read more ›
Publishing from the CLI
In addition to publishing packages through Framer X, you can also publish from the Framer CLI.Read more ›
Can I make real apps with Framer X?
Framer X isn’t designed to create real apps, but the are parts that you can re-use.Read more ›
Can I put my components on Storybook?
Because components you make in Framer X are written in React.Read more ›
Can I use components from other frameworks in Framer X?
How can I embed my prototypes?
You can embed your prototypes anywhere online.Read more ›
How can I import my designs from Sketch?
Framer includes a Sketch Plugin that allows you to easily copy and paste.Read more ›
How can I mask an image in Framer X?
By utilizing the Overflow property you can effectively mask images.Read more ›
How can I play sounds in my Framer X prototype?
The simplest way to play audio in your Framer prototype.Read more ›
How do I change my default code editor?
Framer X includes a powerful built in code editor but you can change that to use your favorite external editor.Read more ›
How do I download a prototype on the Framer Preview app?
You can use the Framer Preview app to download Framer X web previews for offline viewing.Read more ›
How do I get rid of the white background when previewing my prototype?
Follow these steps to get your prototype to behave responsively when previewing.Read more ›
How do I switch between Day and Night Mode?
You can enable Day and Night Mode either from the menu bar or with a shortcut.Read more ›
How do I use Framer X behind a proxy?
Framer will automatically detect your proxy settings and securely connect..Read more ›
How to reinstall Framer X
Learn how to completely reinstall Framer X on your computer.Read more ›
What are the minimum requirements to run Framer X?
Learn more about the minimum hardware and software requirements for Framer XRead more ›
What happens when I convert a Classic documents to Framer X?
Framer X has a ton of new features and capabilities, made possible by its new React foundation.Read more ›
Where can I find my project backups?
In Framer X it is possible to quickly jump back in time to an earlier version of your project.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?
It may be that the plugin was not installed correctly in Sketch. Follow the steps to ensure it is.Read more ›
Why do my exported assets look different than on the canvas?
Sometimes your computer's color profile might be affecting your exportsRead more ›
Why does Framer X ask for permission to record my screen?
After updating to macOS Catalina, Framer X may ask you to record your screen.Read more ›
Working with fonts
Learn how to work with fonts in Framer XRead more ›