Integrations — Connect ColorFlow
Professional color gradients for modern developers. Sync your palette across design tools, frameworks, and build pipelines in one click.
Supported Platforms
Design Tools & Development Environments
ColorFlow plugs directly into the tools your team already uses. Push gradients from Figma to production CSS, or pull your brand palette into VS Code — no exports, no manual copy-paste.
Figma Plugin
Install the ColorFlow plugin (v3.2.1) directly from the Figma Community. Sync up to 48 gradient presets per file, auto-generate CSS custom properties, and push changes to your team library in real time. Supports Figma for Desktop and Web.
Sketch
The ColorFlow Sketch plugin (v2.8) converts any gradient layer into tokenized CSS, SCSS, or Tailwind config entries. Works with Sketch 90+ and integrates with your existing Design System libraries via the built-in bridge.
Adobe XD
Export gradients as JSON or CSS variables through the ColorFlow XD add-on (v1.9). Supports multi-stop gradients with opacity overlays and automatic contrast-ratio validation against WCAG 2.2 AA standards.
VS Code Extension
Install the ColorFlow extension (v4.1.0) from the Marketplace. Preview gradients inline in CSS, SCSS, and JSX files. The extension ships with a gradient picker widget, 120 curated presets, and live snippet generation for Tailwind, CSS Modules, and styled-components.
Webflow
The ColorFlow Webflow Connector (v2.3) maps your gradient library directly into Webflow's style manager. Create reusable gradient classes, apply them to backgrounds and text, and sync updates across all published pages automatically.
Framer
Import ColorFlow gradients as Framer tokens via the official integration (v1.6). Supports responsive gradient breakpoints, component-level overrides, and direct publishing to Framer's hosting pipeline.
Build & Automate
Developer SDK
Embed ColorFlow's gradient engine into your own tools, CI pipelines, or design-token workflows. The SDK is tree-shakeable, TypeScript-first, and works in Node.js and browser environments.
npm Package
npm install @colorflow/sdk — The core SDK (v5.0.4, 14 KB gzipped) exports functions for gradient generation, format conversion, and palette analysis. Supports ESM and CommonJS. Full TypeScript definitions included. Over 2.1 million weekly downloads.
REST API
Access the ColorFlow API at api.colorflow.app/v2 with OAuth 2.0 or API keys. Endpoints include /gradients/generate, /palettes/analyze, and /exports/convert. Rate-limited to 10,000 requests/hour on the Pro plan. Response format supports JSON, CSS, SCSS, and Tailwind config.
CI/CD Integration
Run npx colorflow ci --check in your pipeline to audit gradient usage across your codebase. Detects unused gradients, inconsistent token references, and accessibility violations. Outputs a machine-readable JSON report compatible with GitHub Actions, GitLab CI, and CircleCI.
Webhook Events
Subscribe to real-time events: gradient.created, palette.updated, sync.completed, and audit.failed. Webhooks deliver payloads within 200 ms average latency. Supports retry logic with exponential backoff and HMAC signature verification.
Design Token Bridge
Export ColorFlow gradients as Amber-format or Style Dictionary-compatible tokens. The bridge (v3.1) auto-generates platform-specific outputs for iOS (Swift), Android (XML), and Web (CSS). Integrates with Tokens Studio and Studio for Design Tokens.
CLI Tool
npx colorflow-cli provides command-line access to the full gradient engine. Generate gradients from HSL ranges, batch-convert files, and scaffold design-token directories. Example: colorflow generate --stops 3 --format tailwind --out ./theme. v2.7.3, supports macOS, Linux, and Windows.