UI to JSON
A Figma plugin that compiles design files into AI-optimized semantic JSON: a clean intermediate representation built for AI frontend generation, not noisy CSS export.
Figma-to-code tools emit noisy exports with broken hierarchy and absolute positioning. Feed that to an AI agent and you get hallucinated code — the bottleneck is the representation, not the model.
One frame in. One clean tree out.
Excerpt from a real export · child nodes trimmed for length
{
"version": "1.0.0",
"source": { "fileName": "ShapPay User app", "selection": ["1812:16347"] },
"tokens": {
"colors": {
"surface-colors-surface-container-lowest": "#FFFFFF",
"text-colors-primary-text": "#343234",
"success-colors-success-icon-bg": "rgba(0, 204, 136, 0.1)"
},
"typography": {
"label-l1-inter-semi-bold-700": {
"fontWeight": 600, "fontSize": 24, "lineHeight": "100%", "letterSpacing": -2
}
},
"spacing": { "l": 24, "m": 16, "s": 8 },
"radius": { "m": 16, "radius-100": 100 }
},
"components": [
{ "name": "QuickActionsCard", "variants": ["Price=Visible"], "instances": 1 },
{ "name": "IconFund", "variants": [], "instances": 1 }
],
"root": {
"kind": "screen",
"name": "QuickActionsCard",
"component": "QuickActionsCard",
"variant": { "Price": "Visible" },
"position": "relational",
"layout": { "direction": "vertical", "gap": "l", "padding": "m", "alignItems": "center" },
"style": { "background": "surface-colors-surface-container-lowest", "borderRadius": "m" },
"children": [
{
"kind": "container",
"name": "WalletBalance",
"layout": { "direction": "vertical", "gap": "s" },
"responsive": { "height": "hug" },
"children": [ … ]
},
{
"kind": "button",
"name": "QuickActionsButtons",
"semanticRole": "interactive",
"layout": { "direction": "horizontal", "gap": "s", "alignItems": "center" },
"children": [ … ]
}
]
}
}Six passes between a node tree and a usable spec.
Semantic layout
Direction, alignment, spacing, nesting, and responsive intent, captured as relationships instead of pixel coordinates.
Component identity
Instances, variants, states, and overrides are recognised and collapsed into reusable identifiers.
Design tokens
Colour, type, spacing, radius, shadow, and sizing are normalised into named token references, not raw values.
Normalized naming
BTN_PRIMARY, btn-primary, and “Primary Btn” all resolve to one clean, semantic identifier.
Constraint translation
Raw Figma constraints become implementation-friendly responsive semantics like fill, hug, and max-width.
Token-efficient JSON
A hierarchical, deterministic, low-noise tree, plus optional markdown context for UX and interaction notes.
A semantic compiler layer between Figma and the agent.
Structural parser
Walks the Figma node tree, preserving parent-child hierarchy and stacking order.
Semantic normalizer
Cleans inconsistent layer names and infers meaning, not just geometry.
Layout intelligence
Reconstructs auto-layout, spacing, alignment, and relational vs. absolute intent.
Tokens + components
Extracts design tokens and maps reusable component instances, variants, and states.
AI-optimized AST
Outputs a compressed, deterministic JSON tree ready for an AI rendering agent.
Not a concept. A tool people use.
Launched on the Figma Community on 20 May 2026, with no paid distribution. 250+ people have reached the tool across Community installs and shared files; 119 of those are direct Community installs to date.
“This will definitely save tons of tokens. Great plugin.”
I shipped UI to JSON with a single launch post: a full walkthrough going from Figma to code with no MCPs and no screenshots burning tokens, just a semantic JSON export. It reached 40K views and 586 likes, and the response was immediate: this solved a real cost-and-quality problem people were already feeling in their AI workflows.
