Works with Figma and Storybook. Adds the way back to the library.
Bridge sits next to the tools you already use. What it adds is the way back: from an exploration to the design system, reviewed in the product, with the code and the Figma kit in step.
- Does it
- Does not, or not documented
| Feature | Bridge | Tokens Studio | Supernova | Storybook | zeroheight | Figma | story.to.design |
|---|---|---|---|---|---|---|---|
| Start an AI exploration with your design system In its own branch, with its own preview | Yes | No | In part: Beta, no branch AI prototypes with your code components and a share link, in beta. No branch found. | In part: Agent via MCP A coding agent builds with your stories through its MCP server, in preview. The branch is yours to set up. | In part: Feeds other AI tools Gives your system to Figma Make and coding agents through MCP. It does not run the exploration itself. | Yes Figma Make with a kit of your code components, in a Git branch, with a live preview. Paid plans. | No |
| See what an exploration adds that the library lacks New tokens, variants and components, listed | Yes | In part: Tokens only A branch lists the tokens it adds, changes and removes. Not components. | No | In part: Visual diffs via Chromatic With Chromatic, a review shows the stories that changed visually. | In part: Audit via MCP Its MCP audit flags design and code inconsistencies before a merge. | In part: Page by page audit Check designs flags hard-coded values and detached components, one page at a time. | No |
| Your DS lead approves just the change Before it reaches the library | Yes | Yes Branch review with Approve or Request changes, for tokens. | In part: Docs only, Enterprise An approval workflow for doc pages, on Enterprise. | In part: Via Git or Chromatic Through your Git host, or Chromatic UI Review. | In part: No approval step Token changes go back to code as a pull request. No approval step of its own. | Yes Branch review with Approve or Ask for changes, on Organization and Enterprise. | In part: Figma update review A visual review of code changes before they update the Figma kit. No approval step or roles. |
| One review for tokens, code and docs Traced back to the exploration, in Git, with checks | Yes | In part: Tokens only | In part: Docs only Doc pages; code comes as pipeline pull requests. | In part: Code only Code and stories, in your Git review. | In part: Docs and tokens Docs, plus token pull requests. | In part: Two separate reviews Design files in branch review; Make code in GitHub pull requests. | In part: Figma updates only Reviews code changes before they reach Figma: components as visuals, variables in a list. Code and docs are reviewed elsewhere. |
| Figma kit built from code, with a fidelity check Pixel match between Figma and code | Yes | In part: Tokens only Tokens become Figma variables and styles. Not components. | No | No | No | In part: Beta, no fidelity check An agent skill builds components from code, in beta. Drift checks cover tokens only. | In part: No fidelity check Builds Figma components and variants from Storybook stories. Its visual review compares old and new Figma versions; no check of Figma against code is documented. |
| Open source | In part: Fair source Components and tokens are MIT. Studio, the plugin, the connector and the tools are public under FSL-1.1-MIT; each version becomes MIT after two years. | In part: Plugin only The Figma plugin is MIT; the platform is not. | In part: Exporters only The code exporters are MIT; the platform is not. | Yes MIT. | No | No | No |
| Free, with every feature No paid plan | Yes | No | No | Yes Chromatic, its visual testing service, is paid. | No | No | No |
| Feature | Bridge | Tokens Studio | Supernova | Storybook | zeroheight | Figma | story.to.design |
|---|---|---|---|---|---|---|---|
| Tokens in the W3C standard format | Yes | Yes | No | No | Yes | Yes Variables import and export. | No |
| Two-way sync between Figma variables and code | Yes | Yes Git sync on paid plans. | In part: Figma import one way Tokens come in from Figma and Git and go out as pull requests; Figma import is one way. | No | In part: Figma one way Two-way with Git; Figma variables come in one way. | In part: Agent skill, in beta An agent skill syncs variables and code with drift detection, in beta. | In part: Code to Figma only CSS custom properties become Figma variables in one collection, one way; nothing goes back to code. |
| UI kit linked to code | Yes The kit is built from code, linked to Storybook, and checked for fidelity. | In part: Tokens only Tokens only: token names show in Dev Mode. | Yes A component links its Figma component and its code repository. | Yes Storybook Connect, by Chromatic, links stories to Figma components. | In part: Shown side by side Figma and Storybook side by side in doc pages. | Yes Code Connect in Dev Mode, on Organization and Enterprise. | Yes Components are generated from Storybook stories and stay in sync; Dev Mode links each one to its story. |
| Variants and properties set up from code Axes and readable names from the component props | Yes Variant axes and their names come from the props your stories show; a prop that changes nothing on screen is left out. | No | No | No | No | In part: Agent skill, in beta An agent skill reads your component code and creates variant, boolean, text and swap properties, in beta. | In part: You pick the args Variants come from the story args you pick, named after the args; readable names are written by hand in JSON or in the story. |
| Primitive and semantic tokens as Figma variables, with modes Aliased across collections, for themes and brands | Yes One collection per tier, from Primitives to Semantic, aliased between them, with a mode per theme and brand. | Yes Theme groups become variable collections, each theme a mode, on the Pro licence. You set up the tiers. | In part: Figma import only Keeps aliases and themes, and imports Figma variables; it does not write variables to Figma. | No | In part: Figma import only Imports Figma variables with their aliases and modes; it does not write variables to Figma. | Yes Variable collections with modes and aliases between them, built by hand or by its agent skill. Modes on paid plans. | In part: One collection CSS variables become Figma variables in one collection, with modes from a theme global; aliases only where the CSS has them. |
| Fix differences between Figma and code When a Figma component no longer matches its code | Yes Your own Claude proposes fixes through the Bridge MCP server or CLI; Bridge checks them against the code and opens them for review. | In part: Tokens only Push and pull with Git shows when tokens are out of sync; components are not covered. | No | No | In part: Guideline audit only Its MCP and Figma agent connector audit designs and code against your guidelines, not a Figma component against its code. | In part: Agent skill, in beta An agent skill diffs code and Figma and updates what drifted, in beta; it asks you when they disagree. | In part: Vendor support Fixes go through capture settings and selectors, often written by their team on a reported issue; editing in Figma breaks the link to code. |
| Feature | Bridge | Tokens Studio | Supernova | Storybook | zeroheight | Figma | story.to.design |
|---|---|---|---|---|---|---|---|
| Visual before and after of a change | Yes On the coded stories and app screens, in every brand and theme, in the pull request. | In part: Values, not visual Token values before and after, not a visual. | In part: Doc page history Page history for doc pages, not a visual of components. | In part: Via paid Chromatic With Chromatic, a separate paid service. | No | Yes Branch review, side by side or as an overlay. | Yes Old and new versions of each variant, side by side or as an overlay, before the Figma update. |
| Contrast checked on every change | Yes 220 token pairs in every brand and theme, in CI; a failing change cannot merge. | In part: Graph Engine nodes Contrast nodes in Graph Engine, not a check on each change. | In part: Color grid in docs An accessibility color grid in docs, not a check on each change. | Yes The accessibility addon runs axe on stories, and fails CI when set to. | No | In part: On demand, per page Check designs tests contrast on demand, one page at a time. | No |
| Token history with revert | Yes | In part: Revert through Git Release history of token changes; reverting goes through Git. | In part: Read-only versions Versions are read-only; restore is for doc pages. | No | In part: Releases, paid plans Tokens follow styleguide releases, on paid plans. | In part: Whole file only Version history restores a whole file, not one variable. | No |
| Feature | Bridge | Tokens Studio | Supernova | Storybook | zeroheight | Figma | story.to.design |
|---|---|---|---|---|---|---|---|
| Workshop to build coded components | In part: Built on Storybook Bridge ships its components with Storybook and builds on it. | No | No | Yes | No | No | No |
| Docs drafted by AI, reviewed by people | Yes | No | Yes | No | Yes | Yes With the Figma agent. | No |
| Hosted documentation site | Yes | No | Yes | In part: Static build, self-hosted A static build you host, or publish with Chromatic. | Yes | In part: No docs template Figma Sites, with no docs template. | No |
| Adoption audit in product code | Yes | No | Yes On Enterprise. | No | Yes On Enterprise, for React and Angular. | In part: Figma files only Library analytics count use in Figma files, not code. | No |
| Feature | Bridge | Tokens Studio | Supernova | Storybook | zeroheight | Figma | story.to.design |
|---|---|---|---|---|---|---|---|
| Works with AI agents, through MCP | Yes | No | Yes | Yes MCP server in preview. | Yes | Yes | No |
As of October 2026, from public pages. Sources: Bridge: Bridge on GitHub ; Tokens Studio: Branch reviews , Pricing , Themes to Figma variables , Export to Figma , Git sync ; Supernova: Pricing , Workflows , AI prototyping , Figma variables import , Storybook block ; Storybook: MCP , Accessibility tests , Chromatic UI Review , Design integrations , Visual tests ; zeroheight: MCP , Pricing , Integrations , Figma agent connector ; Figma: Make kits , Git in Make , Branch review , Check designs , Agents on the canvas , Library from code skill , Variables and modes , Plans and features ; story.to.design: Features , Updates , Variables , Workflow , Dev Mode , Pricing , Variants , Variant properties , Report a problem . Something out of date? Tell us on GitHub.