Use shadcn/ui kit for Figma with Figma Code Connect

If you've ever watched a developer squint at a Figma design, trying to translate your carefully crafted components into code, you know the handoff gap is real. Even with the best design systems, something always gets lost in translation. Spacing feels off. Variants don't match. The code doesn't reflect the design's structure.

Figma Code Connect changes that. It's a bridge between your Figma design files and your actual codebase, connecting design components directly to their code implementations. When AI tools like Cursor or Claude read your Figma designs, they get precise references to your real code—not generic examples, but your actual components, props, and patterns.

The shadcn/ui kit for Figma is built for this. With 2000+ components that mirror the shadcn/ui codebase, proper variants, Figma Variables, and a structure that matches production code, it's the ideal foundation for Code Connect. In this guide, you'll learn how to set up Figma Code Connect with our Figma kit using the visual Code Connect UI approach. If your team needs the CLI workflow, check the official Code Connect docs.

Is it possible to use Figma Code Connect with the shadcn/ui kit?

Yes, absolutely! The shadcn/ui kit for Figma is specifically designed to work with Figma Code Connect. In fact, it's one of the best Figma kits for Code Connect because:

• Perfect component alignment: All 2000+ components in the kit mirror the actual shadcn/ui codebase structure, making connections straightforward
• Proper variant structure: Components use Figma Variants and Component Properties that map directly to React props
• Figma Variables support: The kit uses Figma Variables for design tokens that correspond to your Tailwind CSS and CSS custom properties
• Production-ready mapping: Component names, file paths, and prop structures match what developers use in code

Whether you're using Code Connect UI (the visual approach in Figma) or Code Connect CLI (for developers), the shadcn/ui kit provides the foundation you need. The rest of this guide walks you through setting it up step by step.

What is Figma Code Connect?

Code Connect is Figma's solution for linking design components to their code implementations. It creates a two-way connection: your Figma components know where they live in your codebase, and AI tools can reference that code when generating implementations.

How Code Connect enhances the Figma MCP server

The Figma MCP (Model Context Protocol) server is what allows AI tools to read and understand your Figma designs. Code Connect supercharges this by adding direct code references. Instead of AI generating generic code examples, it can:

• Reference your actual component files and paths
• Use your real prop names and types
• Generate code that matches your codebase structure
• Provide accurate implementation details in Dev Mode

This means when a developer opens Dev Mode in Figma, they see code snippets from your actual repository, not placeholder examples. When AI tools analyze your designs, they understand the component architecture because they can see the real code.

Why this matters for shadcn/ui teams

shadcn/ui follows an ownership model—you copy components into your repo and maintain them yourself. This gives you control, but it also means your Figma designs need to map accurately to your codebase. Code Connect ensures that mapping is explicit and accurate.

With Code Connect, your design system becomes a single source of truth that both designers and developers can trust. Designers work in Figma with components that match the code. Developers get precise references when implementing. AI tools understand the full context.

Why the shadcn/ui Figma Kit works perfectly with Code Connect

The shadcn/ui kit for Figma isn't just a collection of components—it's built to mirror the actual shadcn/ui codebase structure. This makes it ideal for Code Connect in several ways:

2000+ components with proper variants and properties

Every component in the kit uses Figma's Variants and Component Properties correctly. A Button component has variants for size, variant style, and state. An Input has variants for error states, disabled states, and sizes. This structure maps directly to how shadcn/ui components work in code, making the connection straightforward.

Built with Figma Variables that map to code

The kit uses Figma Variables for colors, spacing, typography, and radii. These variables correspond to Tailwind CSS tokens and CSS custom properties in your codebase. When Code Connect references a component, it can see which variables are used and map them to your actual design tokens.

Component structure matches the codebase

Components are organized the same way as in the shadcn/ui registry. A Button component in Figma corresponds to components/ui/button.tsx in code. This predictable structure makes automatic mapping reliable and maintainable.

Auto Layout and Component Properties support

Components use Auto Layout for responsive behavior and Component Properties for interactive states. This means Code Connect can understand not just what a component looks like, but how it behaves and adapts—information that's crucial for accurate code generation.

Multi-brand support through variables

