Supercharge Your Sketch Workflow with Styles Auto-Matcher Plugin

If you’ve ever spent hours manually linking hundreds of text layers, vector shapes, and orphaned colors to your master design system, you know the pain. Whether you are cleaning up a messy file from a colleague, integrating a downloaded UI kit, or updating a legacy project to use modern Sketch features, the process is usually tedious and error-prone.

Enter the Styles Auto-Matcher plugin for Sketch.

Developed by WhiteUI.Store, this tool acts as a bridge between creative chaos and a perfectly organized file. It scans your designs, identifies unlinked layers, and seamlessly connects them to your existing Shared Styles and Color Variables based on their visual properties.

Here is a deep dive into how it works, when to use it, and how it can help you modernize old design systems.

‍

What Can Styles Auto-Matcher Do?

The plugin is packed with four independent tools, each engineered to automate a specific part of your workflow:

• Match Color Variables: Scans vector shapes and text layers with custom colors and automatically applies matching Color Variables by comparing exact HEX codes.
• Match Text Styles: Links disconnected text layers to your Shared Text Styles by matching five exact parameters: Font Family, Font Size, Font Weight, Font Style, and Kerning.
• Match Shared Styles (Advanced): Evaluates vector objects and Frames by creating a unique visual signature (Fills, Borders, Shadows, Blurs, and Opacity). It safely links them to your Shared Layer Styles while strictly ignoring Corner Radius, ensuring your button and card geometries remain untouched.
• Global Detach: The ultimate tool for disconnecting a layout from a design system. It recursively unpacks all Symbol Instances, unlinks styles, and converts Color Variables back to custom colors—keeping the visual output 100% pixel-perfect for a clean developer handoff.

‍

See how it works

‍

Upgrading Legacy Design Systems

One of the most powerful ways to use Styles Auto-Matcher is to modernize an older design system. Sketch has evolved significantly over the years—most notably replacing solid color overrides with global Color Variables.

If you have an older UI kit or project built before Color Variables became the standard, upgrading it manually means clicking through every single layer to assign the new variables.

How to optimize an old system with the plugin:

1. Open your legacy Sketch file.
2. Define your new Color Variables and Shared Styles in the document (or import them from a linked library).
3. Run the "Find and Apply Color Variables" and "Find and Apply Shared Styles" commands.
4. The plugin will instantly scan your old custom colors and legacy layers, map them to your new modern variables, and link them up. Your file is now up-to-date with current Sketch architecture in a matter of seconds.

‍

Updated symbols easily

‍

Common Use Cases

Beyond upgrading legacy files, this plugin is a lifesaver in several everyday scenarios:

• Cleaning up third-party UI Kits: Downloaded templates often feature elements drawn by hand with no style links. Run the plugin to connect them to your local library instantly.
• Taming creative chaos: When conceptualizing, designers often work quickly using the eyedropper tool and custom colors. Once a concept is approved, use the plugin to lock the file into your strict design system.
• Targeted local edits: Thanks to the plugin's "Selection Mode," you can link or detach a single icon or component without affecting the hundreds of other artboards on your page.
• Client & Developer Handoff: If a client requests a "clean" source file without dependencies on your external symbol libraries, use the Detach All command to flatten the file safely.

‍

Detach all symbols and shared styles in one click

‍

How to Use the Plugin

The plugin operates on a strict "Do No Harm" philosophy. It uses Sketch's native API to apply styles smoothly without overwriting local object properties, and it ignores layers that are already linked.

It also features Context-Aware Execution:

• Selection Mode: Select specific objects (like a single complex icon or a specific Frame) and run the plugin. It will only process your selection.
• Entire Page Mode: Click on an empty space on your canvas to deselect everything, then run the plugin. It will scan and update the entire current page.

‍

Installation Guide

Getting started is incredibly simple:

1. Navigate to the Releases page on the plugin's GitHub repository.
2. Download the latest .zip archive (e.g., Sketch-Styles-Auto-Matcher.sketchplugin.zip).
3. Unzip the downloaded file.
4. Double-click the extracted Styles-Matcher.sketchplugin file. Sketch will automatically install it and show a success notification.

Once installed, you can access all the tools from your top menu via Plugins ➔ Styles Auto-Matcher.

‍

Get Started

The project is open-source and available on GitHub. You can download it, contribute, or report issues here:

👉 Sketch Styles Auto-Matcher GitHub Repository

Speed up your workflow and focus on what matters most - creating great experiences, not manually clicking through layers.