Bridge

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.

Folder Projects

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.
  • 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.

Git

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.

CLI

In addition to publishing packages through Framer X, you can also publish from the command line through the Framer CLI.

Use npx to run the package:

  ~ $ npx framer-cli help

The CLI exposes four commands:

Command Description
authenticate Provides a special FRAMER_TOKEN to be used as an environment variable for publishing packages under the authenticated user's account.
build Ensures that the project is in a valid state for publishing.
publish 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 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.

Automated Workflow

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.

CI

As an example of an automated publishing workflow, here is a small CircleCI configuration that uses the Framer CLI to publish a package to the Framer Store.

Note that this example assumes that the FRAMER_TOKEN environmental variable has already been set in the CI project settings.

  # Javascript Node CircleCI 2.0 configuration file 
  # 
  # Check https://circleci.com/docs/2.0/language-javascript/ for more details 
  # 
  version: 2
  jobs:
    publish:
      docker:
        image: circleci/node:10
 
      working_directory: ~/repo
 
      steps:
        - checkout
        run: yarn
        run: npx framer-cli publish --yes
 
  workflows:
    version: 2
    publish:
      jobs:
        publish:
            filters:
              branches:
                only: master
Github Actions

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.

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.