index

The best tool was already there

· 4min

When a designer joined our product team, we faced reality: no Figma design system, no structured design flow, and no fast way to move pixels from the real app into quickly editable frames.

That was not news. I had known it for years, but other priorities always won. The designer didn’t invent the gap; they made it impossible to keep postponing.

We ship features fast, but design collaboration was all friction: screenshots, Discord threads, the live app. Every layout tweak meant re-explaining context because we had nowhere shared to iterate. Tools like html.to.design existed, but at scale they meant paid plans and plugin setup we do not want to commit to.

The trigger: Claude Code x Figma release

When Figma announced Claude Code integration, I thought: perfect, solved.

Then reality hit: config uncertainty, OAuth/PAT confusion, local vs remote MCP setup mismatch, expired sessions and weird capture states.

The integration is cool. The setup was not “send link and go” for non-technical teammates.

The technical discovery

The Claude Code × Figma integration works by injecting a capture.js script into the target page. The script reads hash params to know where to send the result:

#figmacapture=<session_id>&figmaendpoint=<url>&figmadelay=1000

While testing, a capture session expired. Instead of failing silently, the script fell back to copying the serialized DOM to the clipboard, which you can then paste directly into Figma as editable frames. That fallback was the interesting part: it meant the script could do its job without a valid session.

I tested with fake params to confirm, like figmacapture=FAKE_ID&figmadelay=0… and it just worked. The script still captured and serialized the page; it just skipped the part that needed an authenticated Claude Code connection. AHA!

That shifted the question from

“how do I make the official flow work for everyone?”

to

“how do I make this usable in 30 seconds for my team?”.

Our designer was never going to install Claude Code, fight OAuth, or debug a 403. They needed something that felt like a browser trick, not an engineering project.

So I wrapped it in a tiny Chrome extension, the same capture.js flow, just triggered from the browser toolbar without Claude Code in the loop:

// Injected into the active tab via chrome.scripting.executeScript
// capture.js is bundled inside the extension to bypass CSP restrictions.
;(function () {
  if (document.getElementById('__figma_capture_injected')) {
    location.hash = 'figmacapture=FAKE_ID&figmadelay=0'
    return
  }

  const marker = document.createElement('meta')
  marker.id = '__figma_capture_injected'
  document.head.appendChild(marker)

  // Set hash params BEFORE loading the script so it reads them on init
  location.hash = 'figmacapture=FAKE_ID&figmadelay=0'

  // Load capture.js from extension bundle — immune to page CSP
  const script = document.createElement('script')
  script.src = chrome.runtime.getURL('capture.js')
  script.onload = () => window.postMessage({ type: '__FIGMA_CAPTURE_LOADED' }, '*')
  script.onerror = () => window.postMessage({ type: '__FIGMA_CAPTURE_ERROR' }, '*')
  document.head.appendChild(script)
})()

What we shipped internally

I shared the extension with the team and some easy installation steps.

The value was not technical elegance. The value was: it’s free, immediate, and people can use it today.

A useful side effect: teammates started using it outside our product too. Because the flow runs in the browser, it works on any website, not just our app. That made it a team utility, not just an internal hack.

Before: a layout tweak meant describing it in words or pasting screenshots.

After: grab the real UI into Figma, move things around, then align in code. The conversation moved from interpretation to pixels.

Limitations

This is a workflow accelerator, not a Design System. It does not replace tokens, components, or documentation in Figma. Capture quality depends on the page (shadow DOM, canvas, third-party widgets can be messy). You still need some judgment and knowledge to decide what is worth keeping and what belongs in code.

Where we landed

The captures were never 100% perfect. They didn’t need to be. Our designer could iterate on real UI pulled into Figma, clean it up, name layers, and turn them into components, finally building the design system we’d been missing for years. The extension didn’t replace that work; it gave us something to shape instead of starting from a blank file.

We still use it: quick experiments, rough ideas, “what if we grab this pattern from that site?” moments. It stays in the toolbox next to the system we’re growing on top of it.

Claude Code releasing that integration pushed the whole ecosystem forward. For us, the win was smaller and more boring: get UI into Figma without config and keep AI for the problems where it actually wins.

Sometimes the highest-leverage move is not a smarter model. The best tool was already there.

Resources