yarn.lock. Folder-backed projects enable you to add your own external dependencies, whether private or public. They also make it possible to add Git for collaboration and leverage automation mechanisms. Along with our custom command line tool and Framer store, they allow you to keep your entire team in sync with the latest designs.
Default Framer X projects are binary format with the
.framerx extension. They are zip-compressed folders that get extracted temporarily while you work on them. This way we can optimize the experience for common users that like to double click to open, support multi-platform 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 a “File Format” option 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're using a folder-based project. Alternatively, you can open a .framerx file’s temporary location while the project 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.
~/project.framerfx $ yarn add 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. 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'll need a folder-backed project. You can then simply add them to Git. 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.
In addition to publishing packages through the core FramerX application, Framer also supports publishing folder packages from the command line through the
framer-cli NPM package.
npx framer-cli help
framer-cli exposes four commands
authenticate command provides a special
FRAMER_TOKEN to be used as an environment variable for publishing packages under the authenticated user's account.
build command ensures that the project is in a valid state for publishing.
publish command is responsible for building the project, managing project versioning, and publishing the project to the correct store. This command requires a
FRAMER_TOKEN environment variable for publishing. This token is unique to a given individual and is used for both authentication and determining the user's available private store, if any.
help command prints the usage instructions and provides additional information about different options available for each function. Running a given command with the
--help flag will also show information for that given command.
Because Framer projects can be set up as code repositories that use version management, they can also support multiple individuals making changes to the project at the same time.
When an individual’s changes get merged, an automated CI process can be kicked off to automatically publish a new version of the Framer package to the store using
This integration allows teams of developers and designers (or even a single individual) to work on the same Framer project and know that the store version of the package will always be up to date.
It's also possible to use Github Actions to automate the release of a Framer package without the use of a separate CI. The Framer Bridge action can be added directly from the Marketplace, and an example of a build and publish workflow, ready to be cloned, can be found here.