TokenCase

About this plugin

This Figma plugin allows you to extract color tokens from your designs and export them in multiple formats tailored to your development stack.

With a streamlined, visual-first interface, you can:

1. Select your target format: CSS variables, SCSS, LESS, Tailwind config, JSON, or custom token structures
2. Choose color format: Export colors in RGB, hexadecimal, or let the system auto-detect the optimal format for your chosen export type
3. Choose naming conventions: camelCase, kebab-case, PascalCase, or define your own pattern
4. Preview selected colors: See a live swatch panel of all extracted tokens before export, with real-time format preview
5. Customize token grouping: Organize by theme, component, or usage context
6. Visualize output structure: Instantly preview how tokens will be formatted based on your selected options, including color format representation
7. Export with flexibility: Copy tokens directly to your clipboard for immediate use, or download clean files ready for integration

Whether you're building design systems, syncing styles across platforms, or handing off to developers, this plugin bridges the gap between visual design and scalable implementation. The flexible color format options and versatile export methods (copy/download) ensure seamless integration into any workflow, from quick prototyping to production-ready design systems.