Skip to content

Layerbridge

Letting AI coding tools design inside a live Figma file.

The tool I used to connect Claude Code to Figma was taken down, so I started from gethopp’s open-source version. I directed Claude Code to extend it, tested it in Figma, and released it as Layerbridge.

Code on GitHub (opens in a new tab)npm package (opens in a new tab)

figma.com
Work card

MyAutoBio

Your autobiography, without sitting down to write it.

A journaling app that turns your answers into a timeline of your life and a printed hardcover.

ConsumerShipped2023–24
Work card
Prompt
Build the work card from the file's own components.
Tool calls
  1. create_frame 
  2. create_text 
  3. create_instance 
  4. create_image 
Result

It builds with the file's own components and text styles rather than drawing shapes, so what lands is a card the file already knows how to keep.

What it is

A Figma plugin and a small local server that connect AI coding tools like Claude Code to Figma. They can read, create and edit designs in the file I have open, across design files, FigJam and Slides.

Why I needed it

I wanted to take screens from Figma into code, build them, and check the build against the design. The tools I tried on GitHub were limited, and the one I relied on was taken down, so I made my own.

How I did it

I started from gethopp’s open-source bridge and directed Claude Code to add what I needed: accessibility checks, design-system fixes, code output, and FigJam and Slides support. I tested every tool in a real Figma file before publishing it on GitHub and npm.