Announcing Framer BridgeAnnouncing Framer Bridge

Looking for that single source of truth? Framer Bridge is a Team Store release that connects your design system to production code.

April 17, 2019

At Framer, we’re all about big picture collaboration. Last year, we launched the Team Store, enabling designers to access, publish, and contribute to a centralized design system, one that is inherently interactive at that. Since then, we’ve worked to onboard teams and help them build design systems and develop workflows within Framer X. In the process, we noticed some key measures of a design system done well, the kind that resulted in widespread adoption and truly cohesive teams. Across every company size and industry, there emerged two key determinators of a successful design system:

  1. A workflow for keeping every component up-to-date.
  2. A direct connection between design systems and production code.

Today, we’re announcing Framer Bridge, a release that helps automate both of these previously labor intensive tasks. Bridge is a suite of tools that allows you to import production components built by your engineers and publish it to your design system in Framer X. It works on a continuous loop, and is completely customizable to your existing development workflow. Read on to find out more about each part of the Bridge release.

A Git-compatible format

With Bridge, we’ve added an option for you to use a folder-based file approach, which fundamentally changes the way designers collaborate. By moving to a folder approach, Framer now enables teams to use version control tools like GitHub for content management, allowing your entire team to work on the same project simultaneously. And because Framer files are backed by code, this new file type makes it possible to pull production code components directly into your Framer project.

Command Line Interface (CLI)

Thanks to this new collaborative file type, it’s also possible to keep the design and development team in sync. We built a brand new command line tool that allows you to build and publish packages to your private Team Store on every commit, ensuring every designer on your team is always using the most updated version of every component. The tool exposes authentication, build, and publish commands to enable integration with any workflow, be it local releases, GitHub Actions, or 3rd party continuous integration solutions.

GitHub Actions

With the ability to have GitHub projects and publication commands on demand, the next step was to create a way to hook these pieces together in a workflow, one that automatically builds and publishes projects to your private Team Store. We put together a set of new GitHub actions to automate this workflow in any repository, creating an out-of-box-ready solution to keep your design team up-to-date.

Not just for teams

Although Framer Bridge is great for teams, you can also use it to collaborate on packages for the public Store in Framer X. If you already have a published package in the Store, you can now host the source code on GitHub, where others can contribute to your package. No matter how many changes are made, Bridge ensures that every new commit is updated in your Store package as well. It’s a nod to the open source way of working, and one that brings the network effect of the developer world into design.

Get started

If you’re wondering how to get started, clone our starter kit to see Framer Bridge in action. We’ve included instructions in the README, so you can try it out using our pre-built components. Once you’re ready, replace them with components from your own design system and unlock the true potential of the Team Store.

Feel free to reach out on Twitter or talk to our Product Specialists if you’d like to get this set up for your team. We’re incredibly excited for you to get your hands on all of this—and we think you’ll love it. For more help, consult some of our resources below:

While it has been tested extensively, Framer Bridge is currently still in Beta, so please back up your project files regularly.

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.