🎨 Color Palette Extractor

A Figma plugin that extracts all colors from your designs, making it easy to audit colors and create style guides.

Features

• Extract all unique colors from selected frames
• Support for both fills and strokes
• Includes opacity information (8-digit HEXA format)
• One-click copy colors to clipboard
• Generate visual color palette in Figma
• Clean, modern interface

Installation

1. Clone this repository

git clone https://github.com/themeselection/figma-plugin-color-palete-extractor
cd figma-plugin-color-palete-extractor
├── manifest.json        # Plugin configuration
├── code.ts             # Main plugin logic (TypeScript)
├── code.js             # Compiled plugin code
├── ui.html             # Plugin user interface
├── package.json        # Dependencies and scripts
└── tsconfig.json       # TypeScript configuration

🎨 UI Features

• Color Grid: Responsive grid layout showing all extracted colors
• Color Swatches: 80x80px rounded squares with shadow effects
• HEX Labels: Monospace font displaying color codes
• Copy on Click: Click any color to copy its HEX value
• Batch Copy: Copy all colors at once (newline separated)
• Status Messages: Real-time feedback for actions
• Empty State: Friendly guidance when no colors are found

📦 Installation & Development

Prerequisites

node >= 14
npm or pnpm

2. Install dependencies

npm install

3. Build the plugin

npm run build

4. Load in Figma Desktop:
   • Go to Plugins → Development → Import plugin from manifest
   • Select the manifest.json file from this project
   • The plugin is now available in your Plugins menu

Usage

1. Select any frame or element in Figma
2. Run Color Palette Extractor from the Plugins menu
3. View all extracted colors with their HEX codes
4. Click any color to copy it to clipboard
5. Click "Copy All" to copy all colors at once
6. Click "Create Palette" to generate a visual palette in your canvas

Development

# Watch mode for development
npm run watch

Tech Stack

• TypeScript
• Figma Plugin API
• HTML/CSS and Tailwind for UI