Moco Color - Generate guide and CSS
by Moco
Print Styles & Variables to canvas, and export CSS in one click.
Installs
2
Likes
3
Users
24
Views
43
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 allStark - Contrast & Accessibility AI Checker
by Stark
Fix Color Contrast and Typography issues and add WCAG annotations for a smooth design to dev handoff
Contrast
by Alex Carr
Quickly check and scan for contrast issues on gradients, images, blends, and fills.
Color Palettes ( Colorsinspo ) : Color & Accessibility Tools
by Manthankumar Satani
A free suite of integrated Color & Accessibility tools - 10+ tools free access 🔥
A11y - Color Contrast Checker
by Kelly Gorr
Text color accessibility