Generate code

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
• v0
• Anthropic AI

In our plugin, we support these AI models:

• Claude Opus 4.8 (recommended)
• Claude Fable 5 (Anthropic's most capable model)
• Claude Sonnet 5
• Claude Opus 4.7
• Claude Sonnet 4.6
• Gemini 3.1 Pro Preview
• Gemini 3.5 Flash
• v0-1.5-md
• v0-1.5-lg

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:

• https://ai.google.dev/gemini-api/docs/pricing
• https://v0.app/pricing
• https://platform.claude.com/docs/en/pricing

Anthropic AI

1. Sign in or create your Anthropic AI account if you haven’t already.
2. Go to your Anthropic AI Billing tab and add credits. Credits are necessary to generate components with our plugin.
3. Get your Anthropic API key from your settings page.
4. Open the Figma to shadcn/ui plugin.
5. Open the plugin settings.
6. Select the Claude Opus 4.8 model (recommended). One Anthropic API key works for all Claude models in the plugin.
7. Enter your API key in the plugin settings (the key is stored locally and securely).
8. Press the Verify key button to proceed. If the key is valid, you can start using the plugin.

Claude Fable 5 is Anthropic's most capable model and is priced above the Opus tier. It also requires an Anthropic organization with standard (30-day) data retention — organizations configured for zero data retention cannot use it.

Google AI Studio

1. Sign in or create your Google AI Studio account.
2. Create an API key.
3. Add credits in the billing page.
4. Open the Figma to shadcn/ui plugin.
5. Open the plugin settings.
6. Select the Gemini 3.1 Pro Preview model (strongest reasoning) or Gemini 3.5 Flash (faster and cheaper). One Google API key works for both.
7. Enter your API key in the plugin settings (the key is stored locally and securely).
8. Press the Verify key button to proceed. If the key is valid, you can start using the plugin.

v0

1. Create your v0 account.
2. Upgrade your account to Premium.
3. Go to Settings / API keys.
4. Create a new key.
5. Enter your API key in the plugin settings (the key is stored locally and securely).
6. Press the Verify button to proceed. If the key is valid, you can start using the plugin.

Select your stack

The Your stack selectors in the Build tab tell the plugin which project setup the generated code should target. Set them once — the plugin remembers your choice.

Output format

• React + shadcn/ui (default) — generates a React TypeScript component built with shadcn/ui components and Tailwind CSS.
• HTML & CSS — generates a single self-contained .html file with semantic markup and vanilla CSS. No React, no Tailwind, no build step — paste it into a file and open it in a browser. When HTML & CSS is selected, the component library and framework selectors are hidden, since they only apply to React output.

Component library

• Radix UI (default) — for shadcn/ui projects built on Radix primitives. Composition uses the asChild prop.
• Base UI — for projects created with the Base UI variants of shadcn/ui (the default for new shadcn/ui projects since July 2026). The generated code uses the render prop instead of asChild, passes the options array to Select via the items prop, and follows the other Base UI conventions.

Framework

• Next.js (default) — adds the "use client" directive and uses the Next.js Link component.
• Vite (React SPA) — plain <a> links, no "use client" directive.
• React Router — uses import { Link } from "react-router" with the to prop.
• TanStack Start — uses import { Link } from "@tanstack/react-router" with the to prop.

If you're not sure which component library your project uses: projects created with npx shadcn init after July 2026 use Base UI by default; projects created earlier (or with the -b radix flag) use Radix. You can also check whether your components/ui files import from radix-ui/@radix-ui/* (Radix) or @base-ui/react (Base UI).

Generate code

1. Open the Figma to shadcn/ui plugin.
2. Select the frame or component instance in Figma.
3. Use the "+" icon in the plugin's interface to add the desktop variant. Optionally, select the mobile variant of your design and press the "+" icon.
4. Select your output format in the Your stack row — and for React output, your component library and framework — so the generated code matches your project.
5. You can also provide extra instructions, for example, Make sure to implement the searching feature, Make sure the tab filters work, Use this logo (URL) in the navbar, etc.
6. Monitor token count to stay within API limits. If needed, consider splitting larger components.
7. Press the Build it button and wait.

HTML & CSS output

When the output format is set to HTML & CSS, the plugin generates one complete, self-contained HTML document instead of a React component:

• Semantic HTML — headers, sections, buttons, forms, and landmarks instead of styled divs.
• shadcn/ui theme variables — the CSS references tokens like var(--primary) and var(--background), with a :root (light) and .dark theme block embedded at the top of the stylesheet. When you run the plugin in a kit file, the block carries your file's actual theme values; users who already have a globals.css from the variables export can simply delete the block.
• Faithful styling — spacing, radii, colors, and typography come from your actual Figma values, including mixed-color text, translucent borders, and fully-rounded (pill) elements.
• Working interactivity — native HTML elements first (<details>, <dialog>, native selects), with a minimal script only where needed (tabs, mobile navigation).
• Responsive — mobile-first CSS with media queries; the optional mobile frame input works the same way as in React mode.
• Icons and fonts — icons are embedded as inline SVG, and the design's font loads from Google Fonts or Fontshare with a system fallback stack.

The result is ready to open in a browser as-is — useful for landing pages, email-adjacent static pages, handoff to non-React stacks, or quick prototypes.

Using generated code

After generating code, you have several options:

1. Copy Code: Click Copy Code to get the component code (or the HTML file in HTML & CSS mode).
2. Copy CLI: Get the shadcn/ui CLI command to add the component to your shadcn/ui project. The CLI resolves component dependencies against your project's own components.json, so it works for every stack. React output only.
3. Open in v0: Open the component directly in v0 for further customization. v0 targets Next.js projects, so this option is available when Next.js is selected as your framework. React output only.

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

Best practices

Best practices can help you achieve better results for the generated components.

Layer naming

Name your frames in Figma accordingly:

1. Container for main wrappers – if you want to have your div use the Tailwind CSS 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 background for backgrounds and foreground for text. These semantic tokens carry their exact shadcn/ui names. The plugin also understands the kit's custom semantic tokens — surfaces like field, control, muted-hover, or focus-ring — and maps them to the correct shadcn/ui utility classes in the generated code. Stick to the kit's variables and let the plugin translate them.

Typography

1. Use the typography styles defined in the UI kit.
2. Use the typography variables defined in the UI kit.

Prose and Typeset

For long-form content, use the kit's Typeset prose components (headings, paragraphs, lists, blockquotes, tables, and the Rich Text composite). The plugin recognizes Typeset content and wraps it in a .typeset container in the generated code, applying the matching measure-* width classes — so you don't hand-style the inner headings and paragraphs.

Icons

The plugin works best with the icon library active in your kit. The kit ships five libraries — Lucide (default), HugeIcons, Phosphor, Tabler, and Remix Icon — and the generated code imports from the one you have enabled. See the icons documentation for how to switch libraries.

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.