Design system
Explore the native Figma variables, semantic theme tokens, typography styles, effects, aliases, and token bindings generated by Niram.
The Design System region translates shadcn and Tailwind conventions into editable, native Figma resources.
Variables
Tailwind colors
OKLCH color scales are converted to Figma colors. Matching theme values alias the Tailwind variable instead of duplicating a literal.
Primitive tokens
Radius, spacing, typography, opacity, border, shadow, and blur values become reusable variables.
shadcn theme
Semantic light tokens and their dark-* twins live in a single-mode collection for Figma free-tier compatibility.
Token bindings
Generated dimensions, fills, effects, and typography bind back to variables wherever Figma supports it.
Styles
Niram creates Tailwind typography text styles plus shadow, inner-shadow, blur, and backdrop-blur effect styles. The selected preset’s body and heading fonts are loaded before styles and components are generated.
Page structure
The shared Niram page contains three owned regions in a deterministic order:
- Design System at the top.
- Components below the Design System.
- Blocks to the right of the Components grid.
Each region is tagged and regenerated independently, so running the plugin again does not clear unrelated work from the page.