yarn.lock. The project dependencies are managed with Yarn, and (private) Framer stores are just npm repositories.
Default Framer X projects are binary format with the
.framerx extension. They are zip compressed folders that temporarily get extracted while you work on them. This way we can optimize the experience for common users that like to double click to open, support multiplatform in the future and make file sharing reliable.
For more advanced usage, like adding to Git, we also support folder backed projects. They have the
.framerfx extension and we set the bundle bit, so MacOS still sees them as a single file in the Finder that you can double click.
Create a new project, hold option and select File → Save…. You’ll see an option “File Format” where you can select “Framer X (Folder).
.framerx projects, change the extension in the Finder to .zip and double click to extract them. Rename the folder extension to
.framerfx and it should get a Framer project icon.
Make sure you are using a folder based project. Alternatively you can also open a .framerx file’s temporary location while the projects is opened in Framer X by selecting File → Show Project Folder….
Use the terminal to navigate to your project location:
~ $ cd project.framerfx
Now you can install any npm package using yarn, just like you normally would.
~/project.framerfx $ yarn add --dev lodash @types/lodash
From here, 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 a 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 at 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 is set up and you will be able to install packages from your private registry:
~/project.framerfx $ yarn add @acme/library
Framer X supports reading json data from any local file and use it directly in your code, so you can work with real data for any project.
Open your project in Framer X and select File → Show Project Folder…
tsconfig.json file in your editor and add
"resolveJsonModule": true to
compilerOptions. Also see the documentation.
You can now import any json document like you would any other module:
import * as data from "./data.json"
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.
For git integration, you will need a folder backed project. You can then simply add them to git, like you would with any other file. When you open a project, Framer verifies if you have the right
.gitignore rules in place and warns you if you don't.
Collaboration via Git on Framer project should go fairly well, as most files are mergeable. Try to avoid having multiple people edit json files like
design/document.json as you'll have to merge them by hand. If you are planning to use many large media files, you might want to leverage Git LFS.
Because Framer just uses yarn to manage packages, you can easily publish to your private store from the command line and integrate auto publishing in your workflow. It's easiest to use folder backed projects for this.
Store publishing requires authentication, which is being managed in the
.npmrc file. Make sure you’ve published the package at least once and verify it exists in the root of your project.
~/design-system.framerfx/ $ yarn publish --access=restricted
Yarn will interactively ask you for the new version. If you know the version upfront you can use