KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #ai-agents #dsh-plugin #codex #developer-tools #claude-code #windows #desktop-app #typescript #rust #ai-agent #cli

alpha-shadcn

★ 7 Open GitHub ↗

A Figma plugin that brings the full shadcn/ui design system into Figma in one click, boosting your workflow and cutting hours of setup.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Shadcn → Figma (One-Click Design System Import)

Bring the full **shadcn/ui design system** into Figma in a single click.  
This plugin instantly generates variables, colors, typography, radii, spacing, and all core tokens—plus fully structured component sets—directly inside your Figma file.

Designers get the entire system *ready in seconds*, no setup, no manual rebuilding, no hunting through docs.

---

## ✨ What This Plugin Does

- Imports the **full shadcn/ui design system** into Figma automatically  
- Generates **Variables** (colors, typography, spacing, radii, shadows)
- Creates **Component Sets** structured exactly like shadcn/ui
- Sets up **separate Figma pages** for:
  - Tokens & Variables  
  - Base Components  
  - Component Variants  
  - Patterns & Layouts
- Ensures pixel-perfect mapping between shadcn/ui and Figma
- Designed for both designers and frontend teams using shadcn/ui

---

## 🚀 Why This Exists

Setting up a design system manually takes hours.  
Importing shadcn/ui into Figma used to require:
- Rebuilding tokens by hand  
- Manually converting Tailwind values  
- Creating variants one by one  
- Keeping everything synced with code

This plugin removes all of that friction.  
Click once → the entire system appears ready to design with.

---

## 🧩 How It Works

1. Run the plugin in any Figma file  
2. Choose the shadcn/ui preset (default)  
3. The plugin generates:
   - Figma Variables
   - Component sets
   - Auto-organized pages
4. Start designing immediately with consistent system components

---

## 📁 Generated File Structure

📂 Your Figma File
├─ 🎨 Tokens & Variables
│ ├─ Colors
│ ├─ Typography
│ ├─ Spacing
│ ├─ Radii
│ └─ Shadows
├─ 🧱 Base Components
├─ 🧩 Component Variants
└─ 📐 Patterns / Layouts

Everything is clean, editable, and aligns with production shadcn/ui code.

---

## 🔧 Features on the Roadmap

- Sync updates from shadcn/ui directly into Figma  
- Support for custom themes & palettes  
- One-click Tailwind → Figma variable generation  
- Import user-defined component extensions

---

## 📦 Installation

Search **“Shadcn → Figma”** in the Figma Community  
or open the plugin URL directly.

---

## 🤝 Contributing

PRs are welcome!  
If you want to add integrations, presets, or improvements, feel free to open an issue or submit a pull request.

---

## 📝 License

MIT License – free to use and modify.

---

## 💬 Feedback

Have ideas? Found a bug?  
Open an issue and help make this plugin even better for the community.

alpha-shadcn

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README