Skip to content
Moco Color - Generate guide and CSS

Moco Color - Generate guide and CSS

by Moco

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

FreeFigma

Installs

2

Likes

3

Users

24

Views

43

Preview

Moco Color - Generate guide and CSS preview

About this plugin

**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!

More accessibility tools plugins

View all