Figma
Core Idea
Community-maintained Figma files recreate every shadcn/ui component with customizable props, typography and icons — useful for design handoff before implementation.
Key Concepts
- Community-contributed: Figma files are not officially maintained by shadcn/ui; questions go to the individual file maintainers.
- Free vs. Paid tiers: Free files cover core components; paid kits add hundreds of pro blocks/templates, theming systems, and design-to-code plugins (some with Figma MCP support).
Reference Tables
| Tier | Examples |
|---|
| Free | shadcn/ui components (Sitsiilia Bergmann), shadcn/ui design system (Pietro Schirano), Obra Community Edition |
| Paid | shadcn/ui kit (shadcndesign.com), shadcncraft, shadcn/studio, Shadcnblocks.com, Obra Pro, Shadcn Space, Shadcn Design System (ShadcnStore) |
Key Takeaways
- No official shadcn Figma kit exists; all listed resources are third-party/community.
- Several paid kits ship a design-to-code plugin or Figma MCP integration, converting frames directly into shadcn/ui React code.
Connects To
- mcp (ch097): some Figma kits' "design-to-code" plugins interoperate with the same MCP-based workflow.