Skillget

alpha-shadcn

skill
Security Audit
Fail
Health Warn
  • License — License: GPL-3.0
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Low visibility — Only 7 GitHub stars
Code Fail
  • rimraf — Recursive directory removal in node_modules/.package-lock.json
  • exec() — Shell command execution in node_modules/@eslint-community/eslint-utils/index.js
  • exec() — Shell command execution in node_modules/@eslint-community/eslint-utils/index.mjs
  • rimraf — Recursive directory removal in node_modules/@eslint-community/eslint-utils/package.json
  • rimraf — Recursive directory removal in node_modules/@eslint-community/regexpp/package.json
Permissions Pass
  • Permissions — No dangerous permissions requested

No AI report is available for this listing yet.

SUMMARY

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

README.md

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.

Reviews (0)

No results found