Skip to content

LydiaF/framer-bridge-starter-kit

 
 

Repository files navigation

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:
        branches: master
    name: Build and publish
    jobs:
      publish:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@master
    
          - name: Build
            uses: framer/bridge@master
            env:
              FRAMER_TOKEN: ${{ secrets.FRAMER_TOKEN }}
            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.

About

Start your design system in Framer X.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%