Product

Resources

About
Early version

Automatic measure

What it does

Bridge measures what your components really look like in code: every variant at rest, on hover, pressed and disabled, with a picture of each. When Compare with code in the DS Bridge Figma plugin finds a component that differs, Ask Claude to fix it uses that measure: Claude proposes a fix, Bridge checks it brings the component closer to the code, and someone on your team approves it.

The measure keeps itself fresh. Each time your Storybook changes, Bridge measures it again, and only saves a new measure when something changed.

Without a measure, the plugin and Studio say: Bridge hasn't measured your components yet. A developer turns it on once: Set up automatic measure.

Turn it on

A developer does it once, in one of two ways:

  • In Studio, open Settings, then under Claude open For developers and choose Set up automatic measure. Bridge opens a pull request that adds one workflow; your team reviews it like any change.
  • In the repository, run npx @bridge-ds/cli measure setup and commit the file it writes.

Once it is merged, the first measure runs after the next Storybook change, or right away from GitHub: Actions, Bridge measure, Run workflow. It takes a few minutes per family of components.

For developers

The workflow

.github/workflows/bridge-measure.yml runs bridge specs --measure --variants --states rest,hover,active,disabled --tokens --shots --check in headless Chrome on ubuntu-latest, which ships Chrome: no browser download.

  • Deployed Storybook (previews.production.storybook in bridge.config.json, or --storybook <url>): it runs after each successful deploy of it from the default branch (a commit status such as Vercel's or Netlify's, or a GitHub deployment), skipping deploys that do not touch the paths that change the Storybook.
  • Built in the run (--build, for a private Storybook or none deployed): it runs on pushes to the default branch that touch those paths, builds Storybook and serves it on 127.0.0.1.
  • Every Monday as a fallback, and by hand.

Where the measure lives

measured-specs.json and measured-shots/ on the bridge-requests branch, next to the plugin's figma-fidelity.json: data, not code, so it never adds review noise. A measure committed at the repository root wins. The Claude fix tools (bridge_figma_gaps, bridge fix), the plugin and Studio read it there.

Token and secrets

Only the run's GITHUB_TOKEN, with contents: write to push bridge-requests. The default branch is never written. No secret to add; if your install needs a private registry, add an optional NPM_TOKEN repository secret.

Studio's button needs to write a workflow file. When GitHub does not let Bridge do that (the GitHub App has no Workflows permission), Studio gives the file to commit from GitHub instead.