Back to Plugins
UI to JSON

UI to JSON

Turn Figma frames into structured JSON your AI agent can actually use.

Plugin Preview

UI to JSON preview

About this plugin

UI to JSON turns Figma frames into a clean, semantic JSON AST designed forAI-assisted frontend code generation — not pixel-perfect HTML dumps.Most Figma-to-code tools spit out noisy markup full of absolute positions,brittle class names, and missing intent. AI agents choke on it. This plugintakes the opposite approach: it extracts **design intent** — hierarchy,auto-layout, components, variants, and design tokens — and normalizes it intoa structured intermediate representation that LLMs and code generators canreason about reliably.What it does- Extracts semantic layout (direction, alignment, gap, padding)- Recognizes components, variants, and instances- Normalizes design tokens: colors, typography, spacing, radius, shadows- Cleans layer naming into stable semantic identifiers- Exports JSON + an optional markdown context file for prompt grounding- Lets you exclude noisy layers by nameBest for- Developers using Claude, Cursor, or GPT to generate UI from designs- Design system teams who want their Figma library as a structured spec- Anyone building deterministic design-to-code pipelinesSelect a frame, click Extract, copy the JSON into your agent's context.Everything runs locally — no network access, no telemetry, no account.

Plugin Details

Version1
CreatedMay 19, 2026
Last UpdatedMay 19, 2026
CategorySoftware development
CreatorBinjo
Stats132 installs, 49 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/index.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none