Tokens Studio Tree Inspector - Design Tokens as Code in Dev Mode
Select a component, see every Tokens Studio token in it and its children as copy-ready code.
Plugin Preview
About this plugin
Transform your Tokens Studio workflow with comprehensive token inspection. This Dev Mode plugin shows all design tokens applied to selected elements AND their nested children in one structured tree view.š Key Benefits:ā¢ Complete Coverage - See tokens for entire component hierarchies, not just individual elementsā¢ Automation Ready - CSS-like output perfect for scripts and AI promptsā¢ Time Saving - No more element-by-element inspectionā¢ Developer Friendly - Bridge design tokens to code implementationšÆ Perfect for teams who:- Use Tokens Studio for design system management- Want to automate component development- Need comprehensive token auditing- Build design-to-code automation toolsSimply select any element in Dev Mode and get a complete token breakdown ready for your automation workflows.Requires Figma files with Tokens Studio tokens applied.
Plugin Details
| Version | 3 |
|---|---|
| Created | May 24, 2025 |
| Last Updated | September 5, 2026 |
| Category | Software development |
| Creator | Azmy Hanifa |
| Stats | 80 installs, 13 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- main:code.js
- Document Access:dynamic-page
- Editor Types:dev
- Allowed Domains:
- none
- Codegen Languages:
- Applied Tokens(applied-tokens)
More Like This
Discover other plugins in the Software development category.
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Code Snippet Editor
Translate component variants, properties, and more into dynamic code snippets for your design system
GitHub
Connect Design to Code