Menu
Getting started
Variables
Theming
Components
Icons
Development
Updates
Figma to shadcn/ui plugin
Licensing agreement
Docs
/
Figma to shadcn/ui plugin

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 Claude 3.5 Sonnet 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

  1. Open the Figma to shadcn/ui plugin via the Figma Community in our shadcn/ui kit for Figma file.
  2. Provide your license key - if you purchased our Pro or Premium package, you can find it in My Orders page after logging in to Lemon Squeezy.

‍

Generating code

You must have an Anthropic AI account and a valid API key to use the plugin.

Provide Anthropic API key

  1. Create your Anthropic AI account if you haven’t already - the Anthropic account needs to be paid so you can use AI tokens (credits) to generate components.
  2. Get your Anthropic API key from your settings page
  3. Open the Figma to shadcn/ui plugin
  4. Enter your Anthropic API key in the plugin interface (the key is stored locally and securely)
  5. Press the Verify key button to proceed. If the key is valid, you can start using the plugin.

Generate code

  1. Select the frame or component instance in Figma
  2. Use the “+” icon in the plugin's interface to add desktop variant
  3. Optionally, select the mobile variant of your design and press the “+” icon.
  4. 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.
  5. Press the Generate Code button and wait.

Using Generated Code

After generating code, you have several options:

  1. Copy Code: Click "Copy Code" to get the component code
  2. Copy CLI: Get the shadcn/ui CLI command to add the component to your shadcn/ui project
  3. 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:

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

Spacing

  1. Use spacing variables from the shadcn/ui kit for Figma
  2. Use size variables from the shadcn/ui kit for Figma
  3. 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

  1. Use the typography styles defined in the UI kit
  2. 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 Anthropic 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:

Exporting Variables

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

Importing Variables

  1. Go to the "Import" tab.
  2. 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.
  3. Make sure your variables match the structure presented below:‍
@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%;
  }
}
  1. Paste your CSS variables.
  2. Click "Import Variables" to update your Figma variables.

‍

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.

Do I need an Anthropic AI API key to use the plugin?

Yes, an Anthropic AI API key is required. The plugin uses AI tokens from your Anthropic AI account for all component generation tasks.

How much does code generation cost?

The cost is based on token usage through the Claude 3.5 Sonnet model. 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 Anthropic AI pricing documentation.

‍