Framer Bridge Starter Kit

Framer Bridge is a suite of tools:

• That allows you to automatically publish and distribute components to designers with Framer and the Framer Store.
• Import in production components built by your engineers. It’s an automatic and continually synced workflow, one that is customizable to your existing development workflow.

This repository links together folder backed Framer projects with the Framer CLI and GitHub actions/CircleCI for an easy package publication flow.

🏁 Getting started

Important: This project uses Shared Colors, a feature only available in Framer X26 or higher.

Cloning

1. Fork this repository.
2. Clone the forked repository locally
3. Run yarn to install dependencies

Inside the repository directory, you will find two key folders:

• design-system: contains example production components. Typically, this design system is consumed by multiple projects.
• design-system.framerfx: a folder backed project that imports the components from design-system and (optionally) adds interface properties to use in Framer. This is the project that gets published to the Framer store.

Editing

From here, you can continue modifying the existing design-system.framerfx file. If you edit any of the components in design-system, they will automatically get updated in Framer too.

If you want to import your own design system, you can replace both files with your own. Make sure that your Framer project is folder backed.

Publishing

1. From the terminal, run:

   npx framer-cli authenticate <your-framer-account-email>

2. If the package has not been previously published to the store, publish the package for the first time by running

   env FRAMER_TOKEN=<token> npx framer-cli publish <package-name.framerfx> --new="<Display Name>"

🤖 Using GitHub actions

If you have access to the GitHub actions beta, you can use this repository to automate the deployment of your Framer package to the store without needing any external services.

1. Modify the args property in the Build and Publish actions inside .github/main.workflow with the path of your Framer package, eg:

    action "Build" {
      uses = "framer/bridge@master"
      args = ["build", <your-project-path.framerfx>]
    }
   
    action "Publish Filter" {
      needs = ["Build"]
      uses = "actions/bin/filter@master"
      args = "branch master"
    }
   
    action "Publish" {
      uses = "framer/bridge@master"
      args = ["publish", <your-project-path.framerfx>, "--yes"]
      needs = ["Build", "Publish Filter"]
      secrets = ["FRAMER_TOKEN"]
    }

2. In GitHub, navigate to the forked repository and set the FRAMER_TOKEN via the GitHub UI for the .github/main.workflow publish step (accessible by navigating the file structure on the homepage of the repository).

3. Push a commit to the master branch and watch as the GitHub actions pick up the commit, build the package, publish it to the Framer Store.

🚚 Using CI

As an example of integrating framer-cli with an external CI service, there is a small CircleCI configuration included in this repository that publishes the given package to the Framer store every time a commit is made to the master branch.

To integrate with CircleCI:

1. Connect your repository with CircleCI.

2. Add the FRAMER_TOKEN environment variable in the CI project settings.

3. Update the .circleci/config.yml with your project path, e.g.:

   # 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 <your-project-path.framerfx> --yes
   
   workflows:
     version: 2
     publish:
       jobs:
         - build
         - publish:
             filters:
               branches:
                 only: master

4. Publish a brand new version of your package to the Framer store by pushing a commit on the master branch.