# Figma to shadcn/ui Plugin Update: November 2025

> A deeper, cleaner generation flow with a new Build tab, an Optional instructions field for precise guidance, unstyled shadcn/ui outputs, support for new components, and flexible variable export modes.

Published: 2025-11-03 · Author: Matt Wierzbicki · Canonical: https://www.shadcndesign.com/blog/plugin-update-nov-2025

We’ve updated our <Link href="/plugin" target="_blank">Figma to shadcn/ui plugin</Link> with features that make generation more predictable, easier to style, and better aligned with real-world UI needs. The goal is to give you tighter control over how components are produced while keeping outputs clean and easy to maintain.

## Component Generation

### Build tab

The `Generate Code` tab is now `Build`. We’ve renamed the “Generate Code” tab to “Build” to better reflect the end-to-end flow: define inputs, optionally guide the AI, and produce components/layouts/features in one place.

### Optional instructions field

We've added a new `Optional instructions` field in Build tab

- You can now pass additional, free‑form guidance to the AI before generation. This helps you nudge behavior toward your exact requirements without changing your Figma file.
- Use it to request specific design or functional details. For example:
  - “Make sure the filter feature works for our blog posts.”
  - “Use the logo in the navbar with this URL (URL).”
  - “Prefer inline styles for buttons and cards.”
- This is especially helpful when the AI repeatedly miscreates a detail in your UI—include targeted instructions here to correct or reinforce what you want in the output.

### Clean and unstyled output

- The plugin now generates unstyled shadcn/ui components and layouts. Styling is expected to live in your globals.css and on the component/page level for maintainability and consistency.
- This approach pairs well with our Export Variables feature, letting you define tokens once and apply them across your system.
- If you prefer inline styles for certain cases, just say so in “Optional instructions” and the generator will follow.

### Improved output quality

- We’ve refined prompts and handling under the hood to produce more consistent, readable code. For best results, we recommend using the Claude 4.5 Sonnet model.

### Support for the latest shadcn/ui components

The plugin can now generate layouts that include the newest shadcn/ui components:

- Field
- ButtonGroup
- InputGroup
- Spinner
- Kbd

## Variables Export settings

You can now choose how variables are exported in plugin settings, depending on how verbose or minimal you want your token output to be:

- **Show only changed values:** Exports only variables that differ from the default shadcn/ui values. Ideal for lightweight diffs and clean PRs.

- **Show all shadcn/ui variables:** Exports the complete shadcn/ui variable set, including both changed and unchanged values. Good for audits and explicit configuration.

- **Show all variables (shadcn/ui + Tailwind):** Exports the full set of variables across shadcn/ui and Tailwind. Use this when you need a single source of truth for all tokens in your project.

## New features demo

In the video below, you can see how I utilize the plugin's features in my Figma to shadcn/ui workflow.

<LoomEmbed videoId="71b268746e5b48a0b272dcfe1751ed0a" />

<Button asChild className="w-full no-underline" size="lg">
  <Link href="/pricing">Get access to plugin in our Premium Package</Link>
</Button>