Figma has no native way to apply opacity to an aliased colour variable without breaking the link and forcing you back to hardcoded hex values. To handle hover states, alert tints, or Material Design elevations, you are forced to bloat your library with dozens of duplicate variables.
I built Sheer to solve this exact architectural bottleneck. It adds an automated, non-destructive opacity modifier layer to your workflow, here are its key features:
-
Token Mode: Type target steps (such as
8, 12, 20, 50) and instantly batch-generate clean, linked opacity scales directly from a base primitive variable. -
Quick Apply: Drop transparency onto individual component fills or strokes right on the canvas without polluting your library or breaking the core reference link.
-
Smart Sync: If a master brand primitive changes, Sheer audits the file and repairs all dependent opacity tokens in a single click.
-
Dev Mode: Automatically outputs production-ready CSS variables using native
color-mix()syntax directly for your developers.
Looking for feedback and suggestions for improvement on this
Here’s the link: https://www.figma.com/community/plugin/1638120622670765737
