vibe-coding / figma-bridge

Figma Bridge

A bridge that lets an AI agent operate Figma. Instead of exporting from Figma into code, the code operates Figma.

3 connected pieces12 architecture documents58 files

Context

A bridge that lets an AI agent operate Figma. In its own words: programmable bridge for Figma automation via WebSocket. Control Figma variables, styles and more from external tools like Claude Code. Instead of exporting from Figma into code, the code and the AI operate Figma.

The workflow

Built in code, with AI as the build partner. Three pieces built together on one set of types: Claude Code sends instructions over HTTP, a bridge server queues them and relays them by WebSocket to a plugin running inside Figma, which executes them and reports back. Verified end to end with the server and the plugin running.

What changed

  • Design operations that were done by hand in Figma, one click at a time, run as instructions from the code side.
  • The design file follows the system instead of the system chasing the design file.
  • One person covered architecture, server, plugin and build.

Result

Server, relay and plugin working end to end.

7 days of effort across 12 active days. 35 commits.

What shipped

  • The bridge server, receiving instructions over HTTP and queuing them.
  • The WebSocket relay between the server and Figma.
  • The Figma plugin that executes each instruction and reports back.
  • One shared set of types across the three pieces, so nothing is kept in sync by hand.

What the plugin can do

  • Update variables
  • Change the content of components
  • Automate repetitive tasks
  • Create typography scales
  • Create colour ranges
  • And more, from a single instruction

Stack

  • TypeScript end to end
  • Node.js — bridge server
  • Figma plugin
  • WebSocket + HTTP API
  • Types shared across all three pieces

Integrations

  • Figma Plugin API
  • Claude Code
  • WebSocket

Infrastructure

  • Local Node server
  • Figma plugin
  • GitHub
  • 12 architecture and usage documents
Figma Bridge — Lets an AI agent drive Figma directly, instead of exporting out of it.