Skip to content
Start your design system in Framer X.
TypeScript
Branch: master
Clone or download
camacho Merge pull request #20 from framer/addison/bump-framer-version
Update .framerfx framer version to latest
Latest commit 2606ea5 Aug 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Fixed order of the build command to run correctly May 3, 2019
.github/workflows
design-system.framerfx Update .framerfx framer version to latest Aug 23, 2019
design-system Implements shared colors (#7) May 21, 2019
.gitattributes
.gitignore fix(git): Update .gitignore Apr 16, 2019
.travis.yml Fix 'duplication of key' warning Aug 22, 2019
README.md Merge pull request #19 from framer/koenrh/fix-travis-config-yaml-error Aug 23, 2019
package.json Move package.json to root Apr 16, 2019
yarn.lock Bump lodash from 4.17.11 to 4.17.15 Jul 23, 2019

README.md

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/Travis CI 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:

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/workflows/publish.yml with the path of your Framer package, eg:

    on: push
    name: Build and publish
    jobs:
      publish:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@master
    
          - name: Branch filter
            uses: actions/bin/filter@master
            with:
              args: branch master
    
          - name: Build
            uses: framer/bridge@master
            with:
              args: build design-system.framerfx
    
          - name: Publish
            uses: framer/bridge@master
            env:
              FRAMER_TOKEN: ${{ secrets.FRAMER_TOKEN }}
            with:
              args: publish design-system.framerfx --yes
  2. In GitHub, navigate to the forked repository, and under your repository name, click Settings. Then, click Secrets in the left sidebar, and add the FRAMER_TOKEN secret.

  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 and Travis CI 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.

To integrate with Travis CI:

  1. Connect your repository with Travis CI.

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

  3. Update the .travis.yml with your project path, e.g.:

     language: node_js
     node_js:
       - 10.15.3
    
     jobs:
       include:
         - stage: build
           name: "Build"
           if: branch = master
           script:
             - yarn
             - npx framer-cli build <your-project-path.framerfx>
    
         - stage: publish
           name: "Publish"
           if: branch = master
           script:
             - yarn
             - npx framer-cli publish <your-project-path.framerfx> --yes
  4. Publish a brand new version of your package to the Framer store by pushing a commit on the master branch.

You can’t perform that action at this time.