DEV Community

Cover image for New way to bring your tweakcn themes into Figma (works with shadcn/ui)
Shadcraft
Shadcraft

Posted on

New way to bring your tweakcn themes into Figma (works with shadcn/ui)

Hey folks 👋🏻

If you’ve been using tweakcn to customise your shadcn/ui theme in the browser, you can now bring those themes straight into Figma via a new integration with Shadcraft and the tweakcn plugin.

Here’s how it works:

  • 🎨 tweakcn is a super handy in-browser theming tool for shadcn/ui (great for quickly testing out colour, radius, shadow, etc.)

  • 🔌 With the plugin, you can now apply your custom theme to a Figma UI kit built specifically for Tailwind and shadcn-based projects

  • ⚡ It’s all powered by Figma variables, so you can instantly switch between themes or update styles without tedious overrides

It’s been a smoother handoff experience for us working across dev/design — especially when devs pick the theme in tweakcn and designers apply it in Figma.

You can try it out at tweakcn.com — happy to answer questions or share how we’ve been using it in side projects too.

Top comments (0)