# Introduction

> Convert Figma designs to shadcn/ui code and manage design system variables with Figma to shadcn/ui plugin

Canonical: https://www.shadcndesign.com/docs/plugin

The [Figma to shadcn/ui](https://www.shadcndesign.com/plugin) 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](/docs/variables-management#settings-and-kit-detection)).

The plugin works best with the [shadcn/ui kit for Figma](https://www.shadcndesign.com/) by the shadcndesign team. Use components, variables, and styles from our UI kit to ensure accurate code generation.

## Topics

- [Generate code](/docs/generating-code)
- [Manage variables](/docs/variables-management)
- [Export and import Typeset](/docs/plugin-typeset)
- [Select and install Pro Blocks](/docs/plugin-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](https://www.figma.com/community/file/1516755232097201435/demo-figma-to-shadcn-ui-plugin) to test the plugin:

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

## Getting started

{/* TODO: re-shoot for plugin 2.0 */}
<RichImage src="/docs/plugin.png" alt="Image of plugin Figma to shadcn/ui" />

1. Open [our Figma to shadcn/ui plugin](https://www.figma.com/community/plugin/1427238109341529865/figma-to-shadcn-ui) 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](/pricing) package, you can find it in [Customer Portal (Polar)](https://polar.sh/shadcndesign/portal) 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](https://www.shadcndesign.com/). 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.