Collaborate on projects, integrate with your development environment, and continuously pull in production components to keep your designers up-to-date.
Our integrations offer a variety of ways to help you get the most out of our tool. 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 that keep your entire team in sync.
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
Optionand 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
- 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 --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.
- 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 work 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 Framer X, you can also publish from the command line through the Framer CLI.
npx to run the package:
~ $ npx framer-cli help
The CLI exposes four commands:
||Provides a special
||Ensures that the project is in a valid state for publishing.|
||Responsible for building the project, managing project versioning, and publishing the project to the correct store. This command requires a
||Prints the usage instructions and provides additional information about different options available for each function. Running a given command with the
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 the Framer CLI.
This integration allows teams of developers and designers (or even a single individual) to work on the same Framer project, with the knowledge that the Store version of the package will always be up to date.
Note that this example assumes that the
FRAMER_TOKEN environmental variable has already been set in the CI project settings.
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.