TokenMatch

About this plugin

TokenMatch is a Figma plugin that bridges the gap between your design token repository and your Figma components. It helps you discover which components in your Figma file are using specific design tokens, making it easier to maintain consistency and track token usage across your design system.

Important: This plugin currently does not work with Figma Variables and is aimed at a workflow involving Tokens Studio or any other W3C design token approach.

🎯 What It Does

TokenMatch scans your Figma file and matches component properties (colors, spacing, typography, effects) against your design tokens stored in GitHub. This helps you:

1. Find token usage: Discover which components use a specific token
2. Maintain consistency: Ensure your components align with your token system
3. Track dependencies: Understand which components will be affected by token changes
4. Validate implementations: Verify that tokens are being used correctly

✨ Features

Smart Scanning

- All pages: Comprehensive scan of your entire Figma file

- Current page: Faster scan of just the active page

- Selection only: Quick scan of selected components

- Page filtering for targeted scanning

Visual Results

- See exactly which components use a token

- View token values with color previews for color tokens

- Display spacing values with clear labels (Padding, Gap, Radius, etc.)

- Navigate directly to components in your Figma file

- Paste matching components to canvas for quick comparison

Performance Optimized

- Efficient component scanning with progress tracking

- Intelligent caching for faster subsequent scans

- Handles large files with thousands of components