Tokens Studio Tree Inspector
See every Tokens Studio token in component tree hierarchies. Built for automation.
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 tools
Simply 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 | 1 |
|---|---|
| Created | May 24, 2025 |
| Last Updated | May 24, 2025 |
| Category | Software development |
| Creator | Azmy Hanifa |
| Stats | 6 installs, 2 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.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI