NightHeron JSON Extractor

About this plugin

# NightHeron JSON Extractor (Figma Export Plugin)This is an advanced Figma export plugin designed for AI-assisted Design-to-Code (D2C) workflows. Its core philosophy is to transform complex Figma designs into **highly structured, semantically clear, and minimally sized standardized JSON data (AST)**. It automatically extracts all complex graphics that cannot be reproduced with CSS as independent assets, ultimately packaging everything into a ZIP file that is easy to feed to AI workflows or parsers.AI D2C Workflow link: https://github.com/marmotcyt/D2Cworkflow---## 🚀 Key Features### 1. Deep & Clean AST Extraction Engine- **Automated Flow Layout Conversion**: Deeply parses Figma's Auto Layout properties, accurately extracting alignment information such as `layoutMode`, `primaryAxisAlignItems`, `itemSpacing`, and `padding`, which can be directly converted to CSS Flexbox.- **Comprehensive Basic Styles Collection**: Extracts complete color attributes (Hex), typography configurations, stroke parameters (including solid colors, multi-color gradient `strokeGradient`, and inner/outer direction `strokeAlign`), corner radius (`cornerRadius`), and opacity.- **Rich Text Support**: Intelligently segments paragraphs with mixed colors and styles within a single text block, preventing style loss in multi-styled texts.### 2. Smart Asset ExportThere is no longer a need to manually mark layers for export. The plugin has a built-in intelligent probe algorithm:- It automatically detects whether a node structure contains pure vector graphics, boolean operations, masks, or standalone bitmaps that cannot be reproduced purely via CSS, while simultaneously ensuring the node **does not contain any text layers**.- It aggregates eligible standalone graphic nodes and their subtrees for a **one-click export**, preferentially attempting to extract them in `SVG` format. For complex nodes, it automatically falls back to double-resolution (@2x) `PNG` format.### 3. LLM-Friendly JSON Dataset OptimizationSince context limits (tokens) for Large Language Models are extremely valuable, this plugin offers an aggressive compression pipeline:- **Redundant Attribute Pruning (`optimizeTree`)**: Automatically trims default zero values, removes empty arrays, and erases redundant background colors and internal layer information for nodes already converted to image assets.- **Component/List Reuse Detection (`deduplicateSiblings`)**: Intelligently identifies identical structures in peer lists (e.g., e-commerce product cards) and converts them into a `TEMPLATE` engine format. Similar structures only retain varying variables (text, colors, etc.) and point back to a baseline `_ref`, drastically reducing JSON explosion caused by repetitive lists.### 4. Powerful Prototype & Scrolling InheritanceSeamlessly extracts front-edge scrolling and positioning interactions of a page:- Supports capturing element pinning relative to the viewport, using the `numberOfFixedChildren` principle to accurately expose a layer's `isFixed` boolean value (useful for sticky headers/footers).- Extracts artboard-level `overflowDirection` for localized scrolling, along with Absolute positioning floating structures (`layoutPositioning` and the recently introduced `scrollBehavior`), helping AI recreate interactive structures faithfully.### 5. Easy ZIP GenerationAutomatically separates Base64 strings into actual image files using JSZip and UI-layer communication protocols:- `design.json`: Contains core structure and styles.- `skeleton.txt`: Contains a simplified outline viewport structure tree for high-level business overview.- `assets/` folder: Stores all purified images and SVG files.All operations are completed locally offline by the plugin, without routing through external data networks.