Component Guardian

About this plugin

Component Guardian helps design system maintainers identify breaking changes before publishing component updates. It captures a baseline snapshot of your components and compares against it to detect issues that could break existing instances—like removed properties, deleted variants, or conflicting variant configurations that prevent publishing.

How to Use

1. Capture a baseline – Open your component library and click "Capture Baseline" to snapshot the current state of all components
2. Make your changes – Edit components as needed
3. Scan for breaking changes – Click "Scan for Breaking Changes" to compare against the baseline
4. Review and fix – Issues are listed with severity indicators; click the target icon to navigate directly to the problem component
5. Recapture – After intentionally making breaking changes, recapture the baseline for future comparisons

Core Features

1. Baseline snapshots – Save the current state of all components in your file
2. Breaking change detection – Automatically detect removed components, deleted properties, changed property types, and removed variant options
3. Validation checks – Catch Figma errors like conflicting variants that prevent library publishing
4. Navigate to issues – Click any issue to jump directly to the affected component
5. Configurable scans – Toggle property and layer checking, adjust scan depth
6. Resizable window – Drag to resize the plugin window to fit your workflow

Key Benefits

1. Publish with confidence – Know exactly what's changed before your updates go live
2. Prevent broken instances – Catch issues that would break existing component instances across your team's files
3. Save debugging time – No more hunting for why instances broke after a library update
4. Catch Figma errors early – Detect validation issues like conflicting variants before attempting to publish
5. Communicate changes clearly – Understand the full scope of breaking changes to communicate with consumers