Figma Components/Component sets to JSON

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 Sets

2. Review the list of detected components and select what you need

3. Click "Extract" to generate the JSON data

4. 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