Harmony – Snap Any Design to Your System Styles

About this plugin

Clean up designs by applying styles and variables from your design system!

This plugin automatically snaps every color, text style, spacing, and radius in your design to the nearest matching style token from your design system.

Disclaimer: the design styles and variables should be present in the file

Whether you’re importing AI-generated UIs or working with inconsistent layouts, this tool ensures pixel-perfect alignment to your style guide.

It identifies and merges duplicate styles, normalizes paddings and spacings to a consistent grid and applies variables also to the spacing padding from your design system-keeping your file tidy, lightweight, and production-ready.

Perfect for design system maintainers, UI/UX designers, and teams working with handoff-ready components.

✅ Matches colors using advanced perceptual comparison

✅ Aligns font sizes and weights to existing text styles

✅ Snaps corner radii and auto-layout spacing to your token grid

✅ Cleans unused styles with detailed before/after stats

✅ Works with selections or full-page scans

Please message any feedback or suggestion on [email protected]