Essential Tokens

About this plugin

Bring your tweakcn CSS variables straight into Figma—no hassle, no manual work. Scan, search, and print your color and typography variables instantly.

Essential Tokens makes it easy to import your TweakCN theming CSS variables into your Figma project. No need to worry about mapping primitives or semantics. The plugin uses a smart, ShadCN-Tailwind-friendly logic to create variables that fit right into your workflow.

Features:

✅ Parse tweakcn CSS

Turn your TweakCN code into Figma variables automatically. Works seamlessly with the ShadCN UI Figma kit, matching your variable setup and creating custom modes for light and dark themes.

✅ Color Palette Generator

Scan your Figma variables and generate a clean, organized color guide in seconds. Works for whole collections, specific groups, or single modes. Perfect for documenting your system or sharing with clients.

✅ Typography Guide

Scan your text styles and variables to create a clear, visual typography guide. Everything is organized with proper hierarchy and styling—ready to use or share.

Great for working n design & dev with:

• shadcn UI components

• tweakcn theming

• Design system docs

No more manual workarounds. Get your design tokens sorted—fast and simple.

Plugin is made with ❤️ and it's free, forever.

Instructions:

Just Run it and then choose your fate!