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
yarn.lock opening up many collaboration opportunities.
Create a folder backed project
- Create a new project
- Hold Option and click
- In the save dialog, click the
File Formatdropdown and select
Framer X (Folder)
- Click Save
Convert an existing project
- In Finder, change the
- Double-click the file to extract it
- Rename the folder extension to
.framerfx, it should get a Framer project icon
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
package.json file. It will be available in all your code components and automatically installed as a dependency whenever the project gets opened.
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
Pto open the project folder.
- Open the
tsconfig.jsonfile in your editor and add
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.