Introduction

The Figma to shadcn/ui plugin is a powerful tool that uses AI to automatically convert Figma designs into production-ready shadcn/ui and Tailwind CSS, while managing your design tokens seamlessly. It bridges the gap between design and development by generating responsive, accessible code and maintaining design system consistency through bi-directional variable management — export to CSS or import from your codebase with ease.

Plugin 2.0: it detects your kit for you

The plugin reads the file you have open and detects which kit it is, then configures itself to match — no version pickers, no manual setup. It recognizes:

• The current kit — the 8-style file (Nova through Lyra).
• Earlier kit releases — June 2026 and older.
• Tailwind v3 era kits — January 2025 and older.

Export and import work with every kit generation. The plugin picks the right defaults automatically; when an older file is open, the classic flow appears unchanged. You can confirm what was detected — and override it in the rare case a collection was renamed — in the plugin Settings (see Manage variables).

The plugin works best with the shadcn/ui kit for Figma by the shadcndesign team. Use components, variables, and styles from our UI kit to ensure accurate code generation.

Topics

• Generate code
• Manage variables
• Export and import Typeset
• Select and install Pro Blocks

Try it out for free

Learn how to use the shadcn/ui plugin in Figma. You have 15 free uses available to test the plugin.

Go to this Figma Community page to test the plugin:

1. Open the file in your Figma account.
2. Follow the instructions in the Figma file.

Getting started

1. Open our Figma to shadcn/ui plugin in the shadcn/ui kit for Figma file. Make sure to open our plugin (by Matt Wierzbicki).
2. Provide your license key – if you purchased the Premium package, you can find it in Customer Portal (Polar) after logging in with your email. Please note: if you purchased the personal license, you can only activate the license key on one Figma account.

FAQ

Is the plugin compatible with any shadcn/ui kit for Figma?

For the best results, we recommend using the plugin specifically with the shadcn/ui kit for Figma created by the shadcndesign team. The plugin auto-detects the current kit as well as all earlier kit generations, so any version of our kit is supported out of the box. To achieve the best possible outcomes, use our recommended shadcn/ui kit and follow the best practices described in the docs.

Is the quality of the generated code close to the original design in Figma?

Yes, the generated code accurately reflects your Figma designs when you follow our best practices, with the plugin performing optimally for simpler, modular components rather than complex page layouts. For maximum fidelity, we recommend generating code for individual UI elements or smaller parts of your UI instead of entire pages. Using the Claude Opus 4.8 model can also provide better results.