The kit supports multiple brands through Figma Variables, allowing you to switch entire color palettes, typography scales, and spacing systems. Code Connect can reference the active variable set, ensuring generated code uses the correct tokens for your brand.

Code Connect UI: Quick setup for designers

Code Connect UI runs entirely inside Figma. It's visual, language-agnostic, and perfect for teams who want a simple way to link design components to code without touching the command line.

Overview

Code Connect UI lets you map components directly in Figma's interface. You can connect to a GitHub repository for automatic component discovery, or manually link components by providing file paths and component names. Once mapped, this information feeds into the Figma MCP server, making it available to AI tools.

Step-by-step setup

Before you start make sure you have a proper Figma workspace plan. Code Connect requires an Organization or Enterprise Figma plan.

1. Open your Figma kit library

First, ensure you have the shadcn/ui kit for Figma open. If you're using it as a library, make sure it's published and available in your workspace. You'll be mapping components from this library to your codebase.

2. Access Code Connect UI

Code Connect UI is available in Dev Mode. To access it:

1. Open your design file that uses components from the shadcn/ui kit library
2. Switch to Dev Mode (top-right toggle or Shift + D)
3. Select a component instance from the shadcn/ui kit
4. In the right panel, look for the Code Connect section

If you don't see Code Connect options, you may need to enable it in your Figma organization settings (Code Connect requires an Organization or Enterprise Figma plan).

3. Connect to GitHub (optional)

For automatic component discovery, you can connect Figma to your GitHub repository:

1. In Code Connect UI, click "Connect to GitHub"
2. Authorize Figma to access your repository
3. Select the repository containing your shadcn/ui components
4. Figma will attempt to automatically match components

This is optional—you can map components manually without a GitHub connection.

4. Manual component mapping

If you're not using GitHub or prefer manual control, you can map components directly:

1. Select a component instance in your design (e.g., a Button component)
2. In the Code Connect panel, click "Add connection"
3. Provide the component path relative to your repository root:
   • For shadcn/ui components: components/ui/button.tsx
   • For custom components: components/custom/my-component.tsx
4. Specify the component name (e.g., Button)
5. Optionally add the repository URL

For shadcn/ui components, the mapping is straightforward:

• Button: components/ui/button.tsx → Button
• Input: components/ui/input.tsx → Input
• Card: components/ui/card.tsx → Card
• Dialog: components/ui/dialog.tsx → Dialog

5. Mapping shadcn/ui components

The shadcn/ui kit components map directly to the shadcn/ui codebase structure. Here's a quick reference for common components:

If you've customized components or added new ones, map them to their actual file paths in your repository.

6. Adding custom MCP instructions

You can enhance Code Connect mappings with custom notes and usage instructions:

1. After creating a connection, click "Add notes"
2. Add usage guidelines, prop descriptions, or implementation notes
3. These notes are included in the MCP server output, helping AI tools understand context

For example, for a Button component, you might add:

Use the variant prop to control style: "default", "destructive", "outline", "secondary", "ghost", or "link".
Use the size prop for sizing: "default", "sm", "lg", "icon", "icon-lg", and "icon-sm".

7. Previewing AI-generated code snippets

Once components are mapped, you can preview how they'll appear in AI-generated code:

1. Select a component instance in your design
2. In Dev Mode, view the Code Connect panel
3. You'll see example code snippets based on your connected source files
4. These previews show how the component might appear in your codebase

This helps you verify that mappings are correct before developers start using them.

Best practices for component naming

Consistent naming makes Code Connect more reliable:

• Match code exactly: Component names in Figma should match the exported component name in code
• Use clear hierarchy: Organize components in Figma the same way they're organized in code
• Document variants: Use descriptive variant names that map to prop values (e.g., "Size: Small" → size="sm")
• Keep mappings updated: When you refactor code, update Code Connect mappings

Real-world example: Connecting a Button component in Code Connect UI

Let's walk through connecting a Button component from the shadcn/ui Figma kit to your codebase using Code Connect UI.

Step 1: Identify the Figma component

In your Figma file, locate the Button component from the shadcn/ui kit. Note its properties:

• Variant: Default, Destructive, Outline, Secondary, Ghost, Link
• Size: default, sm, lg, icon, icon-sm, icon-lg
• State: Default, Hover, Active, Disabled

