Figma Plugin — KleurFlow
Sync your KleurFlow gradients directly into Figma styles, edit color stops inside the plugin, and export to your design system in one click.
Getting Started
Installation
The KleurFlow plugin is available in the Figma Community. Install it in under 30 seconds — no account required, though signing in unlocks sync with your KleurFlow library.
1. Open Figma Community
Go to figma.com/community and search for "KleurFlow". Click Open in Figma to add the plugin to your workspace. It works with both Figma desktop and the web app.
2. Authenticate (Optional)
Sign in with your KleurFlow account to sync your saved gradient collections. Without authentication, you can still create and export gradients — they just won't persist across sessions.
3. Run the Plugin
Navigate to Plugins → KleurFlow in your Figma menu. The panel opens docked on the right side, ready to generate, edit, and apply gradients to any layer.
Workflow
How to Use
KleurFlow's Figma plugin works like a native gradient editor — but with more control over stops, angles, and distribution. Every change updates your selected layer in real time.
Apply to Layers
Select any frame, rectangle, or text layer, then pick a gradient from the plugin panel. KleurFlow writes the gradient directly into Figma's fill properties, so it stays editable and non-destructive.
Edit Stops & Angles
Add up to 8 color stops per gradient. Drag to reposition, click to change the hex or HSL value, and adjust the angle from 0° to 360° with 1° precision. Preview updates live on your canvas.
Save as Figma Style
Click Save as Style to push the gradient into your Figma local styles under a "KleurFlow" collection. Styles sync automatically if you're on a Figma Team plan with style libraries.
Export to Design Systems
Export gradients as CSS custom properties, Tailwind config entries, or a JSON token file. The export includes the angle, stop positions, and color values — ready to drop into your design token pipeline.
Capabilities
Plugin Features
Built for designers who need gradients that look good in Figma and translate cleanly to production code.
Real-Time Canvas Preview
Every adjustment to a stop, angle, or distribution curve reflects instantly on your selected layer. No apply-and-refresh cycle — just drag and see.
Multi-Layer Application
Select multiple layers at once and apply the same gradient to all of them. Supports mixed selection types: frames, vectors, text, and component instances.
Gradient Collections
Browse and apply from shared collections like "Aurora," "Midnight Run," and "Solar Flare" — each curated by the KleurFlow team and updated monthly with new sets.
Accessibility Contrast Check
When applying a gradient to a background, the plugin calculates the average luminance and warns if overlaid text falls below WCAG AA contrast (4.5:1 for normal text).
Version History
Each gradient you save keeps a 10-step undo history inside the plugin. Revert to a previous stop configuration without touching Figma's global undo stack.
Keyboard Shortcuts
Press ⌘K to open the panel, ⌘S to save as style, and ⌘E to export. All shortcuts are configurable in the plugin settings.