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 DoesTokenMatch scans your Figma file and matches component properties (colors, spacing, typography, effects) against your design tokens. This helps you:Find token usage: Discover which components use a specific tokenMaintain consistency: Ensure your components align with your token systemTrack dependencies: Understand which components will be affected by token changesValidate implementations: Verify that tokens are being used correctly✨ FeaturesNEW: Multiple design token sources Work with Git providers: GitHub, GitLab, BitBucketImport from npm packages and fine-tune file accessUse any URLPaste JSON directlySmart ScanningAll pages: Comprehensive scan of your entire Figma fileCurrent page: Faster scan of just the active pageSelection only: Quick scan of selected componentsPage filtering for targeted scanningNew: Exclude entire design token paths, e.g. your primitivesVisual ResultsSee exactly which components use a tokenView token values with color previews for color tokensDisplay spacing values with clear labels (Padding, Radius, etc.)Navigate directly to components in your Figma filePaste matching components to canvas for quick comparisonPerformance OptimizedEfficient component scanning with progress trackingIntelligent caching for faster subsequent scansHandles large files with thousands of componentsNew: Intelligent caching and subscribing to document changes in Figma, improving performance in files you've been using the plugin with before