Shadows, Blur & Rings
Tailwind shadow, blur, and ring utilities are converted to Figma drop shadows, layer blurs, and stroke/shadow effects — pixel-perfect.
How it works
Drop shadows (`shadow-sm` through `shadow-2xl`) become Figma DROP_SHADOW effects with the correct x/y offset, blur radius, and spread. Blur filters (`blur-sm` through `blur-3xl`) become Figma LAYER_BLUR effects with Gaussian standard deviation scaling. Focus rings (`ring`, `ring-{width}`, `ring-{color}`, `ring-offset-{width}`, `ring-inset`) are rendered as stroke when the element has no fill, or as DROP_SHADOW with spread otherwise — matching CSS behaviour exactly.
Usage
- 1
Apply shadow utilities to any component: `shadow`, `shadow-md`, `shadow-lg`, etc.
- 2
Apply blur: `blur-sm`, `blur`, `blur-xl`, etc.
- 3
Apply ring utilities for focus states: `ring`, `ring-2`, `ring-primary`, `ring-offset-2`.
- 4
Run 'Generate Design System Page' — all effects are applied as native Figma effects.
- 5
Shadows can be reverse-mapped back to Tailwind classes when syncing tokens to code.