Default Framer X projects are in a binary format with the .framerx extension. They are zip-compressed folders that get extracted temporarily while you work on them. This allows us to optimize for a user experience that includes double-click to open, support for multi-platform in the future, and reliable file sharing.

For more advanced usage, such as adding to Git, we also support folder-backed projects. They have the .framerfx extension. Note: MacOS still recognizes these as a single file in the Finder, but they’re actually folders of files. Framer projects are JavaScript projects, so when you look inside one, you’ll find familiar files like package.json, node_modules, and yarn.lock opening up many collaboration opportunities.

Create a folder backed project

• Create a new project
• Hold Option and click File › Save As
• In the save dialog, click the File Format dropdown and select Framer X (Folder)
• Click Save

Convert an existing project

• In Finder, change the .framerx extension to .zip
• Double-click the file to extract it
• Rename the folder extension to .framerfx, it should get a Framer project icon

External Libraries

Under the hood, Framer uses NPM with Yarn to manage all dependencies. You can easily install any external dependency just as you would with other JavaScript projects. You can open a file’s folder by hitting CMD + Option + P.

Use the terminal to navigate to your project

~ $ cd project.framerfx

Install NPM package using Yarn

~/project.framerfx $ yarn add lodash @types/lodash

The package will be added to the node_modules and package.json file. It will be available in all your code components and automatically installed as a dependency whenever the project gets opened.

Private packages

To install packages from a private NPM registry, you can leverage your system-wide ~/.npmrc to set up the details of your registry.

As an example, let’s assume the private registry is set up as https://registry.acme.corp and all packages are prefixed using the @acme scope. To set up the private registry, run the following commands in your terminal:

• ~ $ npm config set registry https://registry.acme.corp/ --scope=@acme
• ~ $ npm login --scope=@acme

After logging in, your private registry will be set up and you will be able to install packages from your private registry:

~/project.framerfx $ yarn add @acme/library

Data from JSON

Framer X supports reading JSON data from any local file, so you can work with real data for any project.

• Open your project in Framer X and hit CMD + Option + P to open the project folder.
• Open the tsconfig.json file in your editor and add "resolveJsonModule": true to compilerOptions. See the documentation.

As a bonus, VSCode will automatically pick up the contents of your json file and add it to type checking and autocomplete so you can avoid simple mistakes.