Figma Plugin
ColorFlow Integratie voor Figma
Professional color gradients for modern developers. Generate, customize, and export production-ready gradients directly inside Figma.
Live Preview
See ColorFlow in Action
The ColorFlow plugin appears as a floating panel inside your Figma workspace. Select any frame, rectangle, or text layer and generate matching gradients in under three seconds.
The plugin reads your selection's dimensions, aspect ratio, and existing fills to suggest complementary gradient directions. In the screenshot above, a 1440×900 hero frame is being populated with a teal-to-violet linear gradient (270° angle, 3 color stops) generated from ColorFlow's algorithm.
Get Started
Installation & Setup
Add ColorFlow to your Figma toolkit in two steps. No account required for basic gradient generation.
1. Search & Install
Open Figma, click the Resources icon in the top toolbar, select the Plugins tab, and search for "ColorFlow". Click Install to add it to your personal plugin list. The plugin ID is 12847563 for direct access.
2. Open & Run
Right-click any layer or frame in your canvas, navigate to Plugins → ColorFlow, or use the keyboard shortcut Ctrl+Shift+C (Windows) / Cmd+Shift+C (macOS). The panel opens on the right side of your workspace.
3. Link Your Account (Optional)
Sign in with your ColorFlow account to sync saved palettes, unlock 150+ premium gradient presets from the Aurora, Nebula, and Sundown collections, and enable team-wide palette sharing across your organization.
Capabilities
Plugin Features
Everything you need to design with gradients — without leaving Figma.
Context-Aware Suggestions
ColorFlow analyzes the dominant colors in your selected frame and proposes gradients that harmonize with your existing palette. Works with solid fills, images, and mixed content.
Multi-Stop Gradient Editor
Add up to 8 color stops with precise opacity and position controls. Drag stops along a visual timeline, adjust blend modes (Normal, Multiply, Screen, Overlay), and preview changes in real time.
One-Click Export
Export gradients as CSS (linear-gradient, radial-gradient), SVG, or Android XML directly to your clipboard. Copy Tailwind-compatible utility classes or SCSS variables with a single click.
Batch Apply to Layers
Select multiple layers or an entire component set and apply the same gradient configuration across all of them. Supports nested groups, variants, and component instances.
Accessibility Contrast Check
View WCAG 2.1 AA and AAA contrast ratios for text placed over your gradient. The plugin calculates the average luminance and warns if contrast falls below 4.5:1 for normal text or 3:1 for large text.
Team Palette Sync
Share custom gradient presets with your design team. Changes propagate to all team members' plugin instances within 30 seconds. Requires a ColorFlow Pro or Team subscription.