Tokenizer

About this plugin

Tokenizer - Transform Your Design Files at Scale 🎨

Finally, a smart way to convert hard-coded values into design tokens without the tedious manual work. Tokenizer scans your entire file, finds every color, spacing value, and typography property, then helps you map them to variables and styles in seconds.

✨ What It Does

Tokenizer discovers all the raw values hiding in your designs—those one-off colors, random padding values, and unlinked text properties—and gives you a clean interface to map them to your design system tokens. No more hunting through layers or wondering which frames still use hard-coded values.

Scan once, map everywhere. Select a token for a value that appears 150 times, and the plugin updates all 150 instances with one click.

🚀 Key Features

Smart Discovery

1. Scans colors from fills, strokes, text, shadows, and gradients
2. Finds sizing values: width, height, padding, spacing, corner radius, and more
3. Detects typography properties across all text layers, even with mixed styles
4. Groups identical values so you can update them all at once

Intelligent Suggestions

1. Automatically suggests the closest matching tokens based on color similarity
2. Ranks number variables by exact and near matches (within 1px, 2px, 4px)
3. Boosts suggestions when token names match property context (e.g., "width" tokens for width properties)
4. Shows top matches with "Match" badges for quick decisions

Two Powerful Views

1. Merged View: See all unique values grouped by property. Map 100 instances of "12px padding" to a single token in one selection.
2. Detailed View: Fine-grained control. Map each instance individually when you need precision.

Fuzzy Search & Smart Organization

1. Multi-word search: "back med" finds "semantic/backgrounds/neutral/primary/medium"
2. Hierarchical token grouping by slashes in names
3. Natural sorting: spacing-50, spacing-100, spacing-200 (not spacing-100, spacing-200, spacing-50)
4. Color previews and hex values displayed inline

Property Navigation

1. Side navigation shows all discovered property types
2. Click to jump to any section instantly
3. Organized by domain: Color, Sizing, Typography

Deep Token Resolution

1. Follows variable alias chains to show actual values
2. Handles tokens that reference other tokens (alias → alias → raw value)
3. Shows transparency percentages for colors with alpha
4. Resolves up to 10 levels deep with circular reference protection

Dark Mode Support

1. Auto-detects your system preference
2. Manual toggle: Auto, Light, or Dark mode
3. Beautiful themes optimized for both modes
4. Preference persists across sessions

💪 Perfect For

Design System Teams

1. Drive token adoption across your organization
2. Clean up legacy files before handoff
3. Audit which properties are still using raw values
4. Generate proof-of-work with detailed JSON reports

Product Designers

1. Prepare files for developer handoff with confidence
2. Quickly align designs to your system after exploratory work
3. Fix inconsistencies discovered during design reviews
4. Maintain design system compliance at scale

Design Ops

1. Batch-convert files to use new token structures
2. Migrate from old naming conventions to new ones
3. Track token coverage metrics via audit exports
4. Identify gaps in your design system

🎯 Common Use Cases

Cleaning Up Exploration Work

You've been experimenting with colors and spacing. Now it's time to ship, but your file is full of one-off values. Token Mapper finds them all, groups identical values, and lets you map 200+ instances to proper tokens in minutes.

Design System Migration

Moving from hard-coded values to a token-based system? Scan your file, see exactly what needs mapping, and systematically convert everything with a clear audit trail.

Cross-Team Handoff

Before handing off to engineers, ensure every value is tokenized. The audit report proves your file is system-compliant and shows exactly what was changed.

Finding Gaps in Your System

Discover values that don't have matching tokens. If you're mapping padding-left and nothing matches "18px," maybe it's time to add that token to your system.

Bulk Updates

Need to update all instances of a specific shadow color across 50 components? Token Mapper groups them all, you map once, it updates everywhere.

📋 How It Works

1. Scan

Click "Scan File" and the plugin analyzes your entire page, discovering all raw colors, sizing values, and typography properties. Takes seconds, even on complex files.

2. Review

See everything organized by property type. Fills, strokes, padding, corner radius, font size—all grouped and ready to map. The merged view shows unique values; detailed view shows every instance.

3. Map

Open any dropdown to see your available tokens. Search, browse hierarchical groups, and select the right token. Top suggestions appear first with match indicators.

4. Apply

Click "Apply Mappings" and watch the magic happen. The plugin sets proper variable bindings on all selected properties, preserving opacity, blend modes, and other attributes.

5. Audit

Get a complete report showing what changed, what was mapped, and what couldn't be bound (with reasons). Download as JSON for your records.

6. Done

Successfully mapped items disappear from the list. Only unmapped work remains. Repeat until your file is fully tokenized.

✅ What Gets Mapped

Colors

1. Node fills and strokes
2. Text fills
3. Gradient stops (read-only preview)
4. Shadow colors (read-only preview)

Sizing

1. Width, height, min/max dimensions
2. Padding (all sides)
3. Item spacing in auto layout
4. Corner radius (all corners individually supported)
5. Stroke weight
6. Blur radius
7. Layout grid properties

Typography

1. Font size, line height, letter spacing
2. Paragraph spacing
3. Font family and style (preview only)
4. Applied text styles
5. Mixed text runs via styled segments