Back to Plugins
Moco Color - Generate guide and CSS

Moco Color - Generate guide and CSS

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

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

Plugin Details

Version3
CreatedFebruary 24, 2026
Last UpdatedFebruary 28, 2026
CategoryAccessibility tools
CreatorMoco
Stats1 installs, 2 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none