adamantium token lab - analyze, organize & export tokens

About this plugin

adamantium token lab

Your ultimate Figma Variables exporter & manager to rule your tokens.

Stop manually transcribing design tokens! adamantium token lab bridges the gap between your Figma Variables and your codebase, streamlining your design-to-development workflow with unparalleled power and flexibility.

Whether you're working with a simple project or a complex multi-library design system, adamantium token lab gives you the tools to view, manage, analyze, and export your design tokens exactly how you need them. Say goodbye to errors, inconsistencies, and wasted time.

Why You Need adamantium token lab:

1. Bridge the Design-Dev Gap: Seamlessly translate your Figma Variables into production-ready code.
2. Ensure Consistency: Maintain a single source of truth for your design tokens across all projects.
3. Boost Efficiency: Automate token exports, saving hours and reducing manual errors.
4. Unmatched Customization: Tailor token output to perfectly match your team's coding standards.
5. Maintain a Clean Design System: Understand token usage, identify unused variables, and keep your system tidy.
6. Empower Collaboration: Provide developers with exactly what they need, in their preferred format.
7. Handle Complexity with Ease: Advanced features like comprehensive library alias resolution simplify managing large-scale design systems.

Core Features:

Token Viewing & Management:

1. View all Figma Variables (colors, numbers, strings, booleans) in a dynamic, resizable table.
2. See token names, descriptions, types, and values per mode at a glance.
3. Toggle in-table alias resolution to see actual values directly.
4. Customize the display format for color values (HEX, RGBA, HSLA, etc.) in the table.
5. Easily filter and view tokens from specific collections.

Powerful & Highly Customizable Export Engine:

1. Export to CSS Custom Properties.
2. Export to SASS Variables ($var).
3. Export to SASS Maps (Nested or Flat options available).
4. Export to JSON (Structured or Nested, with options for flat key paths).
5. Export a developer-friendly Intermediate Representation (IR) for custom workflows.
6. Apply naming conventions: camelCase, PascalCase, kebab-case, snake_case, and more.
7. Add custom prefixes and suffixes to token names or filenames.
8. Define custom path separators for token names (e.g., -, _, .).
9. Output colors in various formats: HEX, HEX8, RGB(A), HSL(A), HSB(A).
10. Configure numeric units (px, rem, em, pt) and base font size for rem/em.
11. Choose your alias strategy: embed resolved values or reference original variables/map keys.
12. Optionally include collection and mode names in exported variable names.
13. Include token descriptions as comments in your exported code.
14. Output JSON color values as strings or structured objects.
15. Customize CSS mode selector templates (e.g., :root[data-theme="$MODE"]).
16. See an instant live preview of your export with syntax highlighting.
17. Download generated token files easily.

Advanced Token Usage Analysis:

1. Identify which design tokens are actively used in your Figma designs.
2. Analyze token usage on the "Current Page" or across the "Entire File".
3. View a "Used" column in the token table for clear visual indicators.
4. See updated collection counts showing (used / total) tokens after analysis.
5. View a prominent banner confirming the scope and results of the last analysis.
6. Filter the token list to show "All," "Used," or "Unused" tokens.

Deep Library Integration (All Features Currently Enabled):

1. Effortlessly work with variables from your enabled Figma libraries.
2. See clear indicators for the source library of your collections, including the library name where available.
3. Includes powerful, deep alias resolution across external libraries – essential for complex design systems, ensuring your exported values are always accurate.
4. The UI intuitively displays information about library-linked aliases with distinct styling, providing full clarity in your token management.

Get Started with adamantium token lab Today!

Take control of your design tokens, accelerate your development process, and ensure unparalleled consistency across your projects. Install adamantium token lab and transform your Figma Variables workflow!

🌱 This is a Beta Version!

adamantium token lab is currently in active development and is being released as a Beta version. This means that while we've worked hard to make it powerful and stable, you might encounter occasional bugs or quirks.

Your Feedback is Gold! 🪙

We are incredibly passionate about making adamantium token lab the best token management tool for you, and your experience and insights are crucial to this journey. As you use the plugin, please help us improve by:

1. Reporting any bugs or issues you encounter.
2. Sharing your feature requests and ideas for new functionality.
3. Letting us know what you love and what could be even better.

Your feedback will directly shape the future of adamantium token lab, helping us to squash bugs, refine features, and build the ultimate token workflow tool. We're committed to regular updates and improvements based on your input.