Auto-Generate Your Entire Shadcn Design System in Figma with just one click. This plugin allows you to create complete design tokens including colors, typography, spacing, and effect styles instantly. Download the plugin for free and enjoy its open-source nature. It works seamlessly with Figma's dynamic-page mode, offering a streamlined design workflow.

How It Works

1. Install: Download the .figplug file and double-click to install in Figma.

2. Run in Figma: Open the plugin from Figma's plugin menu.

3. Generate: Click "Generate Variables" and watch your design system appear.

What It Generates

• Color variables with Light & Dark modes.

• Number & spacing tokens for consistent layouts.

• Typography system from Shadcn with 11 text styles.

• Effect styles for shadows and elevation.

• Layout spacing system for grids and margins.

• Organized variable collections for colors and numbers.

Built by @rakibulism, a Lead Product Designer & UX Psychologist, this plugin is designed to streamline your design workflow by offering future-forward digital experiences shaped by human behavior and clarity.