Plex UI
Figma Kit

Figma AI Bridge with Design Tokens

Your AI agent designs in Figma using your design system. It reads variables, picks the right components from your library, and creates new ones when nothing fits. Every fill, padding, and radius is bound to your tokens automatically.

Claude Code on the left calls the bridge. Figma on the right builds a menu from your components: labels, hover state, danger variant, all bound to your tokens.

Two-way workflow. Read existing frames to learn your patterns, then build new screens that match. Dark mode, theme, density: your tokens handle all of it.

How it works

  • Reads your variables and component bindings to learn the design system
  • Picks components from your library, creates new ones when nothing fits
  • Binds every property (fill, stroke, text, padding, gap, radius) to your tokens
  • Builds frames, text, instances with auto-layout, no hardcoded values
  • Works with any agent that has shell access: Claude Code, Codex, Antigravity
  • Local-first. Designs never leave your machine

Quick install

Two minutes from receipt email to running plugin.

  1. 1. Download the plugin zip from your Lemon Squeezy receipt email and unzip it.
  2. 2. In Figma: Plugins → Development → Import plugin from manifest, pick the manifest file from the unzipped folder.
  3. 3. Paste this prompt into Claude Code, Codex, or Antigravity. The agent starts the bridge and connects:
Start the Figma AI Bridge in the background:
  cd <unzipped-folder> && nohup node server.mjs > /tmp/figma-bridge.log 2>&1 &

Then use http://localhost:8867:
- GET  /status   → expect connected:true
- POST /command  → {"command":"...","params":{...}}
Use params, not args. Replace <unzipped-folder> with where you unzipped the plugin.

Figma AI Bridge

Connect any AI agent to Figma. Tokens, not pixels.

€49

One-time. Lifetime license.

Buy Now

Works with Claude Code, Codex, and Antigravity. macOS and Windows.

FAQ

Already purchased? Open setup instructions.