Essential Tokens

About this plugin

It’s easy to get lost creating endless layers of variables, when most developers just need a handful to define their project’s theme. Using CSS variable logic and bringing it directly into Figma—especially for teams working with shadcn ui components and tweakcn theming—is the next logical step for a smoother design-dev workflow for a few teams out there.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 CSSTurn 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 GeneratorScan 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 GuideScan 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 docsNo 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!