Early version

Getting started with Bridge

What is Bridge

Bridge is a free, source-available design system as code. Tokens and components live in one repository, the source of truth. Figma, your AI assistant and your product teams read from it and send changes back for people to review.

Open Studio and choose Sign in with GitHub, at the bottom of the side nav or in Settings. Approve on GitHub and you land back on Settings, connected and able to edit.

To edit, ask the repository owner for write access. Your sign-in stays in this browser.

Connect your design system

Bridge works with any DTCG token repository. A bridge.config.json file says where your tokens, tiers and modes are; without it, Bridge detects them.

In your design system repository, run npx @bridge-ds/cli init. It writes bridge.config.json from what it detects, plus the setup for your own Claude. Check what it found: detection is a starting point.

This page will cover pointing Studio at your own repository.

Your first exploration

An exploration lets you try new variables and components in a product without touching the library. A person later sends it for review or closes it.

In Studio, choose Start an exploration, pick where it happens (a product, or The library for a token, a variant or a new component) and say what you want to try in a sentence. Studio starts the exploration and gives you the sentence to say to Claude.

When it adds something the library lacks, open a library change for that piece and send it for review. Once it ships, a Pull in the DS Bridge Figma plugin brings it into your Figma kit.

Glossary

Exploration: A space to try experimental variables and components with previews, never shipped as is.
Library change: The library side of a piece an exploration needs, linked both ways to it.
Review: A change shown with its diff, contrast before and after, impact, checks and approvals.
Studio: The part of the Bridge site where you explore tokens, read component docs and review changes.
Tokens: The design values, in tiers from primitives to components, with brands, themes and densities.
Figma kit: The Figma Variables and component sets the DS Bridge plugin builds from code.
Fidelity check: A plugin check that compares each generated component with an image rendered from code.