Mastering Shadcn Components in Figma: Tokens & Variables

Most people use Figma like a drawing tool. They treat shadcn components like static images. But if you want to build a system that scales to 100+ screens, you need to use Figma like a developer uses an IDE.

This guide covers the "Internal API" of a perfect Figma component.

1. The Token Hierarchy

Tailwind v4 introduced a flatter structure, but we still need semantic meaning. In our library, we structure variables in three layers:

• Primitive: `Blue/500` (The raw value)
• Semantic: `Primary/Default` (Points to `Blue/900` in light mode, `Blue/100` in dark mode)
• Component: `Button/Bg` (Points to `Primary/Default`)

This indirection allows us to re-theme the entire brand by changing just the semantic layer, without breaking individual shadcn components.

2. Boolean Properties vs. Variants

A common mistake I see in junior portfolios: creating a separate variant for "Button with Icon".

Don't do this. Use a boolean property called `showIcon`.

Why? Because it reduces the memory footprint of your Figma file by 50%. A scalable library is a lightweight library.

3. Slot Components

How do you handle complex content like a Modal body? We use "Instance Swaps" or "Slot" components. This mimics the `{children}` prop in React.

Pro-Tip: Create a default "Placeholder" component that warns the designer to swap it out. It prevents empty states from shipping to prod.

If you want to see these techniques in action (and steal them for your own work), download our kit. It's the gold standard for a reason.

Get the Architect Kit and master your workflow.