Working with folder-backed projects
Note: This article refers to the Framer desktop app. Learn more about the differences between the Framer web and desktop app here.
Framer projects created on the desktop app can be saved in two formats:
- A .framerx file
- A .framerfx folder
Framer saves projects as .framerx file by default. This file is an archive of your project’s code, images, and other files, zipped up together as a single unit. This format makes it easy to open and share your project.
By comparison, a .framerfx folder is an “unzipped” format for the same information. With a "folder-backed" project, you’re able to do some things that would be impossible with a regular project file.
Downloading your project from Framer Web
If you have worked on your project in Framer in your browser, you will have to download your project first. Projects can be downloaded from Framer’s web version from Menu > File > Download, or by pressing
Creating a folder-backed project
To create a folder-backed project, create a new project on Framer’s desktop app or use it to open an existing project. With your project open:
- Hold the
Optionkey on your keyboard
- In the menu, select File > Save As
- In the save window, use the File Format dropdown menu to select the folder option.
You can open a .framerfx folder in Finder by right-clicking and selecting "Show Package Contents".
The main reason you might use a folder-backed project is to use a version control system, such as Github, to keep track of changes to your project. Version control is especially useful for teams, or if you plan to collaborate on the same offline project with other designers and developers.
Importing local production components
With a folder-backed project, you’re able to use relative paths to import files from outside of the Framer project folder.
This means that you could, for example, place a .framerfx project into a regular React project folder and then import the React project’s components into your Framer project.
You would still have to wrap these components in a Framer code component, and add Property Controls to that wrapping component, but you’d be designing with the same components that you’d be using in production.
You can see an example of this in action here. Like version control, this feature is especially useful for teams and collaboration.
To learn more about using
.framerfx projects in the context of teams, see our Command Line Interface (CLI) tool Framer Bridge.