Full-Fidelity Figma Exporter for AI Coding Agents (JSON/TOON)

About this plugin

Full-Fidelity Figma Exporter for AI Coding Agents exports the implementation-critical data that coding agents need to recreate a Figma selection exactly, without guessing.Most Figma export tools reduce, flatten, or omit details that matter during implementation. This plugin is built for developers who want high-fidelity UI reconstruction in React or other frontend stacks, especially when an AI coding agent is writing the code. Instead of giving the agent a screenshot and hoping it infers the structure, you can give it structured data with the real design intent preserved.The exporter generates canonical `JSON` and `TOON` outputs from the selected node and all descendants. It captures node hierarchy, dimensions, relative and absolute bounds, Auto Layout settings, fills, strokes, effects, corner radii, opacity, blend modes, variables, image crop data, and text properties. Most importantly, it preserves text style runs through `styledTextSegments`-derived `textRuns`, so agents can reproduce span-level styling changes such as different letter spacing, fill color, font size, or weight within a single text layer.This is especially useful for marketing pages, landing pages, and editorial layouts where “close enough” is not acceptable. If a design uses subtle inline typography changes like widened spacing on a single character, different styling on punctuation, or mixed styles inside one sentence, this exporter gives your coding agent the exact source data needed to implement it faithfully.**Who this is for**- Developers using AI coding agents to build UIs from Figma- Teams that need exact frontend recreation rather than approximation- React, Next.js, Tailwind, and design-system workflows- Projects where text runs, variables, Auto Layout, and image crop data must be preserved**What it exports**- Canonical node map with `id`, `name`, `type`, `parentId`, `childIds`- Geometry including position, size, relative bounds, and absolute bounds- Auto Layout properties for Flexbox-like reconstruction- Appearance data such as fills, strokes, effects, opacity, and corner radius- Variable bindings and variable dictionaries- Image assets with crop and transform metadata- Text nodes with base typography data- `textRuns` for exact inline style reconstruction- `JSON` and `TOON` output formats for different downstream workflows**How to use it**1. Select a frame or node in Figma.2. Run the plugin.3. Export in `JSON` or `TOON`.4. Copy or download the result.5. Give that export directly to your coding agent together with your implementation goal.**How to use the output with AI**Give your coding agent:- The exported `JSON` or `TOON`- Your target stack, for example React, Next.js, Tailwind, or plain CSS- A clear instruction such as:“Recreate this Figma selection exactly. Use `textRuns` for span splitting, preserve Auto Layout semantics, preserve variable references where possible, and do not guess missing styling.”This works far better than screenshots alone because the agent receives the actual structure and styling data instead of trying to infer layout and typography from pixels.**Why JSON and TOON**- `JSON` is ideal for programmatic pipelines and debugging- `TOON` is more compact and easier to pass into coding agents with less token overheadIf you want AI-generated UI code that matches the design for real, this plugin gives the model the full data it needs.