Save hours by theming automatically
Bring your real shadcn/ui themes into Figma without rebuilding them by hand.
- tweakcn presets, custom or saved themes
- Create shadcn themes, or import custom one
- Paste raw global CSS files
Figma Plugin
Design in Figma. Ship real shadcn/ui code.
Import themes from tweakcn, shadcn Create, or CSS. Apply them instantly in Figma, generate React components, and copy CLI commands that work directly with your shadcn/ui project.
Export CSS to align perfectly with code
Push your Figma theme back into code. Export the active theme as CSS and drop it straight into your shadcn/ui project. No manual copying of values. No guessing which variables changed.
- Clean CSS output
- Built for shadcn conventions
- Keeps design and code aligned
Switch icon sets instantly
Change icon libraries across your system in one click. Update your entire kit without manually replacing icons or breaking layouts. Ideal for testing visual direction or matching an existing codebase.
- Global icon swapping
- Preserves sizing and structure
- Every shadcncraft block and component updates
Pro
Convert structured Figma layouts to React code
Generate production-ready React code from your designs. The plugin analyzes structured layouts and outputs React components built on shadcn/ui and Tailwind conventions.
- Clean, readable React output
- Shadcn-compatible structure
- Designed for real blocks and components
- Copy or open directly in Vercel v0
Pro Coming Soon
Generate Pro blocks CLI commands
Install blocks directly into your project. Select a Pro Block or Component and instantly generate the correct shadcn CLI command. Copy and paste into your terminal and you’re done.
- No documentation hunting
- No command mistakes
- Works with your existing shadcn setup
Design in Figma. Ship real shadcn/ui code.
Frequently Asked Questions
Quick FAQs to get you started.
Still have questions? See all FAQs, or get support.
The plugin connects Figma directly to shadcn/ui workflows. You can:
- Import from tweakcn
- Log in to your tweakcn account
- Apply preset, community, or custom themes
- Export themes as shadcn/ui-compatible CSS
- Copy CLI commands for shadcncraft components and blocks
- Export structured React code from selected frames
- Swap icon libraries across your entire file instantly
