The Ultimate Guide to Shadcn UI: How to Design Shadcn Components Before You Code

I have a confession to make. For a long time, I treated Figma like a sketchbook. I’d drag in rectangles, slap on some hex codes, and tell myself "I'll fix the spacing in code."

Then I’d open VS Code, run npx shadcn@latest init, and immediately hit a wall.

The spacing in my design didn't match the Tailwind classes. The colors were slightly off. And don't get me started on the inputs. This disconnect is exactly why so many teams struggle with the figma shadcn workflow. We treat design and code as two different worlds, when in reality, they need to be mirrors of each other.

---

Why the "Default" Figma Workflow Breaks

Here’s the thing about shadcn components: they aren't just UI elements. They are architectural decisions.

When you use a standard Figma kit (or worse, start from scratch), you usually design visually. You pick a nice border radius. You choose a cool shadow. But Shadcn/ui is built on top of Radix primitives and Tailwind variables.

If your Figma file doesn't respect `radius`, `muted-foreground`, or `destructive`, you aren't designing a product. You're drawing a picture of a product. And the developer (which might be you) is going to hate you for it later.

Setting up a True Shadcn UI System

After shipping about five different dashboards this year, I realized there's a specific way to set this up so you don't lose your mind. It basically comes down to mapping.

1. Map Variables, Not Styles

Don't hardcode `#0f172a` into your button background. In your Figma shadcn setup, you need to actually create a variable called `primary` and another called `primary-foreground`.

Pro tip: If you use the native Figma variables feature, you can actually switch between "Light" and "Dark" modes instantly, just like the `next-themes` provider in your React app. It’s honestly magic to watch.

2. Component Props must match Props

This is where most people get lazy. In your Figma component, don't name the property "Type" if the React code calls it "variant".

If the code says:

<Button variant="ghost" size="sm" />

Then your Figma component set needs a property called `variant` with an option `ghost`, and a property called `size` with an option `sm`. It sounds obvious, but you'd be shocked how many "premium" kits get this wrong.

The "Dev Mode" Secret

Figma recently launched something called Code Connect. It allows you to link your component in Figma to the actual code in your repo.

If you set this up right, when you click a button in Figma Dev Mode, it doesn't show you CSS. It shows you the actual React component code. It's a total game changer for handoffs. I honestly can't go back to the old way.

---

Final Thoughts

Using shadcn components in Figma shouldn't feel like a chore. It should feel like you're programming visually. Once you align your design tokens with your CSS variables, the friction just disappears.

Give it a try on your next side project. Even if it takes a few hours to set up initially, you'll save days during the build.