Sheer: Variable Opacity Creator

About this plugin

Sheer is a Figma plugin that creates colour opacity variables from your existing colour variables without breaking your design system.Every design system hits this wall: Figma has no native way to apply opacity to a colour variable without breaking the alias. Teams are forced to either bloat their libraries with hardcoded variants or use layer hacks that break developer handoff. Sheer fixes this instantly.Core FeaturesToken Mode: Select a base colour, type your target opacities (e.g., 10, 20, 50), and instantly batch-generate perfectly linked, named semantic tokens inside your Local Variables panel.Quick Apply: Need a one-off transparency? Apply direct opacity to any solid fill or stroke without polluting your global library. It leverages a clean engine loophole to keep the underlying variable link 100% intact.Smart Sync: If a master brand colour changes, Sheer detects the shift, flags the affected tokens, and updates every dependent opacity token across your file in a single click.Dev Mode Handoff: Completely bypasses Figma's broken, hardcoded rgba fallbacks. It natively outputs production-ready CSS variables formatted in modern color-mix() syntax.Built-in GuardrailsRestricts token generation to single-variable primitives to protect your source of truth.Automatically sanitises messy layer names (spaces, slashes, capitals) into clean kebab-case CSS.Stop managing opacity by hand. Bridge the gap between design tokens and front-end code.