Figma Components/Component sets to JSON
by Noyal
Extract standalone components, component sets, variants, and variables into JSON for developers.
Installs
27
Likes
3
Users
284
Views
392
Preview
About this plugin
Automate your developer handoff by extracting component set data directly to JSON. This plugin scans your Figma page, parses Component Sets, and generates a structured JSON output that you can use in your own build pipelines or documentation generators.
✨ Features:• Automated Scanning: Instantly finds all Component Sets on the current page• JSON Export: Generates clean, structured data for variants and properties• Variable Support: Extracts bound variables for tokens (colors, spacing, etc.)• Variant Mapping: Preserves component property definitions and values• Developer Ready: Output is designed to be consumed by scripts and tools🛠️ How it works:
1. Run the plugin on a page containing Component Sets2. Review the list of detected components and select what you need3. Click "Extract" to generate the JSON data4. Copy the output or download it as a .json file to use in your codebase💡 Use Cases:• Code Generation: Feed the JSON into scripts to scaffold React, Vue, or Swift components• Documentation: Auto-generate props tables and variant lists for your design system site• Token Audits: Analyze how variables are applied across different component variants• Quality Assurance: Verify that all variants have the correct properties and values defined
More software development plugins
View allBuilder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
by Steve Sewell
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Anima: Convert Figma to HTML/CSS/React/Tailwind,Vibe code,DevMode Inspect/Run React/HTML,App builder
by Anima
Anima - AI Design to code, Vibe code, Vibe design
SkewDat
Paidby Unfold
Skew any layer or group with all layers preserved to edit.
Zeplin
Paidby Zeplin Crew
Design tools are for designing. Zeplin is for clear, structured design delivery.