Framer Bridge Starter Kit

Framer Bridge is a suite of tools that allows you to automatically publish and distribute components to designers, as well as 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

1. Fork this repository.
2. Clone the forked repository locally.
   • Inside the repository directory, there will be a design-system.framerfx Framer project, alongside a design-system directory.
     • The design-system directory contains example external components loaded inside the design system Framer project.
     • The design-system.framerfx folder backed project contains a series of components ready for publication to the Framer store.
3. Run yarn to install the design systems' dependencies.
4. Copy your folder backed project into the cloned directory or modify the existing design-system.framerfx file.
5. From the terminal, run:

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

   and follow the provided steps.
6. 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 = "./.github/framer"
      args = ["build", <your-project-path.framerfx>]
    }
   
    action "Publish Filter" {
      needs = ["Build"]
      uses = "actions/bin/filter@master"
      args = "branch master"
    }
   
    action "Publish" {
      uses = "./.github/framer"
      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 p�ick 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 builds the package on commit and 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:
     build:
       docker:
         - image: circleci/node:10
   
       working_directory: ~/repo
   
       steps:
         - checkout
         - run: yarn
         - run: npx framer-cli <your-project-path.framerfx> build
   
     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
     test-and-publish:
       jobs:
         - build
         - publish:
             requires:
               - build
             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.