Blog

The shadcn/create in Figma

We’ve brought shadcn/create into our Figma toolkit! Now with five icon libraries in a single kit and new shadcn/ui style. Spin up new projects in seconds using the Create feature.

update··3 min read
The shadcn/create in Figma

Recently, shadcn introduced a new project starter called shadcn/create. As he puts it: “The idea is to give you solid defaults—spacing, color tokens, animations, accessibility—and then let you take it from there. Tweak the code. Add new components. Change the colors. Build your own version.”

At shadcndesign, our goal is to bring the shadcn/ui experience into Figma. We’re excited to share that shadcn/create is now available in our Figma kit and Figma plugin.

Now, you can set up your project in seconds with the prebuilt color, icon and radius options.

What’s new

Figma kit

  • Updated all components in our Figma kit to use the new default shadcn/ui style "Nova". It's the style you can see in shadcn/ui component docs.
  • Added new component variants to match the official shadcn/ui documentation:
    • Accordion (Border variant)
    • Button (Extra small variant)
    • Tabs (Line variant)
    • Card (Small variant)
  • Added 5 icon libraries available in shadcn/create:
    • Lucide Icons
    • Tabler Icons
    • Phosphor Icons
    • HugeIcons
    • Remix Icon
  • Introduced a new IconPlaceholder component for handling icons
  • Added the IconPlaceholder components to all our components and blocks
  • Updated documentation to cover the new icon workflow
  • Added the Academy page to Figma kit

Plugin

  • New Create feature in the Manage Variables tab
  • Code generation now supports icons from the new libraries
  • Updated documentation to cover the Create workflow

Disclaimer

The plugin currently supports these shadcn/create features:

  • Base color
  • Theme
  • Icon library
  • Font
  • Radius

The plugin does not include an option to switch Menu Color to inverted. You can do this manually by following this guide.

The Style option is not yet supported. Figma is missing key capabilities required to fully align with shadcn/ui styles. For now, changing a component’s style (e.g., from Nova to Mira) requires manually updating applied variables. We’re actively working on bringing style switching to the plugin—more details soon.

Frequently asked questions

Does the Figma kit support Base UI?: Yes, our Figma kit is optimized to support both Radix UI and Base UI versions of shadcn/ui.

Can I update my older version of the Figma kit to use the new version?: Unfortunately, there is no easy way to do it. Keep in mind that Figma is file‑based, not a code repository, so updates can’t be installed automatically like software packages. This is a significant update with a lot of changes including replacement of the icons and style refactoring.

Can I install Pro Blocks (React) in my Base UI project?: Yes. Pro Blocks will work in the Base UI version of shadcn/ui. Please follow our documentation.

MW
Matt Wierzbicki

Founder @ shadcndesign.com

Level-up your workflow today

One-time payment
14 days refund policy