HN Showcase
Back to browse
GitHub Repository

MCP/Skills/CLI/libs to Decode Figma's binary Kiwi wire protocol: extract scenegraph, SVGs, and CSS from WebSocket frames, bypassing REST API rate limits.

28 starsJavaScript

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

by allan_s·Apr 1, 2026·7 points·3 comments
Visit ProjectView on HN

AI Analysis

●●●BangerWizardryBig BrainSolve My Problem

Bypasses Figma's REST rate limits by decoding the Kiwi wire protocol directly.

Strengths
  • •Reverse-engineered proprietary Kiwi binary format—extracts vectorNetworkBlob and commandsBlob
  • •Zero dependencies in core lib—pure functions taking Uint8Array buffers, no I/O
  • •Ships as lib, CLI, MCP server, and Claude Code plugin—multiple integration points
Weaknesses
  • •Requires Chrome DevTools Protocol access—can't run headless or server-side
  • •Protocol could change if Figma updates Kiwi format, breaking compatibility
Target Audience

Developers building Figma integrations or AI coding tools

Similar To

Figma REST API · Official Figma MCP Server · figma-js

Post Description

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.

Similar Projects