Bring the full shadcn/ui design system into Figma in a single click.
This plugin instantly generates variables, colors, typography, radii, spacing, and all core tokens—plus fully structured component sets—directly inside your Figma file.
Designers get the entire system ready in seconds, no setup, no manual rebuilding, no hunting through docs.
- Imports the full shadcn/ui design system into Figma automatically
- Generates Variables (colors, typography, spacing, radii, shadows)
- Creates Component Sets structured exactly like shadcn/ui
- Sets up separate Figma pages for:
- Tokens & Variables
- Base Components
- Component Variants
- Patterns & Layouts
- Ensures pixel-perfect mapping between shadcn/ui and Figma
- Designed for both designers and frontend teams using shadcn/ui
Setting up a design system manually takes hours.
Importing shadcn/ui into Figma used to require:
- Rebuilding tokens by hand
- Manually converting Tailwind values
- Creating variants one by one
- Keeping everything synced with code
This plugin removes all of that friction.
Click once → the entire system appears ready to design with.
- Run the plugin in any Figma file
- Choose the shadcn/ui preset (default)
- The plugin generates:
- Figma Variables
- Component sets
- Auto-organized pages
- Start designing immediately with consistent system components
📂 Your Figma File ├─ 🎨 Tokens & Variables │ ├─ Colors │ ├─ Typography │ ├─ Spacing │ ├─ Radii │ └─ Shadows ├─ 🧱 Base Components ├─ 🧩 Component Variants └─ 📐 Patterns / Layouts
Everything is clean, editable, and aligns with production shadcn/ui code.
- Sync updates from shadcn/ui directly into Figma
- Support for custom themes & palettes
- One-click Tailwind → Figma variable generation
- Import user-defined component extensions
Search “Shadcn → Figma” in the Figma Community
or open the plugin URL directly.
PRs are welcome!
If you want to add integrations, presets, or improvements, feel free to open an issue or submit a pull request.
MIT License – free to use and modify.
Have ideas? Found a bug?
Open an issue and help make this plugin even better for the community.