Huekit Logo
Figma Plugin

Every Design System
One Click Import

Turn an empty Figma file into a complete design system foundation. Color scales, typography, spacing, and semantic tokens, all generated instantly.

Color ScalesTypographySpacing TokensSemantic Variables
Free to Start

Features

What You Get

Generate production-ready design tokens, variables, and styles in one click.

Automatic Color Scales

Generate 11-step color scales (50-950) automatically. Create harmonious palettes with perfect lightness progression for any base color.

#A7F3F0
#7EEAE5
#5FE0DA
#54E1DB
#45CCC6
#3BBDB8
#2FA8A3
#24938F
#1A7E7A
#106966
#075451
50500950

WCAG Contrast Control

Automatic accessibility adjustments. Ensure all color combinations meet WCAG AA and AAA standards with real-time contrast checking.

AA
4.5:1Large Text
AAA
7.0:1Normal Text

Light/Dark Mode

Support dual modes in a single collection. Generate semantic color mappings that work seamlessly across both themes.

Light Theme5 Colors

Figma Variables

Native integration with Figma Variables. Export your design tokens as native Figma variables for instant use.

--primary#54E1DB
--secondary#24938F
--accent#3BBDB8

Ready Components

Button, Input, Card, Badge, and more. Pre-built components using your design system variables.

Button
Input
Card
Badge

Tailwind Export

Export in JSON and config formats. Direct integration with Tailwind CSS for seamless development workflow.

JSON
CSS
SCSS
Exporting0%

Preset Libraries

Integrate Tailwind CSS and Radix Colors. Access popular color palettes and design system presets instantly.

Tailwind
Radix
Shadcn
DaisyUI
MUI

Pricing

Simple, transparent pricing

Choose the plan that fits your design workflow. Upgrade or downgrade at any time.

Junior Designer

Get started with design system basics

Freeforever
Most Popular

Ambitious Designer

Unlimited files and advanced features for professionals

$5/month

+$3 per additional seat

Senior Designer

One payment. Everything. Forever.

$49.99/lifetime

per seat

Upgrade or downgrade at any time • Cancel anytime

FAQ

Frequently Asked Questions

Common questions about Huekit and how it works.

Huekit lets you generate a complete design system foundation with one click. Choose from popular presets like Tailwind or Radix Colors, or start with your own custom palette. The plugin creates color scales, typography styles, spacing tokens, and semantic variables directly in your Figma file. For existing projects, Huekit uses a smart algorithm to avoid conflicts with your current variables.
Absolutely. Huekit provides full control over all generated variables. You can adjust colors, modify typography scales, fine-tune spacing, and customize every aspect of your design system to match your brand guidelines.
Yes, Huekit automatically generates light and dark mode variants for all your design tokens. The plugin creates semantic color mappings that work seamlessly across both themes, ensuring consistent visual hierarchy.
Huekit supports multiple export formats including CSS, SCSS, and JSON. You can export variables directly to your codebase or copy them to clipboard. The plugin also integrates with Tailwind CSS for seamless development workflow.
Yes, Huekit works with any Figma file. It can analyze your existing components and styles to generate complementary variables, or create a completely new design system from scratch. The plugin respects your existing design decisions.
The Junior Designer plan includes basic variable generation for up to 3 design files. Ambitious Designer unlocks unlimited files, advanced features like automatic component state generation, dark mode support, priority support, and export to CSS, SCSS, and JSON. Senior Designer gives you everything in Ambitious Designer with a single payment and all future updates included.

Still have questions? Contact our team