shadcn/studio Figma Plugin
AI-PoweredTransform your Figma designs into React components with shadcn integration using AI-powered code generation. Our plugin follows a BYOK (Bring Your Own Key) model - you provide your own AI API keys, giving you full control over costs and usage.
Overview
The shadcn/studio Figma Plugin is an advanced design-to-code tool that bridges the gap between design and development. It leverages cutting-edge AI models to automatically analyze your Figma frames and generate clean, maintainable React components using shadcn components and Tailwind CSS.
Built for modern development workflows, the plugin supports multiple AI providers and generates responsive code. Whether you're building individual components or entire design systems, this plugin accelerates your development process while maintaining code quality and design fidelity.
How Pricing Works: Our plugin uses a BYOK (Bring Your Own Key) model, meaning you provide your own AI API keys from providers like Anthropic, Google, or OpenAI. You only pay for what you use directly to the AI provider - no additional markup or subscription fees from us.
Key Features
Getting Started
Before using the plugin, ensure you have a Figma account with design files, a valid license key for the plugin, and an API key from one of the supported AI providers.
Installation
- Open Figma in your browser or desktop app
- Go to Plugins → Manage plugins in the Figma menu
- Search for "Shadcn Studio Figma" in the plugin marketplace
- Click Install to add the plugin to your account
Supported AI Models & Setup
The plugin supports multiple AI providers, each optimized for different use cases. Choose one of the supported AI providers and follow the setup instructions:
Setup Instructions:
- Visit Google AI Studio
- Sign in with your Google account
- Navigate to API Keys section and create a new key
- Add billing information and credits (required for Pro models)
- Select "Gemini 2.5 Pro" or "Gemini 3.0 Pro" in plugin settings
- Enter your API key and verify
Recommended for:
High-quality code generation, complex components, cost-effective premium results
Setup Instructions:
- Visit Anthropic Console
- Create an account or sign in
- Generate a new API key
- Add credits to your account
- Select Claude model (Sonnet 4.5 or Opus 4.5 for latest features) in plugin settings
- Enter your API key and verify
Recommended for:
Complex layouts, premium quality output, detailed component structure, enterprise-grade code
Setup Instructions:
- Visit OpenAI Platform
- Sign in to your OpenAI account
- Create a new secret key
- Add payment method and credits
- Select "GPT-5.2" in plugin settings
- Enter your API key and verify
Recommended for:
Standard components, reliable performance, familiar interface, consistent results
Model Comparison & Tips:
- Gemini 3.0 Pro (Recommended): Best overall choice - excellent quality at competitive pricing, great for complex components
- Gemini 2.5 Pro: Cost-effective alternative with solid performance for most use cases
- Claude Sonnet 4.5: Latest Claude model with enhanced reasoning and code generation capabilities
- Claude Opus 4.5: Premium quality for the most complex layouts and enterprise requirements
- Claude 3.7 Sonnet & Sonnet 4: Proven track record for reliable, high-quality code generation
- GPT-5.2: Latest OpenAI model with improved reasoning and consistent results across various component types
- Note: All Gemini Pro models require a paid Google Cloud API key - free tier keys will not work
Understanding Token Costs
Before generating code, the plugin displays estimated input token usage including.
Cost Optimization Tips:
- Break large components into smaller parts
- Use simpler designs for cost-effective generation
- Monitor token usage to stay within budget
- Claude 4 offers premium quality for complex components
How to Generate Code
- Select Your Design: Choose any frame, component, or instance in your Figma file. For best results, select well-structured, modular components.
- Open the Plugin: Launch the Shadcn Studio Figma plugin from the plugins menu.
- Add Variants: Click the "+" button to add desktop and mobile variants of your design.
- Monitor Token Usage: Review the estimated token count displayed in the plugin.
- Verify API Setup: Ensure your AI provider API key is entered and verified in settings.
- Generate Code: Click "Generate Code" button and wait for the AI to process your design.
Accuracy & Quality Expectations for code generation
Basic buttons, simple cards, form inputs, navigation menus, typography components
Multi-section cards, form layouts, dashboard components, product grids, headers and footers
Hero sections, complex data tables, multi-step forms, advanced dashboards, animation-heavy components
Code Output Options
After generating code, the plugin provides three distinct options for using your component:
Copy the generated React component code directly to your clipboard for manual integration.
When to use:
- Custom project structures
- Making modifications before use
- Learning from generated code
Generate a CLI command for automatic component installation using shadcn CLI.
When to use:
- Standard shadcn projects
- Team sharing and collaboration
- Automatic dependency management
Open the generated component directly in v0.dev for further refinement and customization.
When to use:
- Advanced customization
- Adding complex interactions
- Iterative improvements
Blocks CLI Integration
Access pre-built, blocks code that are already available on the shadcnstudio platform directly from Figma.
What are Pro/Free Blocks?
Blocks are pre-built components available on our shadcnstudio platform. Instead of manually copying code from the web platform, the Blocks CLI feature allows direct access to these existing blocks from within Figma.
How to Use Blocks CLI
- Identify Block Components: Look for Figma frames with names containing:
Pro Blocks /- Premium componentsFree Blocks /- Free components
- Select the Frame: Choose any frame with the Block prefix (e.g., "Pro Blocks / Hero Section / 1")
- Open Plugin: Launch the Shadcn Studio Figma plugin with your Block frame selected
- Access Blocks Tab: Navigate to the "Blocks CLI" tab in the plugin
- Install Component: Copy and run the generated CLI command in your project terminal
Advanced Variable Management
Seamlessly sync design variables between Figma and your existing codebase—import your codebase's design tokens into Figma, or export Figma variables for use in your code.
Transform your existing CSS custom properties back into Figma variables.
- Go to "Import" tab in Variables section
- Enter theme collection name
- Paste CSS variables
- Click "Import Theme"
Export your Figma variables as CSS custom properties compatible with Tailwind v4.
- Access "Manage Variables" tab
- Select "Export (v4)" option
- Choose color format (HSL recommended)
- Generate and copy CSS
Want to create professional themes with AI assistance? Use our Theme Generator to build custom themes and import them directly into Figma.
Figma Blocks Drag and Drop Builder
Access our complete library of production-ready components directly from your Figma workspace. Browse 700+ UI blocks, 9 complete dashboards, and 10+ landing pages across multiple categories including marketing, eCommerce, and application designs. Works seamlessly with both existing designs and blank Figma files.
The Figma Blocks feature provides instant access to our entire collection of shadcnstudio blocks directly within your Figma workspace. Simply drag and drop any block onto your canvas - whether you"re working on an existing project or starting from a completely blank file. No setup required.
Browse 700+ production-ready UI blocks and 9 complete dashboards organized into categories:
- Marketing UI: Complete marketing website components including promotional sections, social proof elements, pricing displays, and conversion-focused layouts
- eCommerce: Full-featured online store components covering product displays, shopping experiences, and purchase flows
- Application & Dashboard: Professional interfaces including authentication forms, error pages, data visualization, admin panels, and analytics components
- Dashboards: 9 complete dashboards with navigation, sidebars, data visualization, admin panels, and analytics components
- Datatable & Bento Grid: Advanced data displays and modular layouts
Access 10+ complete, pixel-perfect landing pages ready to customize:
- Bistro: Restaurant landing page with menu showcase and reservations
- Track: Changelog landing page for product updates and releases
- INK: Blog landing page with article grid and featured posts
- Craft: Portfolio landing page for creative professionals
- Flow: SaaS landing page with feature highlights and pricing
- Swipe: Mobile app landing page with app store links
Each landing page is a complete, production-ready page that you can customize to match your brand.
How to Use the Blocks Library
- Open the Plugin: Launch the Shadcn Studio Figma plugin from the plugins menu
- Choose Your Tab: Select "Drag & Drop Blocks" for individual components and dashboards, or "Drag & Drop Landing Pages" for complete landing pages
- Browse or Search: Use categories to browse organized components, or use the search bar to find specific components by name or keyword
- Drag & Drop: Simply drag any component and drop it onto your Figma canvas - works on existing files or completely blank canvases
- Customize: After insertion, customize colors, text, images, and layout to match your design requirements
If you have assembled a landing page using drag-and-drop blocks and wish to generate code for the entire page, you can utilize the/ftc command from our shadcn/studio MCP server.
Design Best Practices
Follow these guidelines to get the best results from the AI code generation:
- Use semantic layer names (Button, Card, Container)
- Apply consistent spacing and typography
- Structure components with clear hierarchies
- Use Auto Layout for responsive behavior
- Follow shadcn design patterns
- Individual components over entire pages
- Generic names like "Rectangle 1", "Group 2"
- Entire pages with multiple sections
- Complex custom graphics requiring SVG precision
- Overlapping or poorly structured layers
- Inconsistent spacing systems
- Components with extensive custom animations
Troubleshooting Guide
Problem: API key verification fails
- Ensure no extra spaces or characters in the key
- Check that the key hasn't expired
- Verify your account has sufficient credits
- Try clearing browser cache and cookies
Problem: "Code generation failed" with valid API key
- Check your AI provider's credit balance
- Verify API rate limits haven't been exceeded
- Try switching to a different AI model
Problem: Plugin generates inaccurate layouts
- Use descriptive layer names (Button, Card, Container)
- Apply Auto Layout to flexible containers
- Remove unnecessary grouping and frames
- Break large components into smaller parts
Problem: Generated code missing shadcn components
- Use standard UI patterns that match shadcn components
- Apply consistent styling that maps to existing components
- Make buttons clearly identifiable with proper styling
- Use card-like containers for card components