Component Bridge

The Challenge

We operate in a fragmented coding landscape with multiple product teams across different platforms. A single component like Button is implemented in 20+ places. The design systems team cannot own centralized components—we can only provide guidance and documentation.

This raised a difficult question: how do you keep implementations aligned when you don't control the code?

The Goal

Rather than debating code ownership, we focused on visibility. Developers struggled to notice when components changed in Figma. If we could bring change detection into their natural habitat—GitHub—they'd see updates as simple diffs that trigger notifications. No one would need to manually check Figma or ask "did anything change?"

This approach sidestepped the ownership question entirely. We didn't need to own the code—we just needed to make changes visible.

Inspiration

The project was inspired by Component Specs on Command by Nathan Curtis. But given our fragmented setup, we started simpler: instead of communicating what changed in detail, we focused on notifying that something changed—with a direct link to the right place in Figma. We found that people were often unsure where to look, so solving that alone was valuable.

Benefits

• Auto-sync: GitHub and Figma stay aligned automatically via GitHub Actions
• Figma as CMS: Designers maintain a Designlog frame directly in Figma—document once, serve everywhere
• Meet users where they are: Developers get notified in GitHub, designers work in Figma, and the docs site provides a clean gallery
• Simple diffs: Any component update appears as a markdown change in PRs

How It Works

Designers maintain two frames per component in Figma:

• Designlog — a changelog with versioned entries
• component-visual — a 512px preview image

Sync runs via npm run components:sync (locally or in CI):

• Fetches text content from Designlog frames via Figma API
• Exports component visuals as PNG
• Generates markdown changelogs with direct Figma links

GitHub picks up the changes:

• PR diffs show exactly what changed
• Developers get notified through their normal workflow
• Docs site displays a gallery from the generated data