From Figma to code: Shipping faster with shadcn MCP, Figma MCP and Pro Blocks

Recently, shadcn introduced CLI 3.0 with namespaced registries and new MCP. In response, we’ve updated the shadcndesign registry to take full advantage of the new CLI, making it simpler than ever to install our resources.

In this article, you’ll learn how to use the newest shadcn MCP and Figma MCP together with our products to build websites faster than ever. Start with the overview video below, which walks through creating a simple site using our Figma kit and Pro Blocks in Cursor with the new MCPs.

What you’ll need

• Our Figma kit, Figma plugin & Pro Blocks access (all available in our Premium Package)
• Cursor

Figma

1. Open our Figma kit (shadcn/ui kit for Figma + Pro Blocks)
2. Build your website with Pro Blocks and style it (you can learn how to do it in Academy)

Cursor Setup

1. Open Cursor
2. Install shadcn/ui (view instructions)
3. Install shadcn MCP (view instructions)
4. Install Figma MCP (view instructions)
5. Install our Pro Blocks registry (view instructions)
6. Install the styles from your Figma design with our Figma to shadcn/ui plugin (view instructions)
7. Edit the layout.tsx file to import the font family you used in Figma.
8. Edit your next.config.ts file to accept the images from Figma.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "http",
        hostname: "localhost",
        port: "3845",
        pathname: "/assets/**",
      },
    ],
  },
};

export default nextConfig;

You are good to go! Now, we can convert our Figma design to code.

Prompting

1. Select the frame in Figma with your landing page design and keep it selected. Cursor will be able to read its content.
2. In Cursor, in the AI Pane, enter the follwing prompt.

1. Use Figma MCP. List Pro Blocks component instance names used to build the selected page.
2. Use shadcn MCP. Install proper pro blocks matching the names of the items from figma, for example "Pro Blocks / LP Navbar / 1." translates to "@shadcndesign/lp-navbar-1"
3. In app/page.tsx, build a page using these components in the order we have in Figma.
4. Call figma MCP and replace the content in the installed pro blocks. Don’t change styling yet. Replace texts, and use images from Figma.
5. Replace logo in navbar and footer with the logo from Figma.

3. Send the prompt and wait until AI finishes making changes. If there are some linting problems after, ask AI to fix them.
4. Run your project to see the result.
5. If you made style changes to your Pro Blocks in Figma (for example, changed the background color or removed padding) you can prompt the AI to apply these changes:

I changed the styling in the hero section. Call Figma MCP and apply the proper colors and spacing.

Summary

That’s it! You’ve translated your design from Figma to production‑ready code using shadcn CLI 3.0, the updated shadcndesign registry, and shadcn and Figma MCP. From here, you can:

• Expand your layout with additional Pro Blocks and components from the registry
• Hook up real data and authentication, then deploy to your platform of choice
• Refine styles in Figma and sync updates back into your code workflow
• Refine styles in Figma and sync updates back into your code workflow
• Add accessibility, localization, and performance optimizations

Keep iterating. Your Figma-to-code pipeline is now set up for rapid, maintainable shipping.

Troubleshooting Common Issues

Sometimes things don't go perfectly. Here are a few common issues and how to solve them.

• AI can't find components: Make sure you've selected the main frame in Figma, not an individual element. The AI needs the top-level view to see all the components.
• Images are not showing up: Double-check your next.config.ts file. A small typo can prevent images from loading correctly. Also, ensure the Figma plugin is running.
• Styling looks off: This can happen if your local styles conflict with the ones from Figma. Try clearing any custom CSS you may have added and run the style sync prompt again.
• The entire content is not passed to the code: Make sure to select a smaller amount of frames in your landing page - it's possible that design is too complex.