Framer X projects can be saved in two formats:
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-backed project is an “unzipped” format for the same information. With this format, you're able to do some things that would be impossible with a regular project file.
What can I do with a folder-backed project?
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 project with other designers and developers.
Importing local production components
With a folder-backed project, you're able to import files from outside of the Framer X project, using relative paths.
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 X project. You would still have to wrap these components in a Framer X 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 CLI tool Framer Bridge.
Creating a folder-backed project
To create a folder-backed project, create a new Framer X project or open an existing project. With your project open:
- Hold the option key on your keyboard
- Select File > Save As
- In the menu that opens, use the File Format dropdown menu to select Framer X (folder)