Figma Plugin Integration
Precise Gradients for Modern Web Design
Install the ChromaKit Gradients plugin and bring every gradient you create straight into your Figma workspace — synced in real time, updated with one click.
Preview
See ChromaKit Inside Figma
The plugin opens as a docked panel beside your canvas. Browse presets, apply gradients to frames or text, and push edits from the ChromaKit web app without leaving your design file.
Getting Started
Install & Sync in Three Steps
Follow these steps to connect your ChromaKit account to Figma. The whole process takes under two minutes and works on both the desktop app and the browser version.
1. Install from the Figma Community
Search "ChromaKit Gradients" in the Figma Community browser or visit figma.com/community/plugins/chromakit-gradients. Click Duplicate or Install — the plugin will appear under your Plugins menu. Over 12,400 designers have already added it to their workspace.
2. Authenticate Your Account
Open the plugin via Plugins → ChromaKit Gradients. You'll be prompted to sign in with the same email you use on chromakit.design. Authentication grants the plugin read access to your saved gradient collections and write access for live updates. No API keys or manual tokens required.
3. Sync & Live-Update
Once connected, your gradient library loads instantly. Any gradient you edit in the ChromaKit web app pushes a live update to open Figma files within three seconds. Select a layer, pick a gradient from the panel, and watch it apply. Toggle Live Sync on or off at any time from the plugin settings gear.
Key Features
What the Plugin Adds to Your Workflow
One-Click Gradient Application
Highlight any frame, shape, or text layer and apply a gradient with a single click. Supports linear, radial, and angular types — the same three modes available in the ChromaKit editor.
Collection Sync
All 200+ curated presets and your personal collections are available inside the plugin panel. Organized by tags like "Sunset," "Neon," and "Pastel" for fast browsing.
Live-Update Engine
Edit a gradient on chromakit.design and every open Figma file using that gradient updates automatically. Ideal for design-system teams working across multiple artboards simultaneously.
Export to Figma Variables
Push gradient stops as Figma color variables so your design tokens stay in sync. Supports both light and dark mode variable collections out of the box.
Support
Need Help?
Run into a sync issue or have a feature request? Our plugin maintainer, Lena Voss, monitors the plugin-support@chromakit.design inbox and the #figma-plugin channel in the ChromaKit Discord. Response time is typically under four hours on business days.
Contact Plugin Support