Moco Color - Generate guide and CSS

Print Styles & Variables to canvas, and export CSS in one click.

Plugin Preview

**Organize your Design System instantly.**

moco color helps you generate beautiful, professional color documentation directly in Figma. It bridges the gap between Design and Code.

**✨ Key Features:**

* **Visualize Everything**: Automatically scans and displays all Local Paint Styles and Color Variables.

* **Smart Grouping**: Automatically groups colors by folder name (e.g., "Brand/Primary" → "Brand").

* **Pro Documentation**: Generates a clean, grid-based layout with card-style swatches on your canvas.

* **Export to CSS**: Download all your tokens as a standard `.css` file (RGBA format) with one click.

* **Modern Support**: Handles transparency perfectly and supports Dark Mode UI.

**🚀 How to use:**

1. Run **moco color**.

2. Click **Generate Style Guide** to create the documentation frame.

3. Click **Copy CSS Variables** to download the CSS file.

Simple, fast, and beautiful. Perfect for design system handoffs!