Step 2: Open Dev Mode

1. Select the Button instance in your layout
2. Switch to Dev Mode (Shift + D)
3. In the right sidebar, open the Code Connect section

Step 3: Add a connection

1. Click "Add connection"
2. Set the component path to components/ui/button.tsx
3. Set the component name to Button
4. Optional: paste the repository URL

Step 4: Map variants to props

Include a note that maps Figma variants to React props. Example note:

Variants map to props:
- Variant → variant prop (default, destructive, outline, secondary, ghost, link)
- Size → size prop (default, sm, lg, icon, icon-sm, icon-lg)

Step 5: Verify Dev Mode output

1. Keep the Button instance selected
2. In Dev Mode, confirm that the Code Connect section now shows your component path and notes
3. Check that the generated code snippet uses the correct variant/size values

Step 6: Test with AI tools

When using AI tools like Cursor with Figma MCP:

1. Select a frame containing Button components
2. Ask the AI to implement the design
3. The AI will reference your actual Button component path and notes
4. Generated code will use correct prop names and values

Best practices

Component naming conventions

• Match exports: Figma component names should match exported component names in code
• Consistent casing: Use the same casing convention (PascalCase for components)
• Clear hierarchy: Organize components in Figma to match your code structure
• Group by feature: Organize connections by feature or page
• Document custom components: Add notes for components with non-standard patterns

Maintaining connections over time

• Update on refactors: When you refactor component props, update Code Connect mappings
• Sync with design updates: When designers update Figma components, verify connections still work
• Regular audits: Periodically review connections to ensure they're still accurate

Team collaboration tips

• Shared ownership: Both designers and developers should understand Code Connect
• Documentation: Document any custom mappings or patterns
• Onboarding: Include Code Connect setup in team onboarding

Version control considerations

• Review changes: Treat connection changes like code changes—review them
• CI validation: Consider validating connections in CI to catch issues early

Troubleshooting

Common issues and solutions

GitHub connection problems

Issue: Figma can't connect to your GitHub repository.

Solutions:

• Verify your GitHub token has the correct permissions
• Check that the repository is accessible to your Figma organization
• Ensure you're using the correct repository URL format

Component not found errors

Issue: Code Connect can't find a component in your codebase.

Solutions:

• Verify the file path is correct relative to your repository root
• Check that the component is exported correctly
• Ensure the component name matches exactly (case-sensitive)

Property mapping issues

Issue: Figma variants don't map correctly to React props.

Solutions:

• Verify variant property names match exactly (including casing)
• Check that enum values map correctly
• Use figma.enum() for variant mappings
• Test with different variant combinations

MCP server not showing connections

Issue: Connections don't appear in Dev Mode or MCP responses.

Solutions:

• Ensure you've published connections (figma connect publish)
• Verify your Figma organization has Code Connect enabled
• Check that you're viewing the correct file
• Try refreshing Dev Mode

Code examples not generating correctly

Issue: Generated code examples don't match your component structure.

Solutions:

• Review your example function in the connection file
• Ensure props are mapped correctly
• Test with different component instances
• Check for TypeScript errors in connection files

Conclusion

Figma Code Connect transforms how design and development teams collaborate. By connecting your shadcn/ui Figma kit directly to your codebase, you create a seamless bridge that AI tools can use to generate accurate, production-ready code.

The shadcn/ui kit for Figma is built for this workflow. With 2000+ components that mirror the codebase structure, proper variants, and Figma Variables, it provides the foundation Code Connect needs to work effectively.

When you lean on the Code Connect UI workflow, designers and developers stay aligned. Developers get accurate code references. AI tools understand your component architecture. Your design system becomes a true single source of truth. Need the CLI instead? Follow the official Code Connect documentation.

Ready to get started? Get the shadcn/ui kit for Figma and begin connecting your components today. For more advanced workflows, check out our Figma to shadcn/ui plugin and explore Pro Blocks for production-ready patterns. Learn more about shadcn/ui components and how they work with Code Connect.

Want to learn more about using Figma with shadcn/ui? Visit our Academy for comprehensive courses on design systems, component architecture, and design-to-code workflows.