February 2, 2025
Figma to shadcn/ui plugin - new features now available!
We've just added new features to Figma to shadcn/ui plugin, including: Open in v0, Copy CLI command, Generate CSS and Import variables.
Introducing Figma to shadcn/ui
We're excited to announce the release of Figma to shadcn/ui, a Figma plugin that transforms how teams implement design systems using shadcn/ui. Powered by Claude 3.5 Sonnet AI, this tool bridges the long-standing gap between design and development, making design system implementation faster and more reliable.
The Challenge We're Solving
For years, teams have struggled with the manual process of converting Figma designs into code. Developers spend countless hours interpreting designs, writing code, and maintaining consistency with design tokens. Meanwhile, designers face challenges ensuring their design system stays in sync with the codebase. Our plugin addresses these pain points head-on.
Watch the video overview
Key Features
AI-Powered Component Generation
Convert your Figma designs into production-ready shadcn/ui components instantly. The plugin uses AI to generate clean, accessible, and responsive code that follows best practices. Once generated, you have three flexible ways to use the code:
- Copy the component code directly into your project
- Use the shadcn/ui CLI command to add the component with proper dependencies
- Open in v0.dev for immediate testing and customization
Design Token Management
Maintain perfect consistency between your design system and codebase with our comprehensive variable management features:
- Export to CSS: Transform your Figma variables into ready-to-use CSS design tokens
- Import from Code: Bring your existing codebase variables back into Figma
- Theme Support: Full support for light and dark themes
Try it out today
You can access the plugin via the Figma Community.
- The plugin is available for our Pro and Premium package customers - you will find the license key on My Orders page in your Lemon Squeezy account.
- If you didn't purchase the Pro or Premium package, you can also try the plugin for free - 5 free uses included.
- Visit our documentation to learn more about getting started and best practices.