One Click Extractor

About this plugin

# One Click Extractor

## 🎨 Transform UI Screens into Organized Design Systems Instantly!

Stop manually documenting design tokens! This powerful plugin automatically extracts and organizes all your colors, fonts, images, and icons from selected frames into beautiful, professional documentation.

## ✨ Key Features

### 🚀 **One-Click Extraction**

- Select UI screens and get organized documentation instantly

- No more manual copying and pasting

### 🎯 **Smart Organization**

- **Colors**: Grouped by usage (Primary → Secondary → Tertiary)

- **Icons**: Organized by frequency (most used first)

- **Fonts**: Categorized by family, size, and weight

- **Images**: Separated by type (assets vs backgrounds)

### 🎨 **Beautiful Output**

- Clean, professional documentation frames

- 7-column grid layouts for easy scanning

- Perfect for design system documentation

### 🌙 **Theme Support**

- Automatic light/dark theme detection

- Toggle between themes with a single click

## 🔧 What It Extracts

### **Smart Color Extraction**

- Fill colors, stroke colors, and text colors

- Usage-based grouping with count display

- Hex codes for easy copying

### **Intelligent Icon Detection**

- Icon components, vector shapes, and named elements

- Prevents duplicate extraction from grouped vectors

- Uniform 32×32px display

### **Comprehensive Font Analysis**

- Font families, sizes, and weights

- Handles mixed fonts within single text elements

- Organized by font family

### **Image Asset Management**

- Actual image assets and background images

- Visual thumbnails for easy identification

## 🎯 Perfect For

- **Design System Creation** - Build comprehensive design tokens

- **Client Deliverables** - Professional documentation for handoffs

- **Team Collaboration** - Share organized design assets

- **Design Audits** - Quickly analyze existing designs

## 🚀 How It Works

1. **Select** your UI screens/frames in Figma

2. **Choose** what to extract (colors, fonts, images, icons)

3. **Click** "Extract Design System"

4. **Get** organized documentation frames below your design

## 🌟 Why Designers Love This Plugin

- **Saves Hours** - No more manual documentation

- **Professional Output** - Ready for client presentations

- **Smart Organization** - Usage-based categorization

- **Easy to Use** - One-click extraction

- **Beautiful UI** - Modern, clean interface

---

**Transform your design workflow today!** Stop spending hours manually documenting design tokens. Let Design System Extractor do the heavy lifting while you focus on creating amazing designs.

*Built for designers, by designers.* 🎨✨