Figma to shadcn/ui plugin - shadcn/ui kit for Figma

Docs

Figma to shadcn/ui plugin

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

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.

Getting started

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

Open the Figma to shadcn/ui plugin via the Figma Community in our shadcn/ui kit for Figma file.
Provide your license key - if you purchased the Premium package, you can find it in My Orders page after logging in to Lemon Squeezy. Please note: if you purchased the personal license, you can only activate the license key on one Figma account.

Generating code

To generate the components in our plugin, you must have a valid API key from one of the AI platforms mentioned below:

Google AI Studio
Anthropic AI

In our plugin, we support these AI models:

Gemini 2.5 Pro
Claude 3.5 Sonnet

Google AI Studio

We recommend using Gemini 2.5 Pro model - it provides the best results and it’s cheaper than other models.

Sign in or create your Google AI Studio account
Create API key
Add credits in the billing page.
Open the Figma to shadcn/ui plugin
Open the plugin settings
Select the Gemini 2.5 Pro model.
Enter your API key in the plugin settings (the key is stored locally and securely)
Press the Verify key button to proceed. If the key is valid, you can start using the plugin.

Anthropic AI

Sign in or create your Anthropic AI account if you haven’t already.
Go to your Anthropic AI Billing tab and add credits. Credits are necessary to generate components with our plugin.
Get your Anthropic API key from your settings page
Open the Figma to shadcn/ui plugin
Open the plugin settings
Select the Claude 3.5 Sonnet model.
Enter your API key in the plugin settings (the key is stored locally and securely)
Press the Verify key button to proceed. If the key is valid, you can start using the plugin.

Open AI

Sign in or create your Open AI account if you haven’t already.
Go to your billing and add credits.
Get your API key from API keys page.
Open the Figma to shadcn/ui plugin
Open the plugin settings
Select the GPT 4.1 model.
Enter your API key in the plugin settings (the key is stored locally and securely)
Press the Verify key button to proceed. If the key is valid, you can start using the plugin.

Generate code

Open the Figma to shadcn/ui plugin.
Select the frame or component instance in Figma
Use the “+” icon in the plugin's interface to add desktop variant
Optionally, select the mobile variant of your design and press the “+” icon.
Monitor token count to stay within API limits (Tier 1: 40,000 tokens, Tier 2: 80,000 tokens; learn more on token limits here. If needed, consider splitting larger components.
Press the Generate Code button and wait.

Using Generated Code

After generating code, you have several options:

Copy Code: Click "Copy Code" to get the component code
Copy CLI: Get the shadcn/ui CLI command to add the component to your shadcn/ui project
Open in v0: Open the component directly in v0 for further customization

The CLI command and Open in v0 link will be available for 24 hours after each generation.

‍

Best practices

Layers naming

Name your frames in Figma accordingly:

"Container" for main wrappers - if you want to have your div use the TailwindCSS “container” class
"Flex" for frames with horizontal auto layout applied
"Flex Vertical" for frames with vertical auto layout applied
"Grid" for grid layouts
“Video” for videos
“Image” for images
You can also use the Aspect Ratio component for images and videos to get the desired ratio in the generated code

Spacing

Use spacing variables from the shadcn/ui kit for Figma
Use size variables from the shadcn/ui kit for Figma
Avoid fixed widths when possible to ensure responsiveness

Colors

Use color variables from the shadcn/ui theme, such as "base/background" for backgrounds and "base/foreground" for text.

Typography

Use the typography styles defined in the UI kit
Use the typography variables defined in the UI kit

Icons

The plugin works best with Lucide icons available in the UI kit

Charts

Charts are not supported yet, we are working on it.

‍

Troubleshooting

If you encounter issues:

Ensure your API key is valid
Check that your design follows shadcn/ui patterns
Verify you're within the token limits
Try breaking larger components into smaller pieces
Make sure your Figma variables are properly set up

‍

Managing Variables

The plugin features a "Manage Variables" tab for handling design tokens.

Export Variables (Tailwind v4)

This feature is compatible with shadcn/ui Figma kit version May 2025 and newer. Follow these steps to export your theme settings:

Launch the plugin within your main shadcn/ui kit for Figma library file
Navigate to the "Manage Variables" tab
Select the "Export (v4)" tab
Choose your desired theme for export
Select your preferred color mode
Click "Generate CSS"
Click "Copy CLI" to copy the command
Open your shadcn/ui project in your code editor
Access the terminal in your IDE
Paste and execute the CLI command. Note: This process will overwrite your existing globals.css file with the theme settings from Figma. Consider creating a backup of your globals.css file before proceeding.

Export Variables (Tailwind v3)

This feature is dedicated to shadcn/ui kit for Figma version January 2025 and below. Follow these steps to export your theme variables:

Open the plugin in the main shadcn/ui kit for the Figma library file.
Switch to the "Manage Variables" tab.
Select the "Export (v3)" tab.
Click "Generate CSS" to export your Figma variables as CSS.
Copy the generated CSS for the selected theme (if multiple themes exist).
Paste the generated variables into your project’s globals.css file to replace the existing ones.

Import Variables (Tailwind v3)

This feature is dedicated to shadcn/ui kit for Figma version January 2025 and below. Follow these steps to import your theme variables to Figma:

Go to the "Import" tab.
Select the theme to which you want to apply the variables:
1. Existing theme (e.g., Default) - this will replace the variables with the values you provide.
2. New theme - this will add a new theme in the Figma variables panel with the variables you provide.
Make sure your variables match the structure presented below
Paste your CSS variables.
Click "Import Variables" to update your Figma variables.‍

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 20% 98%;
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 20% 98%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 262.1 83.3% 57.8%;
    --radius: 0rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --primary: 263.4 70% 50.4%;
    --primary-foreground: 210 20% 98%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 263.4 70% 50.4%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

FAQ

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

No, for the best results, we recommend using the plugin specifically with the shadcn/ui kit for Figma created by shadcndesign team. To achieve the best possible outcomes, use our recommended shadcn/ui kit and follow the abovementioned best practices.

Can I try plugin for free?

Yes. There are 10 free users available. Go to the plugin's Figma Community page to test the plugin in your copy of the shadcn/ui kit for Figma.

Do I need access to paid AI model credits to use the plugin?

Yes. The plugin uses AI credits from your AI platform account for all component generation tasks.

How much does code generation cost?

The cost is based on token usage. When you select a frame in Figma and add it using the "+" button, the plugin displays the estimated input token count for code generation. For current pricing details, please refer to the:

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’ll 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 Gemini 2.5 Pro model can also provide better results.

‍

Text Link