Figma to shadcn/ui Plugin Update: November 2025

We’ve updated our Figma to shadcn/ui plugin 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.

Get access to plugin in our Premium Package