FigKit — one Figma capture, five runnable outputs

Turn a Figma frame into a runnable client — HTML, Unity, Godot, Cocos Creator — plus a semantic UI-DSL, all compiled from one pixel-faithful intermediate representation. Figma's own prototype links and transitions are imported; the application semantics on top (guards, data binding, app hooks) are declared once and run on every backend.

Figma (the design)	HTML (Edge)	Unity	Godot	Cocos Creator

One frame out of a shipping game's Figma file, captured once and compiled four ways. Each backend is measured against the first column — the design — never against the others: four renderers can be identical and identically wrong.

Mean difference from the Figma frame, outside text (/255; why outside text):

screen	HTML	Unity	Godot	Cocos
list	0.81	0.81	1.13	1.13
detail, with attachments	0.53	0.59	0.65	0.57
detail, nothing to claim	0.59	0.62	0.63	0.63

The frames are committed in examples/mail/design/, so this reproduces from a clone:

python3 tools/design-diff/check.py figma2html/examples/mail/screen-list.ui.json \
                                   figma2html/examples/mail/design/screen-list.png

figma REST ──► figma_capture ──►  IR: <screen>.ui.json (pixels) + flow.json (behavior)
                                   │        spec/ v1.1 — the shared contract, additive-only
        ┌──────────┬───────────┬───┴───────┬───────────┐
        ▼          ▼           ▼           ▼           ▼
   figma2html  figma2dsl  figma2unity figma2godot figma2cocos
   runnable    semantic   UXML+USS +  .tscn +     Creator TS
   HTML client UI-DSL(md) FlowBinder  GDScript    interpreter

        └──────────┴───────────┴──── figkit-motion ────┘
             the catalog all five share: 59 effects, 63 tokens, 6 algorithms

What separates it from a figma-to-code exporter: the flow layer. Figma's prototype interactions are real and FigKit imports them, but they run inside the Figma player, against static frames. flow.json adds what a shipping client needs and Figma cannot express — guards over app state, list rows cloned from real data, a clean engine-vs-app-hook boundary — keyed by Figma node ids so it survives re-capture, and implemented identically by every backend.

Status