Back to Plugins
Cross Collection Color Token Mapper

Cross Collection Color Token Mapper

Remap color variables to semantic tokens or Tailwind with one click

Plugin Preview

Cross Collection Color Token Mapper preview

About this plugin

Streamline your design system workflow with intelligent variable remapping.

Variables Collection Duplicator helps you transform color groups into semantic tokens or standard color systems with three powerful workflows:

🎨 Create New Collection

Build custom collections from scratch with complete control over naming. Perfect for creating versioned design systems or reorganizing your variable structure.

🎯 Map to Color Scheme

Transform any color palette into semantic categories (Primary, Secondary, Neutral, Positive, Negative). Auto-assigns categories as you select groups - ideal for converting brand-specific colors to semantic tokens.

âš¡ Map to Tailwind

Instantly map your colors to Tailwind's structure (red, blue, amber, etc.) with automatic 1:1 matching. Keep your Figma designs in perfect sync with Tailwind CSS.

Key Features:

  1. Target-first workflow - Choose your destination, and the plugin adapts automatically
  2. Smart filtering - Only see relevant sources and groups for your target
  3. Full color previews - See all color variants at a glance
  4. Preserve modes & aliases - Maintains your complete variable structure
  5. Update existing variables - Safely swap color palettes without breaking references

Perfect for:

  1. Design system managers building semantic token structures
  2. Teams using Tailwind CSS who want Figma parity
  3. Agencies managing multiple brand color palettes
  4. Designers A/B testing different color schemes
  5. Anyone maintaining complex variable collections
  6. 20 Tailwind colors supported: red, orange, amber, yellow, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, rose, slate, gray, zinc, neutral, stone.


Stop manually duplicating and renaming variables. Let the plugin handle the transformation while you focus on design.

Plugin Details

Version3
CreatedNovember 12, 2025
Last UpdatedNovember 13, 2025
Categorydesign-tools-other
CreatorPromad Design
Stats1 installs, 2 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none