Show HN: I/Claude reverse-engineered Figma's binary WebSocket protocol

▲ Show HN: I/Claude reverse-engineered Figma's binary WebSocket protocol(github.com)

6 points by allan_s 12 hours ago | 3 comments

Disclaimer: this is vibe-coded — (<- I lost you there) the README, most of the code, and the binary format reverse-engineering were done with Claude. But the tool works and I use it everyday for some days now. As Baudelaire said "qu'importe le flacon, pourvu qu'on ait l'ivresse."

~I~ Claude built a tool that decodes Figma's internal binary protocol (Kiwi format over WebSocket) to extract the full scenegraph — every node, vector path, and style — without hitting the REST API.

Why: Figma's REST API has aggressive rate limits. The official MCP server requires a paid Dev Mode plan. I needed to explore designs from my AI coding tools without constantly getting 429'd.

It helps me to:

  1. extract the svg in a clean way (even the SVG export from figma likes to write the path as 12.0000001, even though the protocol does have 12 in it)  and images

  2. Get mapping from what I see in figma <-> what i see in the exported html

  3. It helps me help our designer to produce an actual "resizable" figma, so that they finally understand the pain of "ok it works when you click play on the iphone 17 frame you put, but what about an iphone12 ?" (I was always able to say that, but before I wasn't able to point out what was wrong, now I can)

How it works: When you open a Figma file in the browser, the editor loads the entire scenegraph via WebSocket as Kiwi-encoded binary frames. This tool captures those frames via Chrome DevTools Protocol, decodes the binary data (including two undocumented vector formats), and gives you structured JSON.

What Claude reverse-engineered:

  - The fig-wire frame format (schema delivery over WebSocket)

  - commandsBlob: Figma's pre-computed SVG path commands (MoveTo, LineTo, CubicBezier, ClosePath)

  - vectorNetworkBlob: the editable path data (vertices, segments with Bezier tangent handles, regions with loops)

  - All three are documented as Kaitai Struct specs (.ksy) so you can generate parsers in any language

Ships as: JS lib (zero deps), CLI, MCP server (Cursor/Windsurf/VS Code), and Claude Code plugin.

Binary format specs, sample fixtures, and everything else: https://github.com/allan-simon/figma-kiwi-protocol

I'm not a lawyer but my understanding is this is an interoperability tool under EU Directive 2009/24/EC Article 6. No Figma code is included: it only decodes the wire format of data transmitted to your own browser.

▲ dpacaud 3 hours ago | parent | next [-]

Thanks for sharing, it will really help me !

▲ kalmuraee 12 hours ago | parent | prev [-]

Love it, i used to copy paste into pencil to overcome that

	▲	allan_s 11 hours ago \| parent [-]
		thanks!